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 // Theme Switcher Script
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const themeToggle = document.getElementById('theme-toggle'); const themeToggle = document.getElementById('theme-toggle');
const mobileThemeToggle = document.getElementById('mobile-theme-toggle');
const themeCSS = document.getElementById('theme-css'); const themeCSS = document.getElementById('theme-css');
// Проверяем сохраненную тему в localStorage // Проверяем сохраненную тему в localStorage
const savedTheme = localStorage.getItem('theme'); const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') { // Устанавливаем светлую тему по умолчанию
switchToLightTheme(); if (savedTheme === 'dark') {
} else {
switchToDarkTheme(); switchToDarkTheme();
} else {
switchToLightTheme(); // Светлая тема по умолчанию
} }
// Обработчик переключения темы // Обработчик переключения темы для десктопного переключателя
if (themeToggle) {
themeToggle.addEventListener('change', function() { themeToggle.addEventListener('change', function() {
if (this.checked) { if (this.checked) {
switchToLightTheme(); switchToLightTheme();
@ -20,23 +23,46 @@ document.addEventListener('DOMContentLoaded', function() {
switchToDarkTheme(); switchToDarkTheme();
} }
}); });
}
// Обработчик переключения темы для мобильного переключателя
if (mobileThemeToggle) {
mobileThemeToggle.addEventListener('change', function() {
if (this.checked) {
switchToLightTheme();
} else {
switchToDarkTheme();
}
// Синхронизируем оба переключателя
if (themeToggle) {
themeToggle.checked = this.checked;
}
});
}
function switchToLightTheme() { function switchToLightTheme() {
themeCSS.href = themeCSS.href.replace('styles_dark.css', 'styles_w.css'); 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'); localStorage.setItem('theme', 'light');
} }
function switchToDarkTheme() { function switchToDarkTheme() {
themeCSS.href = themeCSS.href.replace('styles_w.css', 'styles_dark.css'); 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'); localStorage.setItem('theme', 'dark');
} }
// Синхронизация переключателей при загрузке
if (themeToggle && mobileThemeToggle) {
mobileThemeToggle.checked = themeToggle.checked;
}
// Обработка ошибок загрузки CSS // Обработка ошибок загрузки CSS
themeCSS.onerror = function() { themeCSS.onerror = function() {
console.error('Ошибка загрузки CSS файла темы'); 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 %} {% bootstrap_css %}
<!-- Основной 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"> <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"> <link rel="shortcut icon" href="{% static 'programmer/images/main.ico' %}" type="image/x-icon">
@ -367,7 +367,7 @@
<!-- Theme Toggle Switch --> <!-- Theme Toggle Switch -->
<div class="theme-switcher"> <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"> <label for="theme-toggle" class="theme-toggle-label">
<span class="theme-toggle-slider"></span> <span class="theme-toggle-slider"></span>
<span class="theme-icon sun">☀️</span> <span class="theme-icon sun">☀️</span>
@ -411,7 +411,7 @@
</span> </span>
</a> </a>
<div class="theme-switcher" style="justify-content: center;"> <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"> <label for="mobile-theme-toggle" class="theme-toggle-label">
<span class="theme-toggle-slider"></span> <span class="theme-toggle-slider"></span>
<span class="theme-icon sun">☀️</span> <span class="theme-icon sun">☀️</span>