Dgors03/Answer_Templates
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

add night theme

Browse Source
This commit is contained in:
Dmitriy Gorshenin
2024-12-04 20:14:02 +03:00
parent 67459900f0
commit 5895c700db
3 changed files with 40 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -99,28 +99,32 @@ body.dark-theme {
color: white; /* Светлый текст */
}
body.dark-theme button.template-add,
body.dark-theme button.template-edit,
body.dark-theme button.template-delete {
background-color: #333; /* Темные кнопки */
border-color: #333; /* Темные рамки */
color: white; /* Светлый текст на кнопках */
/* Базовый стиль кнопок */
.btn {
color: #000;
background-color: #fff;
border: 1px solid #ccc;
}
body.dark-theme span.template {
border-color: #666; /* Темные рамки для шаблонов */
/* Стили для кнопок в тёмной теме */
.dark-theme .btn {
color: #fff;
background-color: #333;
border: 1px solid #555;
}
.theme-btn {
position: absolute;
top: 10px;
left: 10px;
background: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
color: #333;
z-index: 1000;
transition: color 0.3s ease;
}
body.dark-theme span.template:hover {
background: #444; /* Подсветка при наведении в темной теме */
.dark-theme .theme-btn {
color: #fff;
}
.btn-dark {
background-color: #444;
color: white;
border: none;
}
btn-dark:hover {
background-color: #555;
}

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

@@ -11,6 +11,9 @@
</head>
<body>
<button id="theme-toggle" class="theme-btn">
<i id="theme-icon" class="fa-solid fa-sun"></i>
</button>
<div class="container">
<div class="header">
<h1 class="name fs-4 fw-lighter font-monospace">Твои шаблоны</h1>
@@ -254,7 +257,6 @@
</div>
</div>
</1--div>
<button id="theme-toggle">Сменить тему</button>
<script src="popup.js"></script>
</body>

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

@@ -317,12 +317,18 @@ window.onload = function () {
});
};
// Кнопка и иконка
const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme');
});
const buttons = document.querySelectorAll('.btn');
// editExisted.addEventListener('click', (e) => {
// textRUEl.innerHTML = `<span onClick="copyToClipboard('${e.target.value}')" class="btn btn-light" id="template-ru-text">RU</span>`
// })
// Обработчик клика
themeToggle.addEventListener('click', () => {
document.body.classList.toggle('dark-theme'); // Переключаем класс для темы
// Меняем иконку
if (document.body.classList.contains('dark-theme')) {
themeIcon.classList.replace('fa-sun', 'fa-moon');
} else {
themeIcon.classList.replace('fa-moon', 'fa-sun');
}
});