Тематика Scss зависит от класса тела с предопределенными переменными - PullRequest
Новая
       19

Тематика Scss зависит от класса тела с предопределенными переменными

0 голосов
/ 28 ноября 2018

Я хочу иметь флажок, который, когда вы нажимаете на него, добавляет класс к тегу body, например, как 'dark-theme' или 'light theme'.Проблема в том, что требования к темам появляются после того, как я стилизовал все элементы, и было бы самоубийством менять стили каждого элемента сейчас.Пожалуйста, помогите 

$color-white: #ffffff;
$color-black: #000000;

// Dark

$color-green: #328332;
$color-red: #a23232;

$color-background-dark: #212734;
$color-backgound-light: #31394c;

$color-text: rgba(255, 255, 255, 0.3);
$color-text-darker: #B8BCC6;
$color-text-active: #ffffff;

$color-button-primary: #0078ff;
$color-button-primary-text: #ffffff;

$color-button-secondary: rgba(255, 255, 255, 0.3);
$color-button-secondary-text: rgba(255, 255, 255, 0.3);
$color-button-secondary-active: #B8BCC6;
$color-button-secondary-text-active: #B8BCC6;

$color-line: #3d465e;
$color-line-darker: rgba(255, 255, 255, 0.3);

$color-table-dark-row: #2C3345;


// Light

$color-green: #006400;
$color-red: #8b0000;

$color-background-dark: #f5f5f5;
$color-backgound-light: #ffffff;

$color-text: #b3b3b3;
$color-text-darker: #808080;
$color-text-active: #000000;

$color-button-primary: #0078ff;
$color-button-primary-text: #ffffff;

$color-button-secondary: #b3b3b3;
$color-button-secondary-text: #b3b3b3;
$color-button-secondary-active: #808080;
$color-button-secondary-text-active: #808080;

$color-line: #f5f5f5;
$color-line-darker: #b3b3b3;

$color-table-dark-row: #FAFAFA;

1 Ответ

0 голосов
/ 28 ноября 2018

Вы можете скомпилировать css файлы дважды для каждой темы с разными цветами (и другими редактируемыми вещами).

Файл со всеми «светлыми» переменными light-theme.scss: 

$color: black;
$background: white;

Файл свсе «темные» переменные dark.scss: 

$color: white;
$background: black;

Файл, содержащий все ваши стили _style.scss: 

@import '_button.scss'; // If you are importing something
@import '_header.scss';

element{
  color: $color;
  background: $background;
}

И файл, в котором создаются все темы themes.scss: 

.light {
  @import 'light-theme';
  @import '_styles';
}

.dark {
  @import 'dark-theme';
  @import '_styles';
}

Вывод Css: 

.dark element {
  color: white;
  background: black;
}

.light element {
  color: black;
  background: gray;
}
...