SCSS Mixin с использованием корневого селектора

В настоящее время я реализую светлый и темный режим в приложении 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