Темы Dynami c в SCSS - PullRequest
Новая
       28

Темы Dynami c в SCSS

1 голос
/ 28 марта 2020

Итак, скажем, у меня есть две карты в S CSS, 

$dark-theme: (
    primary: #BB86FC,
    primary-varient: #3700B3,
    secondary: #03DAC6,
    background: #2c2e43,
    error: #CF6679,
);

$light-theme: (
    primary: #6200EE,
    primary-varient: #3700B3,
    secondary: #03DAC6,
    secondary-varient: #018786,
    background: #FFFFFF,
    error: #B00020,
);

Если бы мне нужно было установить цвет фона на основе значения фона карты, как я мог бы переключаться между двумя картами темы используя переключатель на веб-странице? Поэтому, когда я переключаюсь между ними, цвет фона меняется на значение с другой карты.

1 Ответ

0 голосов
/ 29 марта 2020

Вы можете установить имя класса темы на root и изменить его на js. Я бы порекомендовал иметь все темы на карте, а не по отдельности. Например: 

$themes: (
  dark-theme: (
    primary: #BB86FC,
    ...
  ),
  light-theme: (
    primary: #6200EE,
    ...
  )
);

И затем выполните итерации по ним: 

@each $theme in $themes {
  body.#{$theme} .example-class{
    color: map-get($theme, property);
  }
}

Теперь вам нужно изменить класс тела, чтобы изменить тему: 

const 
[button] = document.getElementsByTagName('button'),
[body] = document.getElementsByTagName('body')

button.addEventListener('click', () => {
  body.classList.add('light-theme')
})

Пусть Я добавлю очень простой пример: 

const [ body ] = document.getElementsByTagName('body'),
 [button] = document.getElementsByTagName('button')
 
 button.addEventListener('click', () => body.classList.toggle('dark'))
body button {
  background: #fff;
  color: #000;
}

body.dark button {
  background: #000;
  color: #fff;
}
<body>
  <button>Change color</button>
</body>
...