diff --git a/lzipus/src/browser_action/popup.css b/lzipus/src/browser_action/popup.css index 2096ed2..9550ef4 100644 --- a/lzipus/src/browser_action/popup.css +++ b/lzipus/src/browser_action/popup.css @@ -58,6 +58,17 @@ span.template { border: 2px solid #8844aa; /* Цвет рамки */ border-radius: 10px 100px / 120px; overflow: hidden; + transition: background-color 0.3s ease, color 0.3s ease; /* Плавный переход при наведении */ +} + +/* Подсветка шаблонов при наведении */ +span.template:hover { + background: #d0e6ff; /* Подсветка для светлой темы */ +} + +.dark-theme span.template:hover { + background: #444; /* Подсветка для тёмной темы */ + color: #fff; /* Белый цвет текста в тёмной теме */ } .formochka { @@ -95,7 +106,7 @@ span.template:hover { /* Стили для темной темы */ body.dark-theme { - background: #1a1a1a; /* Темный фон */ + background: #333; /* Темный фон */ color: white; /* Светлый текст */ } @@ -103,7 +114,7 @@ body.dark-theme { .btn { color: #000; background-color: #fff; - border: 1px solid #ccc; + border: 1px solid #8888c6; } /* Стили для кнопок в тёмной теме */ @@ -112,6 +123,7 @@ body.dark-theme { background-color: #333; border: 1px solid #555; } + .theme-btn { position: absolute; top: 10px; diff --git a/lzipus/src/browser_action/popup.html b/lzipus/src/browser_action/popup.html index b090a7e..38bdb1a 100644 --- a/lzipus/src/browser_action/popup.html +++ b/lzipus/src/browser_action/popup.html @@ -12,7 +12,7 @@
diff --git a/lzipus/src/browser_action/popup.js b/lzipus/src/browser_action/popup.js index 9ae1448..a6b0bbf 100644 --- a/lzipus/src/browser_action/popup.js +++ b/lzipus/src/browser_action/popup.js @@ -317,18 +317,37 @@ window.onload = function () { }); }; -// Кнопка и иконка + const themeToggle = document.getElementById('theme-toggle'); const themeIcon = document.getElementById('theme-icon'); -// Обработчик клика -themeToggle.addEventListener('click', () => { - document.body.classList.toggle('dark-theme'); // Переключаем класс для темы - // Меняем иконку - if (document.body.classList.contains('dark-theme')) { - themeIcon.classList.replace('fa-sun', 'fa-moon'); - } else { +const applySavedTheme = () => { + const savedTheme = localStorage.getItem('theme'); + if (savedTheme === 'dark') { + document.body.classList.add('dark-theme'); themeIcon.classList.replace('fa-moon', 'fa-sun'); + } else { + document.body.classList.remove('dark-theme'); + themeIcon.classList.replace('fa-sun', 'fa-moon'); } +}; + + +themeToggle.addEventListener('click', () => { + document.body.classList.toggle('dark-theme'); + + + if (document.body.classList.contains('dark-theme')) { + themeIcon.classList.replace('fa-moon', 'fa-sun'); + localStorage.setItem('theme', 'dark'); + } else { + themeIcon.classList.replace('fa-sun', 'fa-moon'); + localStorage.setItem('theme', 'light'); + } +}); + + +document.addEventListener('DOMContentLoaded', () => { + applySavedTheme(); }); \ No newline at end of file