53 lines
2.8 KiB
JavaScript
53 lines
2.8 KiB
JavaScript
// ============================================
|
|
// СКРИПТ ПЕРЕКЛЮЧЕНИЯ ТЁМЫ (СВЕТЛАЯ / ТЁМНАЯ)
|
|
// Борисов Иван Сергеевич, РПО 23/1, 2026
|
|
// ============================================
|
|
|
|
// ждём пока вся страница загрузится
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
|
// находим кнопку переключения темы по её ID
|
|
var btn = document.getElementById('themeToggle');
|
|
// находим элемент body чтобы менять атрибут data-theme
|
|
var body = document.body;
|
|
// находим иконку внутри кнопки (луна/солнце)
|
|
var icon = document.getElementById('themeIcon');
|
|
|
|
// при загрузке страницы — проверяем в localStorage, какую тему выбрал пользователь раньше
|
|
// если там ничего нет — ставим "light" (светлая по умолчанию)
|
|
var savedTheme = localStorage.getItem('theme') || 'light';
|
|
|
|
// применяем сохранённую тему — ставим атрибут data-theme на body
|
|
body.setAttribute('data-theme', savedTheme);
|
|
|
|
// обновляем иконку: если тёмная тема — показываем солнце, если светлая — луну
|
|
updateIcon(savedTheme);
|
|
|
|
// вешаем обработчик клика на кнопку
|
|
btn.addEventListener('click', function () {
|
|
// читаем текущую тему из атрибута data-theme
|
|
var current = body.getAttribute('data-theme');
|
|
// переключаем: было light → станет dark, было dark → станет light
|
|
var next = current === 'light' ? 'dark' : 'light';
|
|
// ставим новую тему
|
|
body.setAttribute('data-theme', next);
|
|
// сохраняем выбор в localStorage — чтобы при обновлении страницы тема осталась
|
|
localStorage.setItem('theme', next);
|
|
// обновляем иконку
|
|
updateIcon(next);
|
|
});
|
|
|
|
// функция обновления иконки на кнопке
|
|
// если тема тёмная — показываем солнце (чтобы переключить на светлую)
|
|
// если тема светлая — показываем луну (чтобы переключить на тёмную)
|
|
function updateIcon(theme) {
|
|
if (theme === 'dark') {
|
|
// HTML-код солнца (☀)
|
|
icon.innerHTML = '☼';
|
|
} else {
|
|
// HTML-код луны (☽)
|
|
icon.innerHTML = '☾';
|
|
}
|
|
}
|
|
});
|