Dgors03/Answer_Templates
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki 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-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;

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

@@ -12,7 +12,7 @@
<body>
<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>
<div class="container">
<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 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();
});