dark theme fix

main
Satur@it-depot.ru 2025-03-06 13:58:19 +03:00
parent 55bb7c3c4f
commit fffe09c93b
1 changed files with 24 additions and 6 deletions

View File

@ -36,8 +36,12 @@
margin: 2px 0; margin: 2px 0;
background: #fff; background: #fff;
cursor: move; cursor: move;
color: #000; /* Цвет текста в светлой теме */
}
.install-item.dark-theme {
background: #2a2a2a;
color: #e0e0e0; /* Цвет текста в тёмной теме */
} }
.install-item.dark-theme { background: #2a2a2a; }
.install-item.selected { background-color: #e6f7ff; } .install-item.selected { background-color: #e6f7ff; }
.install-item.selected.dark-theme { background-color: #003a6d; } .install-item.selected.dark-theme { background-color: #003a6d; }
.install-item > div { .install-item > div {
@ -98,8 +102,12 @@
border-collapse: collapse; border-collapse: collapse;
background: #f0f0f0; background: #f0f0f0;
cursor: pointer; cursor: pointer;
color: #000; /* Цвет текста в светлой теме */
}
.header.dark-theme {
background: #333;
color: #e0e0e0; /* Цвет текста в тёмной теме */
} }
.header.dark-theme { background: #333; }
.header > div { .header > div {
display: table-cell; display: table-cell;
padding: 5px; padding: 5px;
@ -377,6 +385,9 @@
document.getElementById('import-label').classList.add('dark-theme'); document.getElementById('import-label').classList.add('dark-theme');
document.querySelector('.theme-toggle').classList.add('dark-theme'); document.querySelector('.theme-toggle').classList.add('dark-theme');
document.querySelector('.theme-toggle').textContent = 'Светлая тема'; document.querySelector('.theme-toggle').textContent = 'Светлая тема';
// Применяем темную тему к уже загруженным элементам таблицы
document.querySelectorAll('.install-item').forEach(item => item.classList.add('dark-theme'));
document.querySelector('.header').classList.add('dark-theme');
} }
}); });
@ -389,6 +400,8 @@
const searchContainer = document.getElementById('search-container'); const searchContainer = document.getElementById('search-container');
const importLabel = document.getElementById('import-label'); const importLabel = document.getElementById('import-label');
const themeToggle = document.querySelector('.theme-toggle'); const themeToggle = document.querySelector('.theme-toggle');
const header = document.querySelector('.header');
const installItems = document.querySelectorAll('.install-item');
if (body.classList.contains('dark-theme')) { if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme'); body.classList.remove('dark-theme');
@ -399,6 +412,8 @@
searchContainer.classList.remove('dark-theme'); searchContainer.classList.remove('dark-theme');
importLabel.classList.remove('dark-theme'); importLabel.classList.remove('dark-theme');
themeToggle.classList.remove('dark-theme'); themeToggle.classList.remove('dark-theme');
header.classList.remove('dark-theme');
installItems.forEach(item => item.classList.remove('dark-theme'));
themeToggle.textContent = 'Темная тема'; themeToggle.textContent = 'Темная тема';
localStorage.setItem('theme', 'light'); localStorage.setItem('theme', 'light');
} else { } else {
@ -410,6 +425,8 @@
searchContainer.classList.add('dark-theme'); searchContainer.classList.add('dark-theme');
importLabel.classList.add('dark-theme'); importLabel.classList.add('dark-theme');
themeToggle.classList.add('dark-theme'); themeToggle.classList.add('dark-theme');
header.classList.add('dark-theme');
installItems.forEach(item => item.classList.add('dark-theme'));
themeToggle.textContent = 'Светлая тема'; themeToggle.textContent = 'Светлая тема';
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
} }
@ -547,14 +564,15 @@
function displayInstalls(installs) { function displayInstalls(installs) {
console.log("Displaying installs:", installs); console.log("Displaying installs:", installs);
const isDarkTheme = document.body.classList.contains('dark-theme');
if (installs.length === 0) { if (installs.length === 0) {
$('#installs-list').html('<p>Нет результатов</p>'); $('#installs-list').html('<p>Нет результатов</p>');
} else { } else {
$('#installs-list').html(installs.map(item => ` $('#installs-list').html(installs.map(item => `
<div class="install-item" data-id="${item.id}" draggable="true"> <div class="install-item ${isDarkTheme ? 'dark-theme' : ''}" data-id="${item.id}" draggable="true">
<div class="computer-name">${item.computer_name} <button class="edit-button" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button></div> <div class="computer-name">${item.computer_name} <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'computer_name', '${item.computer_name}')">✏️</button></div>
<div class="connection-id"><span class="protocol-icon">${protocolIcons[item.protocol]}</span><a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link" target="_blank">${item.rust_id}</a> <button class="copy-button" onclick="copyToClipboard('${item.rust_id}')">📋</button> <button class="edit-button" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button></div> <div class="connection-id"><span class="protocol-icon">${protocolIcons[item.protocol]}</span><a href="${protocolLinks[item.protocol]}${item.rust_id}" class="connection-link ${isDarkTheme ? 'dark-theme' : ''}" target="_blank">${item.rust_id}</a> <button class="copy-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="copyToClipboard('${item.rust_id}')">📋</button> <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'rust_id', '${item.rust_id}')">✏️</button></div>
<div class="install-time">${item.install_time} <button class="edit-button" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button></div> <div class="install-time">${item.install_time} <button class="edit-button ${isDarkTheme ? 'dark-theme' : ''}" onclick="editField(${item.id}, 'install_time', '${item.install_time}')">✏️</button></div>
<div class="actions"><span class="action-buttons"><button onclick="deleteInstall(${item.id})">Удалить</button> <button onclick="openNoteModal(${item.id}, '${item.note}')">Заметка</button></span></div> <div class="actions"><span class="action-buttons"><button onclick="deleteInstall(${item.id})">Удалить</button> <button onclick="openNoteModal(${item.id}, '${item.note}')">Заметка</button></span></div>
</div> </div>
`).join('')); `).join(''));