Короткий вопрос
Можно ли сделать что-то вроде @media (prefers-color-scheme: dark), body.dark? Таким образом, появилась возможность комбинировать селекторы css с запросами css.
Более длинный вопрос с фоном
(Возможно, есть другое решение этой проблемы, о котором я не думал)
В настоящее время я разрабатываю веб-приложение с темной и светлой темами.
Я начал переключать его, используя @media (prefers-color-scheme: dark). Однако многие старые телефоны, к сожалению, не поддерживают это, поэтому я решил реализовать способ изменить это вручную. Поэтому я добавляю классы light или dark в тело в зависимости от пользовательских настроек.
В моем файле s css я хочу установить переменные в зависимости от .light или .dark, и если ни один из этих классов не установлен он должен зависеть от медиа-запроса со значением по умолчанию .light.
Мой текущий подход выглядит так:
// setting all the light-mode variables:
--header-color: white;
@media (prefers-color-scheme: dark) {
body:not(.light) {
--header-color: dark-grey;
}
}
Хотя это достигает цели, если медиа-запрос установлен на затемнение иначе не сработает, так как в настоящее время вы не можете "принудительно включить" темный режим.
Конечно, я мог бы добавить еще один раздел ниже с body.dark{}, но тогда мне нужно было бы скопировать все переменные, которых довольно много .
Итак, мне было интересно, можно ли сделать что-то вроде @media (prefers-color-scheme: dark), body.dark.
Или, если есть какой-либо другой вариант, чтобы блок выбирал тело, если
или
- , если предпочтительная цветовая схема не является темной, и
- тело не имеет класса темный
и выбор другого блока тело, если
или
- , если предпочтительная цветовая схема темная.
Но оба являются одним блоком, а не двумя, так что мне не нужно повторять каждую переменную дважды.
Спасибо вам большое.