Как перезаписать переменную по нажатию кнопки в sass?

Question

[Кира]

Есть переменная $dark-mode, в ней записано булевское значение - "false", то значит это светлая тема.
Как по нажатию кнопки, перезаписать эту переменную на "true"
Делаю все на nodejs.

Здесь нет этого решения, ничего кроме scss

//SCSS

$dark-mode: false;

@mixin theme {
  // Цвета для светлой темы
  $primary-color: #f9f9f9;
  $text-color: #424242;

  @if $dark-mode == true {
    // Если условие сработает, то мы просто перезапишем значения переменных.
    $primary-color: #161625;
    $text-color: #e1e1ff;
  }

  body {
      background: $primary-color;
      color: $text-color;
  }
}

Comments

[Ankhena]

Это делается кастомными свойствами css и коротеньким js, а не препроцессорными переменными.
И легко гуглится или ищется по этому ресурсу.

Answer 1

[inkShio]

:root {
  --primary-color: #f9f9f9;
  --text-color: #424242;
}

:root.dark-mode {
  --primary-color: #161625;
  --text-color: #e1e1ff;
}

body {
  background: var(--primary-color);
  color: var(--text-color);
}

Ну и на js напишешь, что бы при нажатии на кнопку добавлялся класс dark-mode к html.

Answer 2

[Сергей delphinpro]

Вы не понимаете сути препроцессоров.
В браузере нет никаких sass переменных. А значит и изменить вы их не можете.

Как правильно сделать переключение темы?