Julfy/Answer_Templates
1
0
Fork 0
forked from Dgors03/Answer_Templates
Code Pull Requests 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; /* Светлый текст */ color: white; /* Светлый текст */
} }
body.dark-theme button.template-add, /* Базовый стиль кнопок */
body.dark-theme button.template-edit, .btn {
body.dark-theme button.template-delete { color: #000;
background-color: #333; /* Темные кнопки */ background-color: #fff;
border-color: #333; /* Темные рамки */ border: 1px solid #ccc;
color: white; /* Светлый текст на кнопках */
} }
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 { .dark-theme .theme-btn {
background: #444; /* Подсветка при наведении в темной теме */ 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> </head>
<body> <body>
<button id="theme-toggle" class="theme-btn">
<i id="theme-icon" class="fa-solid fa-sun"></i>
</button>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<h1 class="name fs-4 fw-lighter font-monospace">Твои шаблоны</h1> <h1 class="name fs-4 fw-lighter font-monospace">Твои шаблоны</h1>
@@ -254,7 +257,6 @@
</div> </div>
</div> </div>
</1--div> </1--div>
<button id="theme-toggle">Сменить тему</button>
<script src="popup.js"></script> <script src="popup.js"></script>
</body> </body>

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

@@ -317,12 +317,18 @@ window.onload = function () {
}); });
}; };
// Кнопка и иконка
const themeToggle = document.getElementById('theme-toggle'); const themeToggle = document.getElementById('theme-toggle');
const themeIcon = document.getElementById('theme-icon');
themeToggle.addEventListener('click', () => { // Обработчик клика
document.body.classList.toggle('dark-theme'); 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>` if (document.body.classList.contains('dark-theme')) {
// }) themeIcon.classList.replace('fa-sun', 'fa-moon');
} else {
themeIcon.classList.replace('fa-moon', 'fa-sun');
}
});