Блог

Главная - Вопросы по программированию - Как реализовать несколько путей проверки для разных тем в приложении VueJS?

Как реализовать несколько путей проверки для разных тем в приложении VueJS?

#javascript #html #css #vue.js

#javascript #HTML #css #vue.js

Вопрос:

У меня есть приложение VueJS. Он реализует функциональность нескольких тем. Для этого я использую что-то вроде этого:

 let theme = getTheme() // returns 'light' | dark
document.documentElement.setAttribute('data-theme', theme)

И цветовые стили для темы по умолчанию (светлая) и для темной темы

 :root {
  --primary-color: #6B59CC;
  --primary-color-rgb: #{hexToRGB(#6B59CC)};

  --secondary-green-color: #009a76;
  --secondary-green-color-rgb: #{hexToRGB(#009a76)};

  --secondary-orange-color: #F6933E;
  --secondary-orange-color-rgb: #{hexToRGB(#F6933E)};
  ...
}

[data-theme="dark"] {
  --primary-color: #6B59CC;
  --primary-color-rgb: #{hexToRGB(#6B59CC)};

  --secondary-green-color: #009a76;
  --secondary-green-color-rgb: #{hexToRGB(#009a76)};

  --secondary-orange-color: #F6933E;
  --secondary-orange-color-rgb: #{hexToRGB(#F6933E)};
  ...
}

ПРИМЕЧАНИЕ: пожалуйста, не обращайте внимания на то, что стили одинаковы как для светлой, так и для темной темы. Это просто пример.

Мне нужно использовать разные цвета значков для каждой темы. Например: базовый цвет значка светлой темы — это #a8a8a8 , а для базового цвета значка темной темы — это #cfcfcf .

Как динамично изменить цвет значка? Или есть несколько способов реализовать это в мире?

PS Я использую SVG значки с object тегом. Вот так:

 <object :data="require('./assets/home.svg')" />

Комментарии:

1. Как пользователь может изменить тему? нажав кнопку или что-то в этом роде?

2. да, нажатием кнопки. затем тема данных будет изменена.

3. сработал ли ответ?

Ответ №1:

Как насчет определения переменной в data ; что-то вроде lightTheme и проверьте это, чтобы изменить тему:

 data() {
    return {
        lightTheme: false
    }
},
methods: {
    changeTheme() {
        this.lightTheme = !lightTheme
        let icon = document.getElementById("id")
        if(this.lightTheme) {
            icon.classList.add('light-theme-style')
            icon.classList.remove('dark-theme-style')
        } else {
             icon.classList.add('dark-theme-style')
             icon.classList.remove('light-theme-style')
        }
    }
}

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