Как установить светлый и темный режимы с помощью переменных S CSS

Question

Я хочу сделать легкий режим для сайта, который использует SASS с переменными в нем. Итак, вот переменные и что-то, что я пробовал (но не работает):

@media (prefers-color-scheme: dark), (prefers-color-scheme: no-preference) {
$bg: #0d0d0e;
$c0: #ffffff;
$c1: invert(#333);
$c2: #7c7c7c;
$c3: invert(#aaa);
$c4: invert(#eee);
}
@media (prefers-color-scheme: light) {
$bg: #fff;
$c0: #000;
$c1: #505050;
$c2: #66666a;
$c3: #aaa;
$c4: #eee;
}

Я должен сохранить S CSS. Стоит ли попробовать @mixin?

Answer 1

Это не будет работать с переменными Sass во время выполнения, так как они компилируются, а затем статически обслуживаются. Однако вы можете использовать CSS пользовательские свойства или CSS переменные. Их можно изменить во время выполнения с помощью Javascript (более универсально) или использовать медиазапросы вместе со значением логического контекста prefers-color-scheme. К сожалению, это значение устанавливается браузерной средой пользователя и не может быть изменено с помощью Javascript.

Однако вы можете просто переключать цвета с помощью Javascript. С событием onClick вы просто сохраняете состояние текущего цвета в буфере, назначаете текущий цвет альтернативному цвету, а затем устанавливаете альтернативный цвет на тот, который сохранен в буфере (он же прежний текущий цвет).

Я пытался переключаться между цветами, хранящимися в CSS пользовательских свойствах, с помощью флажка и селектора input: флажок, но изменения имеют только локальную область видимости (спасибо, W3 C), поэтому они не принесут вам никакой пользы - это, конечно, если вы не хотите обернуть весь ваш сайт в элемент переключателя цвета.

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

tl; dr: используйте CSS пользовательских свойств и либо go с настройками браузера по умолчанию в медиа-запросах, либо используйте бит Javascript. Все остальное очень хакерское.