Хорошо... Здесь нужно немного CSS?, но это было намного проще, чем ответы, которые я нашел в Интернете.

Чего я пытаюсь достичь?
С помощью этого метода я пытаюсь добиться двух целей.

1. Мне нужно разрешить веб-сайту загружаться так, как предпочитает пользователь (та часть, где они уже выбрали свою тему в ОС)
2. Но я также хочу разрешить им переключаться между темным и светлым режимом после загрузки.

Итак, у нас будет веб-сайт, который будет загружать тему, ожидаемую пользователем, а затем позволит им изменить ее, когда они захотят.

Шаг 1. Создайте кнопку для переключения

В качестве кнопки я использую изображение с изображением луны в формате SVG. Вы можете добавить кнопку или флажок, который позволит вам переключаться между двумя вариантами.

Шаг 2. Поместите информацию о цвете в CSS в качестве пользовательских свойств

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

Хорошо... Итак, в корне вы видите свойство, называемое цветовой схемой, и это изменит наши правила игры.
Как видите, он принимает значения светлый или темный. Я также создал два класса: .light и .dark, которые устанавливают значение цветовой схемы на темное или светлое.

Шаг 3. Добавьте цвета в различные части кода

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

Теперь всякий раз, когда свойство запрашивает цвет (например, фон, свойства цвета), вы можете использовать функцию под названием Light-Dark().
Эта функция принимает два значения: первое используется, когда цветовая схема установлена ​​на светлую, а второе используется, когда цветовая схема установлена ​​на темную.

Да... Эта функция выпущена в мае 2024 года. Она довольно новая, но скоро будет адаптирована. На момент написания этой статьи он находился в базовой поддержке. Вот документация для него

Light-Dark() — CSS: Каскадные таблицы стилей | МДН

CSS-функция Light-dark() позволяет установить два цвета для свойства — возвращая один из двух вариантов цвета, определяя, установил ли разработчик светлую или темную цветовую схему или пользователь запросил светлую или темную цветовую тему — без необходимости заключать цвета темы в запрос медиа-функции «предпочитает цветовую схему». Пользователи могут указать свои предпочтения в отношении цветовой схемы через настройки операционной системы (например, светлый или темный режим) или настройки пользовательского агента. Функция Light-Dark() позволяет предоставлять два значения цвета, где принимается любое значение . Цветовая функция CSS Light-Dark() возвращает первое значение, если предпочтение пользователя установлено на светлый или если предпочтение не установлено, и второе значение, если предпочтение пользователя установлено на темный.

Developer.mozilla.org

Если вы используете это, CSS автоматически определит предпочтения пользователя в ОС и установит для него нужный цвет.
Мы достигли нашей первой цели: веб-сайт будет загружаться в цветовом режиме, который пользователь уже хотел в своей ОС.

Шаг 4. Используйте Javascript для переключения между темным и светлым режимами

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

Здесь document.documentElement.style.colorScheme фактически ссылается на корневой элемент CSS.
Поскольку на предыдущем шаге мы уже смогли открыть веб-сайт в предпочитаемом пользователем режиме, здесь при нажатии кнопки переключения выполняются следующие действия.

1. Он проверяет, имеет ли цветовая схема какое-либо значение, если нет, то веб-сайт находится в предпочитаемом пользователем режиме, нам нужно определить, темная она или светлая, чтобы изменить режим.
2. Он использует window.matchMedia("(prefers-color-scheme:dark)").matches, чтобы определить, находится ли он в темном режиме, если он в темном режиме, мы меняем цветовую схему на светлую, если нет , мы меняем его на темный.
3. В следующий раз, когда они нажмут кнопку, мы уже установили значение для нашей цветовой схемы, поэтому просто переключаемся между темным или светлым.

*PS: * Это мой первый пост, и я все еще новичок в веб-разработке. Но когда я искал этот метод, я не видел соответствующих сообщений о нем. Если вы уже это знаете, извините, что натравил вас на клики? Я думал, что этот пост поможет мне помнить об этом процессе каждый раз, когда я работаю над новым проектом.
Если вы работаете над тем, чтобы ваш сайт работал в старых браузерах, этот метод определенно не для вас. Расскажите в комментариях об этом посте. Спасибо за прочтение.