У меня есть простые объявления переменных sass, как показано ниже
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
Это то, что мне нужно для темной темы, которая является темой по умолчанию. Но я хочу добавить и легкую тему. В моем мозгу это очень просто.
if .wrapper.darktheme{
$theme-primary-dom: #181818ff
$theme-primary-sub: #29292Bff
$theme-secondary-dom: #FAFAFAff
$theme-secondary-sub: #C4C4C4ff
$theme-primary-sub-transparent: #29292B22
} else {
$theme-primary-dom: #FAFAFAff
$theme-primary-sub: #C4C4C4ff
$theme-secondary-dom: #181818ff
$theme-secondary-sub: #29292Bff
$theme-primary-sub-transparent: #C4C4C422
}
Теперь я понятия не имею, как это сделать в SASS. Кроме того, у меня есть
<button class="theme__switch theme__switch--light">theme is light</button>
в компоненте заголовка и
<div class="wrapper darktheme"></div>
в основном приложении. vue. которые увеличивают количество завершений, поскольку кнопка запуска и область запуска находятся в разных компонентах.
Конечно, я могу легко получить это, используя jquery, но, поскольку я использую vue .cli, добавив код jquery не чувствовал себя хорошо. Последние 3 дня я искал во всем stackoverflow и google, но пока не нашел относительного решения.