Как сделать элементы поддержки режима темной/легкой темы? ⇐ Html

[Anonymous]

На большинстве страниц я смог добавить поддержку режима Dark /Light.

Одна страница имеет расширяемый компонент дерева, и все, что я попробовал, не удалось, и большинство изменений сделали форматирование (текст, выравнивание и т. Д.) Изменения в худшем. Я попытался изменить код, используя ID, класс, добавить «темный режим» в листья и т. Д. />

Код: Выделить всё

// Toggle dark/light mode
const toggleModeButton = document.querySelector('.toggle-mode');
toggleModeButton.addEventListener('click', () => {
document.body.classList.toggle('dark-mode');
document.body.classList.toggle('light-mode');
});< /code>
body {
background-color: white;
color: SlateGray;
}

.dark-mode {
background-color: black;
color: SlateGray;
}

/* Tree container style */
.tree {
max-width: 100%;
padding: 0;
list-style: none;
background: white;
font-family: 'consolas', monospace;
font-size: 1.5vw;
background-color: white;
color: SlateGray;
margin: 0;
}

.tree ul {
list-style: none;
padding-left: 1em;
}

.tree li {
padding-left: 0.25em;
margin: 0.3em 0;
position: relative;
cursor: pointer;
}

/* Remove emphasis on text selection */
.tree label {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
}

/* Hide native checkboxes */
.tree input[type="checkbox"] {
position: absolute;
opacity: 0;
left: 0;
top: 0.2em;
width: 1em;
height: 1em;
cursor: pointer;
}

/* Custom triangle toggle icon before label */
.tree input[type="checkbox"]+label::before {
content: '▶';
/* Closed node arrow */
display: inline-block;
width: 1em;
margin-right: 6px;
color: #888;
transition: transform 0.2s ease;
}

/* Rotate the arrow when checkbox checked (expanded) */
.tree input[type="checkbox"]:checked+label::before {
transform: rotate(90deg);
color: #4a90e2;
}

/* Style for leaf nodes (no children) - no arrow */
.tree li.leaf>label::before {
content: '';
margin-right: 1.5em; /*align label text with toggles */
}

/* Hide nested UL by default */
.tree input[type="checkbox"]~ul {
display: none;
}

/* Show nested UL when checkbox checked */
.tree input[type="checkbox"]:checked~ul {
display: block;
}

/* Accessibility: focus highlight */
.tree input[type="checkbox"]:focus+label {
outline: 1px solid #4a90e2;
outline-offset: 2px;
}< /code>
Toggle Dark/Light Mode

[list]

[*]

Alpha

Analog input, output, value
[*]Binary input, output, value
[*]Loop
[*]Multi state input, Multi state output, Multi state value
[*]Averaging
[*]Life safety point, Life safety zone
[*]Read property
[*]Write property
[/list]

[*]

Bravo
[list]

RTU

RS-232
[*]TCP/IP
[/list]

[list]

Some river
[/list]
[list]

All register types
[/list]


[*]

Charlie
[list]
Some devices
[*]All register types
[/list]

Подробнее здесь: https://stackoverflow.com/questions/796 ... theme-mode