Я создаю веб-приложение с темной и светлой темой. Я хочу обслуживать либо на основе ОС / браузера предпочтения пользователя. Тем не менее, в моем веб-приложении их будет настройка, чтобы переопределить это. Допустим, у пользователя есть предпочтение темному режиму в соответствии с его ОС / браузером, тогда он все еще может использовать светлый режим. Моя первоначальная идея состояла в том, чтобы установить атрибут data для тега body с помощью JS, когда пользователь выбирает этот режим.
Я использую переменные CSS для своих цветовых схем. Теперь возникает вопрос: могу ли я объединить это в одном запросе, без написания дублирующего кода? Моя текущая реализация с дублированным кодом выглядит следующим образом:
:root {
--background: white;
--text: black;
}
body[data-theme='dark'] {
--background: black;
--text: white;
}
@media (prefers-color-scheme: dark) {
body:not[data-theme='light'] {
--background: black;
--text: white;
}
}
Итак:
- По умолчанию я работаю со светлой темой
- Когда ваш браузер /ОС говорит, что вы предпочитаете темный, вы темнете
- Когда вы выбираете светлый или темный в веб-приложении, он отменяет настройки вашего браузера / ОС
Проблема, конечно, в том, что яиметь повторяющийся код для установки переменных темной темы. Есть ли какой-нибудь CSS-подход, чтобы это исправить (поэтому нет SCSS / Less и т. Д.)?