Адаптивная HTML верстка сайта портфолио для новичков на HTML и CSS. Мобильная адаптивная верстка, медиазапросы. Темная тема на CSS переменных и JavaScript. Определение темной темы по системным настройкам. Сохранение выбранной темы в localStorage. Публикация сайта на GitHub Pages.
Содержание
Материалы к уроку:
JS скрипт для определения и отслеживания темной темы
const btnDarkMode = document.querySelector(".dark-mode-btn");
// 1. Проверка темной темы на уровне системных настроек
if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ) {
btnDarkMode.classList.add("dark-mode-btn--active");
document.body.classList.add("dark");
}
// 2. Проверка темной темы в localStorage
if (localStorage.getItem('darkMode') === 'dark') {
btnDarkMode.classList.add("dark-mode-btn--active");
document.body.classList.add("dark");
} else if (localStorage.getItem("darkMode") === "light") {
btnDarkMode.classList.remove("dark-mode-btn--active");
document.body.classList.remove("dark");
}
// Если меняются системные настройки, меняем тему
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
const newColorScheme = event.matches ? "dark" : "light";
if (newColorScheme === "dark") {
btnDarkMode.classList.add("dark-mode-btn--active");
document.body.classList.add("dark");
localStorage.setItem("darkMode", "dark");
} else {
btnDarkMode.classList.remove("dark-mode-btn--active");
document.body.classList.remove("dark");
localStorage.setItem("darkMode", "light");
}
});
// Включение ночного режима по кнопке
btnDarkMode.onclick = function () {
btnDarkMode.classList.toggle("dark-mode-btn--active");
const isDark = document.body.classList.toggle("dark");
if (isDark) {
localStorage.setItem("darkMode", "dark");
} else {
localStorage.setItem("darkMode", "light");
}
};
