В настоящее время я реализую светлый и темный режим в приложении Angular (Angular 11) с использованием SCSS. Я знаю, как настроить темы и применить соответствующие классы к некоторому корневому элементу (app-root для переключения между темами. Я ищу чистый способ стилизовать элемент (например, произвольный div) с цветом фона, который изменяется в зависимости от на светлом и темном режиме.
Итак, у меня есть фон, определенный как
$light-bg-1: white; $light-bg-2: mat-color($mat-grey, 50); $light-bg-3: mat-color($mat-grey, 300); $light-bg-1: mat-color($mat-grey, 900); $light-bg-2: mat-color($mat-grey, 800); $light-bg-3: mat-color($mat-grey, 700);
и класс на app-root, который равен либо .app-light-theme, либо .app-dark-theme
Что я хочу делать.
// In global/shared partials @mixin bg1() { // uses $light-bg-1 or $light-bg-2 for background-color based on // which class is applied on the app-root. } // In blah.component.scss #blah-element { … @include bg1(); }
Другие способы, которые (я думаю) сработают, но ищут лучшее решение
Не используйте миксин, а просто определяйте классы
.app-light-theme .bg1 { background-color: $light-bg-1; } .app-dark-theme .bg1 { background-color: $dark-bg-1; }
но предпочел бы не делать <div id=»blah-element» class=»bg1″>
Mixin включен вне селектора элемента, который включает селектор элементов
Что-то типа
// In global/shared partials @mixin bg1($selector) { .app-dark-theme #{$selector} { background-color: $dark-bg-1}; .app-dark-theme #{$selector} { background-color: $dark-bg-2}; } // In blah.component.scss @include bg1(#blah-element); #blah-element { … }
Вы можете прочитать это. Вам нужно будет немного изменить селекторы, но в основном это будет делать то, что вы хотите. — person tplusk schedule 23.01.2021
Источник: