SNA_Tecnology/Site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

Сделал светлую тему по умолчанию

Browse Source
This commit is contained in:
NikDizell 2025-11-12 11:29:39 +03:00
parent 05609de844
commit 7fde9fce1b
2 changed files with 44 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
OneCprogsite/programmer/static/programmer/js/theme-switcher.js
View File

@ -1,18 +1,21 @@
// 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 === 'light') {
switchToLightTheme();
} else {
// Устанавливаем светлую тему по умолчанию
if (savedTheme === 'dark') {
switchToDarkTheme();
} else {
switchToLightTheme(); // Светлая тема по умолчанию
}
// Обработчик переключения темы
// Обработчик переключения темы для десктопного переключателя
if (themeToggle) {
themeToggle.addEventListener('change', function() {
if (this.checked) {
switchToLightTheme();
@ -20,23 +23,46 @@ document.addEventListener('DOMContentLoaded', function() {
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');
themeToggle.checked = true;
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');
themeToggle.checked = false;
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 = '/static/programmer/css/styles_dark.css';
// Восстанавливаем светлую тему по умолчанию при ошибке
themeCSS.href = themeCSS.href.replace('styles_dark.css', 'styles_w.css');
};
});

6
OneCprogsite/programmer/templates/programmer/base.html
View File

@ -8,7 +8,7 @@
{% bootstrap_css %}
<!-- Основной CSS файл (темная тема по умолчанию) -->
<link type="text/css" href="{% static 'programmer/css/styles_dark.css' %}" rel="stylesheet" id="theme-css" />
<link type="text/css" href="{% static 'programmer/css/styles_w.css' %}" rel="stylesheet" id="theme-css" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="{% static 'programmer/images/main.ico' %}" type="image/x-icon">
@ -367,7 +367,7 @@
<!-- Theme Toggle Switch -->
<div class="theme-switcher">
<input type="checkbox" id="theme-toggle" class="theme-toggle-checkbox">
<input type="checkbox" id="theme-toggle" class="theme-toggle-checkbox" checked>
<label for="theme-toggle" class="theme-toggle-label">
<span class="theme-toggle-slider"></span>
<span class="theme-icon sun">☀️</span>
@ -411,7 +411,7 @@
</span>
</a>
<div class="theme-switcher" style="justify-content: center;">
<input type="checkbox" id="mobile-theme-toggle" class="theme-toggle-checkbox">
<input type="checkbox" id="mobile-theme-toggle" class="theme-toggle-checkbox" checked>
<label for="mobile-theme-toggle" class="theme-toggle-label">
<span class="theme-toggle-slider"></span>
<span class="theme-icon sun">☀️</span>