Режим Dark / Light с использованием двух файлов CSS

Question

Я использую веб-программу, которая позволяет создавать темы. Он создает один CSS файл для каждой темы, поэтому у меня есть два CSS файла: темный. css и светлый. css.

Какой лучший способ создать темный / светлый Режим Переключатель (независимо от настроек системы посетителя) с использованием обоих файлов CSS? Я пытался загрузить противоположную тему по щелчку, но это очень непрактично и требует как минимум еще одного обхода.

Я могу встроить содержимое файлов CSS в DOM, если это поможет добиться плавного переключения .

Answer 1

Самое простое решение, которое я могу придумать, - это просто включить оба файла и использовать медиазапросы:

@media (prefers-color-scheme: light) {
    /* CSS here */
}

@media (prefers-color-scheme: dark) {
    /* CSS here */
}

Затем браузер будет использовать цветовую схему системы пользователя, чтобы определить, какой набор CSS для использования.

(Для устаревших браузеров, вероятно, лучше всего, чтобы только один из файлов имел медиазапрос и включал этот файл вторым)