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

[Anonymous]

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




tree test



body{
background-color: white;
color: SlateGray; /* text */
}

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

/* Tree container style */
.tree {
max-width: 100%;
/* margin: 20px auto;*/
padding: 0;
list-style: none;
background: white;
font-family: 'consolas'; /*, tahoma, arial, helvetica, sans-serif*/
font-size: 1.5vw;
background-color: white; /* background: white; */
color: SlateGray;
margin: 0;
}

.tree ul {
list-style: none;
/* margin-left: 1em; /* Indentation for nested lists */
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;
}




Toggle Dark/Light Mode

• 
  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

[*]

Bravo

• RTU
  
  RS-232
• TCP/IP

• Some river

• All register types

[*]

Charlie

• Some devices
• All register types

// 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');
});






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