Давайте объединим всё вместе и создадим рабочую демонстрацию, которая:
- автоматически загружает тёмную или светлую тему, в зависимости от системных настроек;
- позволяет пользователю вручную переопределить свои системные настройки;
- сохраняет предпочтительную тему пользователя при перезагрузке страницы.
Использование JavaScript и Local Storage
// Выбираем кнопку
const btn = document.querySelector(".btn-toggle");
// Проверяем предпочтение тёмного режима на уровне ОС
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// Получаем предпочтение темы пользователя из локального хранилища, если оно доступно
const currentTheme = localStorage.getItem("theme");
// Если текущая тема в localStorage равна "dark"…
if (currentTheme == "dark") {
// …переключаем класс .dark-theme для <body>
document.body.classList.toggle("dark-mode");
// В противном случае, если текущая тема в localStorage равна "light"…
} else if (currentTheme == "light") {
// …переключаем класс .light-theme для <body>
document.body.classList.toggle("light-mode");
}
// Отслеживаем щелчок по кнопке
btn.addEventListener("click", function() {
// Если у пользователя тёмный режим ОС и он соответствует нашему классу .dark-mode…
if (prefersDarkScheme.matches) {
// …тогда переключаем класс светлого режима
document.body.classList.toggle("light-mode");
// …но используем .dark-mode, если класс .light-mode уже находится в <body>
var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
} else {
// В противном случае, делаем то же самое, но для .dark-mode
document.body.classList.toggle("dark-mode");
var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
}
// В конце сохраняем текущее предпочтение в localStorage, чтобы продолжить его использовать
localStorage.setItem("theme", theme);
});
Использование PHP и файлов cookie
<?php
$themeClass = '';
if (!empty($_COOKIE['theme'])) {
if ($_COOKIE['theme'] == 'dark') {
$themeClass = 'dark-theme';
} else if ($_COOKIE['theme'] == 'light') {
$themeClass = 'light-theme';
}
}
?>
<!DOCTYPE html>
<html lang="ru">
<!-- etc. -->
<body class="<?php echo $themeClass; ?>">
<!-- и т.д. -->
<script>
const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function() {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-mode");
var theme = document.body.classList.contains("light-mode") ? "light" : "dark";
} else {
document.body.classList.toggle("dark-mode");
var theme = document.body.classList.contains("dark-mode") ? "dark" : "light";
}
document.cookie = "theme=" + theme;
});
</script>
</body>
</html>