Можно ли использовать JavaScript для переключения между светлым и темным режимами на странице?

Возможно, самый простой способ поддержки темного режима - определить все настройки цвета для текста, фона, границ, теней и т. Д. Для светлой темы, а затем использовать медиа-запрос для переопределения цветов, но, как вы отметили, это не так. не дают посетителю возможности переключиться.

Чтобы предоставить посетителям выбор, вы можете добавить небольшой ненавязчивый переключатель на свою страницу (некоторые сайты, такие как GitHub, отображают переключатель в своей настольной версии, но для включения мобильного устройства пользователь должен открыть функцию настроек) .

Что я делаю, так это сохраняю настройки пользователя в localStorage и следую сохраненным предпочтениям, когда они в следующий раз вернутся (даже если они изменили свои системные настройки).

Для отображения темного режима я добавляю класс темного режима в documentElement (тег html). В моем CSS есть второй набор наборов правил CSS:

<style>
    body {
        background-color: #FFFFFF;
        font-family: 'Open Sans', sans-serif;
        color: #212121;
        font-weight: 400;
        line-height: 1.125em;
        height: 100%;
    }

    .dark-mode body {
        background-color: #121212;
        color:  #ffffff;
    }
</style>

Другой вариант переключения цветов - применить к тегу атрибут data-color-mode = dark и использовать переменные CSS:

:root {
  --background-color: #f0f0f0;
  --paragraph-color: #333;
}

[data-color-mode="dark"] {
  --background-color: #333;
  --paragraph-color: #ccc;
}

Переменные CSS не будут работать с Internet Explorer, поэтому он вернется к стандартным цветам IE.

Поскольку мне все еще нужна поддержка IE9 и выше, я не использую параметр переменной CSS и, поскольку я использую отложенную загрузку на основе crossctionObserver, я не даю пользователям IE возможность переключать тему - они автоматически получают свет тема.

Чтобы это работало, у меня в голове есть следующий код:

// IE doesn't get the dark mode option – I use IntersectionObserver as a proxy for IE
if ("IntersectionObserver" in window)  {
    window.dark = JSON.parse(window.localStorage.getItem("theme_mode"));
    if (window.dark === null) { // First time - use prefers color to set the theme
        if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
            window.dark = true;
            document.documentElement.className = document.documentElement.classList.add("dark-mode");
        } else {
            window.dark = false;
        }
        localStorage.setItem("theme_mode", JSON.stringify(window.dark));
    } else if (window.dark === true) { // Returning user - prefers dark
        document.documentElement.classList.add("dark-mode");
    } // Returning user - prefers light - window.dark is false
} else { // Browser is IE - hide dark mode stuff
    document.documentElement.classList.add(" ie");
}

IE9 не поддерживает classList, но при желании я загружаю полифилл, если посетитель использует IE9.

Чтобы настроить функцию переключения, у меня есть следующий код внизу моей страницы:

// set the selector switch to the right setting
var modeToggle = document.getElementById("light-dark-toggle");
if (window.dark) {
    modeToggle.checked = true;
} else {
    modeToggle.checked = false;
}

    
modeToggle.addEventListener('change', function() {
    window.dark = modeToggle.checked;
    if (window.dark) {
        document.documentElement.classList.add("dark-mode");
    } else {
        document.documentElement.classList.remove("dark-mode");
    }
    localStorage.setItem("theme_mode", JSON.stringify(window.dark));
    lazyLoad();
});

Переключение переключателя заставляет страницу перезагружать изображения, загружая темные вместо светлых или наоборот.