68 lines
2.7 KiB
JavaScript
68 lines
2.7 KiB
JavaScript
// Theme Switcher Script
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const themeToggle = document.getElementById('theme-toggle');
|
||
const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
|
||
const themeCSS = document.getElementById('theme-css');
|
||
|
||
// Проверяем сохраненную тему в localStorage
|
||
const savedTheme = localStorage.getItem('theme');
|
||
|
||
// Устанавливаем светлую тему по умолчанию
|
||
if (savedTheme === 'dark') {
|
||
switchToDarkTheme();
|
||
} else {
|
||
switchToLightTheme(); // Светлая тема по умолчанию
|
||
}
|
||
|
||
// Обработчик переключения темы для десктопного переключателя
|
||
if (themeToggle) {
|
||
themeToggle.addEventListener('change', function() {
|
||
if (this.checked) {
|
||
switchToLightTheme();
|
||
} else {
|
||
switchToDarkTheme();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Обработчик переключения темы для мобильного переключателя
|
||
if (mobileThemeToggle) {
|
||
mobileThemeToggle.addEventListener('change', function() {
|
||
if (this.checked) {
|
||
switchToLightTheme();
|
||
} else {
|
||
switchToDarkTheme();
|
||
}
|
||
// Синхронизируем оба переключателя
|
||
if (themeToggle) {
|
||
themeToggle.checked = this.checked;
|
||
}
|
||
});
|
||
}
|
||
|
||
function switchToLightTheme() {
|
||
themeCSS.href = themeCSS.href.replace('styles_dark.css', 'styles_w.css');
|
||
if (themeToggle) themeToggle.checked = true;
|
||
if (mobileThemeToggle) mobileThemeToggle.checked = true;
|
||
localStorage.setItem('theme', 'light');
|
||
}
|
||
|
||
function switchToDarkTheme() {
|
||
themeCSS.href = themeCSS.href.replace('styles_w.css', 'styles_dark.css');
|
||
if (themeToggle) themeToggle.checked = false;
|
||
if (mobileThemeToggle) mobileThemeToggle.checked = false;
|
||
localStorage.setItem('theme', 'dark');
|
||
}
|
||
|
||
// Синхронизация переключателей при загрузке
|
||
if (themeToggle && mobileThemeToggle) {
|
||
mobileThemeToggle.checked = themeToggle.checked;
|
||
}
|
||
|
||
// Обработка ошибок загрузки CSS
|
||
themeCSS.onerror = function() {
|
||
console.error('Ошибка загрузки CSS файла темы');
|
||
// Восстанавливаем светлую тему по умолчанию при ошибке
|
||
themeCSS.href = themeCSS.href.replace('styles_dark.css', 'styles_w.css');
|
||
};
|
||
}); |