Лучший способ динамически изменить тему моего Vue.js SPA?

Поэтому я думаю, что заголовок является достаточным объяснением: я хотел бы динамически тематизировать все свое приложение. Возможно, это означает изменение цвета всех div, когда я нажимаю определенную кнопку, или изменение цвета всего веб-приложения, когда определенный пользователь входит в систему.

Чтобы дать некоторое представление о том, над чем я сейчас работаю, скажу, что я создал приложение Vue.js, которое использует множество библиотек, в том числе одну под названием Element-ui, в которой уже есть встроенная опция тематики. Проблема в том, что он написан в scss, и я хотел бы изменить все цвета переменных во время навигации. Мой проект выглядит примерно так:

<template>
  ... some HTML and components...
</template>

<script>
  ... some javascript ...
</script>

<style scoped>
  ... some style that is scoped to the current component only ...
</style>

У меня много файлов, подобных этому, поэтому создание «глобальной функции» для всех из них не представляется мне практичным. Также я импортирую основной файл scss только один раз в свой main.js.

Могу ли я что-нибудь сделать, чтобы создать динамическую тематику для своего веб-приложения? Использование saas - хорошая идея? Может быть, Javascript?

РЕДАКТИРОВАТЬ

Мне кажется, что я недостаточно хорошо это объяснил, поэтому хочу добавить простой пример. Если вы посетите страницу Element, вы увидите в правом верхнем углу В углу есть селектор цвета, который при изменении цвета меняет также акцентные цвета всего веб-сайта, такие как цвета кнопок, цвета ссылок и т. д.

Надеюсь, это поможет немного лучше понять

РЕДАКТИРОВАТЬ

Сейчас я остановился на очень плохом и, как мне кажется, плохо оптимизированном решении. Идея состоит в том, что когда пользователь меняет тему, я просто создаю новый файл css и добавляю его в текущий документ.

let sheet = document.createElement('style')
sheet.innerHTML = `*[class*="--primary"]{
                      background-color: ${colors[0]};
                    }
                    ...`;
document.body.appendChild(sheet);

Я действительно думаю, что это очень плохое решение, но сейчас я не могу придумать ничего другого, что могло бы работать динамически, когда пользователь изменяет параметр. Я бы действительно хотел, чтобы процесс был безупречным: пользователь выбирает цвет, и все приложение просто меняется на этот конкретный цвет, без заранее созданных theme.css.

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ

Наконец-то нашел решение, обратитесь к ответу!


vue.js theming element-ui
person Eugenio    schedule 29.03.2018    source источник

Ответы (1)


arrow_upward
22
arrow_downward

Наконец, через несколько долгих дней я пришел к решению, которое, на мой взгляд, легко реализовать и очень легкое.

ПЕРЕМЕННЫЕ CSS

Прежде чем приступить к большому поиску, я даже не знал о существовании таких переменных, и они, похоже, не используются. В любом случае, я надеюсь, что это поможет кому-то там, кто ищет мой ответ:

<template
  <app-main></app-main>
  <app-sidebar></app-sidebar>
  ...
</template>

<style>
  :root{
    --primary-color: #C5C5C5!important;
    --secondary-color: #6C7478!important;
    --tertiary-color: #FFFFFF!important;
    --success-color: #80b855!important;
    --warning-color: #eaca44!important;
    --error-color: #ef4d4d!important;
  }

  /* Theming */
  header{
    background-color: var(--primary-color);
  }
  div{
    color: var(--tetriary-colory);
  }
  ...
  /*   END   */
</style>

<script>
  import axios from 'axios' /* all your imports etc. */

  export default{
    data(){
    },
    methods: {
      axios.post(`http://localhost:8080/foo`).then(function (response){
        let bodyStyles = document.body.style;
        bodyStyles.setProperty('--primary-color', response.colors[0]);
        bodyStyles.setProperty('--tertiary-color', response.colors[1]);
        ...
      }
    }
  }
</script>

Как видите, я просто инициализирую несколько полезных переменных CSS, и когда они мне нужны (например, в этом вызове сообщения api), я просто изменяю их с помощью простой функции bodyStyles.setProperty('propertyName').

Мне очень нравится этот тип настройки, поскольку я использую его на своей странице входа в систему, поэтому, когда пользователь успешно входит в систему, я загружаю из базы данных его собственные цвета и настраиваю их точно так же.

Пример моего веб-сайта

Надеюсь, это кому-то поможет! Ваше здоровье!

person Eugenio    schedule 04.04.2018
comment
Это не работает в IE11 и старше. Для изменения темы на лету я использую vuex +: style {color: primary} и т. Д. codesandbox.io/ s / 3no663nv6 - person DenniLa2; 30.08.2018
comment
@ DenniLa2 Извините за поздний комментарий, но вы абсолютно правы, лучше всего было бы начать использовать vuex, но ради времени и простоты я выбрал эту реализацию. - person Eugenio; 08.10.2018
comment
Но Element UI не считывал переменные css, поэтому он не работал для Element UI или других фреймворков пользовательского интерфейса. - person sangelee; 20.03.2020
comment
@sangelee вы узнали, как это сделать в element-ui? - person linx; 16.01.2021