More actions
Add dark mode support (css vars -light, -dark variants). Temporarily breaks existing notices, WIP |
m so it turns out that :root doesn't work |
||
| Line 11: | Line 11: | ||
@media screen and (prefers-color-scheme: dark) { | @media screen and (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .noticebox { | |||
background-color: var(--background-dark); | background-color: var(--background-dark); | ||
border: 2px solid var(--border-dark); | border: 2px solid var(--border-dark); | ||
| Line 19: | Line 19: | ||
} | } | ||
html.skin-theme-clientpref-dark .noticebox { | |||
background-color: var(--background-dark); | background-color: var(--background-dark); | ||
border: 2px solid var(--border-dark); | border: 2px solid var(--border-dark); | ||
Revision as of 20:07, 24 October 2024
.noticebox {
margin: 4px 0;
border-collapse: collapse;
box-sizing: border-box;
border: 2px solid var(--border-light);
border-left: 10px solid var(--border-light);
background-color: var(--background-light);
color: var(--text-light);
padding: 5px 10px;
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .noticebox {
background-color: var(--background-dark);
border: 2px solid var(--border-dark);
border-left: 10px solid var(--border-dark);
color: var(--text-dark);
}
}
html.skin-theme-clientpref-dark .noticebox {
background-color: var(--background-dark);
border: 2px solid var(--border-dark);
border-left: 10px solid var(--border-dark);
color: var(--text-dark);
}