переключение цветовых тем

Доброго дня!

Если необходимо сделать переключение цветовых тем на сайте, получается возможен вариант только с наследованием как и без бэм именования? Т.е. задаем body class="theme_blue", и пишем отдельный css в котором все элементы имет родителем body.theme_blue, или с бэм именованием есть другие решения?

7 years ago

qfox

Есть интересный вариант с CSS Variables и postcss-плагином https://www.npmjs.com/package/postcss-css-variables для IE/edge и старых браузеров: http://caniuse.com/#search=variables.

В css будет что-то такое:

// button.css
.button { background-color: var(--color-control-bg); color: var(--color-control-text); }
.button_hovered { background-color: var(--color-control-bg-hovered); color: var(--color-control-text-hovered); }

// button_tone_default.css или даже toner_tone_default.css
.button_tone_default, .toner_tone_default {
  --color-control-bg: #eee;
  --color-control-text: #333;
  --color-control-bg-hovered: #ddd;
  --color-control-text-hovered: #000;
}
// _tone_dark.css соотв
.button_tone_dark, .toner_tone_dark {
  --color-control-bg: #111;
  --color-control-text: #eee;
  --color-control-bg-hovered: #333;
  --color-control-text-hovered: white;
}

После чего в обычных браузерах сразу работает, а для IE/EDGE/редких других — добавляете плагин в postcss где-то рядом с autoprefixer.

Всё :-)

Чтобы оставлять комментарии, необходимо авторизоваться.