В настоящее время я реализую светлый и темный режим в приложении 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
По сути, я искал псевдо-селектор
:host-context
. Я использовал это в миксине, как определено ниже:Затем решил использовать родительский селектор
&
для передачи в качестве параметра миксину: