Изменение значений переменных scss

Question

Я определил различные переменные в моем файле scss, я использовал эти переменные в некоторых файлах scss.

_variables.scss

$light-theme: rgba(94,161,215,0.3);
$dark-theme: #5EA1D7;
$darker-theme: #57647A;
$very-dark-theme: #455061;

Как я могу определить 3 группы тем? Что-то вроде:

default-theme {
    $light-theme: rgba(94,161,215,0.3);
    $dark-theme: #5EA1D7;
    $darker-theme: #57647A;
    $very-dark-theme: #455061;
}

dark-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

light-theme {
    $light-theme: black;
    $dark-theme: brown;
    $darker-theme: black;
    $very-dark-theme: black;
}

Я хотел бы изменить значения в соответствии с выбранной темой. Например, у меня есть 3 кнопки, при выборе которых будут меняться переменные цвета.

app.component.html

 <button mat-raised-button (click)="onSetTheme('default-theme')">Default</button>
  <button mat-raised-button (click)="onSetTheme('dark-theme')">Dark</button>
  <button mat-raised-button (click)="onSetTheme('light-theme')">Light</button>

app.component.ts

  onSetTheme(theme) {
    //TODO here I want to change the theme
  }

Как я могу изменить тему внутри функции onSetTheme().

Спасибо!

Answer 1

Почему мы не можем динамически изменять переменные sass в браузере?

Sass - это препроцессор для CSS, который облегчает написание правил стиля во время разработки. Браузер не будет загружать ваши файлы.scss /.sass; он загрузит CSS - поэтому ваш.scss /.sass должен быть конвертирован в CSS для браузера.

Ваши переменные Sass являются только переменными в ваших файлах Sass. После преобразования в CSS переменные будут заменены значениями, которые они представляли во время компиляции.

.scss в разработке:

body {
    background: $dark-theme;
}

Скомпилированный CSS, который загружает браузер:

body {
    background: black;
}

Ваш onSetTheme function - это функция javascript, которая будет запускаться в браузере и не будет иметь доступа к изменению переменных sass, потому что они не существуют на данный момент. Браузер загружает только скомпилированный CSS (он не будет загружать оригинальные файлы и переменные Sass).

---

Как динамически изменить тему вашего сайта в браузере?

Переключение классов CSS

CSS переменные ( MDN)

Answer 2

Вы можете использовать переменные SASS и другие вещи SASS И CSS-переменные вместе.

SASS

$body-margin: 0 10px;

:root {
    --bg-color: #000;
    --text-color: #FFF;
}


body {
    background: var(--bg-color);
    color: var(--text-color;
    margin: $margin;
}

JS

onSetTheme(theme) {
    let bgColor, textColor;
    switch(theme) {
      case light:
          bgColor = #FFF;
          textColor = #000;
          break;
      case dark:
          bgColor = #000;
          textColor = #FFF;
          break;
    }
    document.querySelector('body').style.setProperty('--bg-color', bgColor);
    document.querySelector('body').style.setProperty('--text-color', textColor);
}