Переключение тем в vue проекте с sass - PullRequest
0 голосов
/ 07 апреля 2020

У меня есть простые объявления переменных 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, но пока не нашел относительного решения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...