Адаптивная верстка сайта Freelancer Portfolio. Темная тема на JS, CSS переменные, GitHub Pages

На чтение 3 мин Просмотров 28.2к. Опубликовано 18.11.2022

Адаптивная HTML верстка сайта портфолио для новичков на HTML и CSS. Мобильная адаптивная верстка, медиазапросы. Темная тема на CSS переменных и JavaScript. Определение темной темы по системным настройкам. Сохранение выбранной темы в localStorage. Публикация сайта на GitHub Pages.

Содержание

Материалы к уроку:
JS скрипт для определения и отслеживания темной темы
Готовый код с урока
Видео урок

Материалы к уроку:

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");
    }
};