Julfy/Answer_Templates
1
0
Fork 0
forked from Dgors03/Answer_Templates
Code Pull Requests Activity

add advanced night theme

Browse Source
This commit is contained in:
Dmitriy Gorshenin
2024-12-04 21:17:05 +03:00
parent d29e756a35
commit 35b2a22233
3 changed files with 42 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lzipus/src/browser_action/popup.css
View File

@@ -58,6 +58,17 @@ span.template {
border: 2px solid #8844aa; /* Цвет рамки */ border: 2px solid #8844aa; /* Цвет рамки */
border-radius: 10px 100px / 120px; border-radius: 10px 100px / 120px;
overflow: hidden; 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 { .formochka {
@@ -95,7 +106,7 @@ span.template:hover {
/* Стили для темной темы */ /* Стили для темной темы */
body.dark-theme { body.dark-theme {
background: #1a1a1a; /* Темный фон */ background: #333; /* Темный фон */
color: white; /* Светлый текст */ color: white; /* Светлый текст */
} }
@@ -103,7 +114,7 @@ body.dark-theme {
.btn { .btn {
color: #000; color: #000;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #8888c6;
} }
/* Стили для кнопок в тёмной теме */ /* Стили для кнопок в тёмной теме */
@@ -112,6 +123,7 @@ body.dark-theme {
background-color: #333; background-color: #333;
border: 1px solid #555; border: 1px solid #555;
} }
.theme-btn { .theme-btn {
position: absolute; position: absolute;
top: 10px; top: 10px;

2
lzipus/src/browser_action/popup.html
View File

@@ -12,7 +12,7 @@
<body> <body>
<button id="theme-toggle" class="theme-btn"> <button id="theme-toggle" class="theme-btn">
<i id="theme-icon" class="fa-solid fa-sun"></i> <i id="theme-icon" class="fa-moon fa-solid"></i>
</button> </button>
<div class="container"> <div class="container">
<div class="header"> <div class="header">

35
lzipus/src/browser_action/popup.js
View File

@@ -317,18 +317,37 @@ window.onload = function () {
}); });
}; };
// Кнопка и иконка
const themeToggle = document.getElementById('theme-toggle'); const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon'); const themeIcon = document.getElementById('theme-icon');
// Обработчик клика
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme'); // Переключаем класс для темы
// Меняем иконку const applySavedTheme = () => {
if (document.body.classList.contains('dark-theme')) { const savedTheme = localStorage.getItem('theme');
themeIcon.classList.replace('fa-sun', 'fa-moon'); if (savedTheme === 'dark') {
} else { document.body.classList.add('dark-theme');
themeIcon.classList.replace('fa-moon', 'fa-sun'); 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();
}); });