Популярное направление в разрешении переключения светлой / темной темы - использование CSS Пользовательских свойств. Чаще всего просто создают на странице переключатель для выбора светлого или темного. Я заинтересован в добавлении уровня сложности, который позволяет пользователю выбирать системные предпочтения ИЛИ переопределение (светлое или темное). После выбора системного предпочтения на уровне @media будет отображаться светлый и темный. Если пользователь не выбрал цветовую схему, в этом случае мы по умолчанию выберем некоторую схему (скажем, светлую).
Предполагается, что переопределения установлены путем применения атрибутов к document.documentElement.
html[theme="light"] должен всегда предоставлять светлую тему, даже если в системе пользователя установлено темное или не заданное значение. html[theme="dark"] должно всегда предоставить темную тему, даже если система пользователя настроена на светлую или не установлена. html[theme="none"] следует посмотреть на системные настройки и определить ... @media (prefers-color-scheme: dark) должен предоставить темная тема. @media (prefers-color-scheme: light) должна предоставить светлую тему. @media (prefers-color-scheme: no-preference) должна предоставить светлую тему по умолчанию.
Проблема здесь в том, что я хочу посмотреть, смогу ли я записать переменные для светлых / темных тем один раз , поскольку кажется, что каждое решение, которое я могу придумать, требует записи набора переменных в двух наборах правил.
Ищу здесь родное CSS решение, так как я мог бы сделать это с инструменты сборки; Код SASS @mixin ниже.
@mixin dark-theme() {
--bg-color: black;
}
:root {
--bg-color: white;
}
html[theme="dark"] {
@include dark-theme(); /* 1st occurrence */
}
@media (prefers-color-scheme: dark) {
html:not([theme="light"]) {
@include dark-theme(); /* 2nd occurrence */
}
}
body {
background-color: var(--bg-color);
}
Я ожидаю какой-то комбинации с использованием :not([theme]) и @media not all and (prefers-color-scheme), но я пробовал несколько комбинаций и приблизился, но не на 100% logi c выше. Я также попытался переключить конкретную тему c на резервную (установив темную тему на :root, а затем попытался обобщить правила @media для применения светлой темы), но это, похоже, не сработало либо.
Ах, никаких JavaScript решений тоже, пожалуйста. Опять же, смотрю, возможен ли родной CSS.