Angular переключение тем с использованием переменных S CSS - PullRequest
Новая
       36

Angular переключение тем с использованием переменных S CSS

0 голосов
/ 01 мая 2020

Я пытаюсь создать Angular переключатель темы. Я уже видел сотни руководств по переключению тем с использованием Angular Material. Я хочу то же самое, но с переменными S CSS.

Я хочу определить переменные в моем стиле.s css: 

.dark {
 $color1: #fff;
 $color2: #fff;
 $color2: #fff;
}

.light {
 $color1: #eee;
 $color2: #eee;
 $color2: #eee;
}

, а затем использовать эти переменные в компонентах. Возможно ли это?

1 Ответ

0 голосов
/ 01 мая 2020

Попробуйте это

В вашем html файле

Ваша тема по умолчанию. 

<html data-theme="light">

</html>

В вашем css файле 

html {
height: 100%;
font-family: 'Montserrat';

display: grid;
align-items: center;
justify-items: center;
--bg: #FCFCFC;
--bg-panel: #EBEBEB;
--color-headings: #0077FF;
--color-text: #333333;

} 

 html[data-theme='dark'] {
--bg: #333333;
--bg-panel: #434343;
--color-headings: #3694FF;
--color-text: #B5B5B5;

}

Переключение на основе некоторого условия.

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

Похожие темы

...