fix light/dark theme switch
This commit is contained in:
parent
53e70c33c7
commit
84bdac8e87
1 changed files with 23 additions and 18 deletions
|
@ -462,6 +462,24 @@ pre { line-height: 1em; }
|
|||
--hl: var(--o);
|
||||
}
|
||||
|
||||
/* dark preferred */
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
:root {
|
||||
--bg: black;
|
||||
--rbg: var(--b03);
|
||||
--fg: var(--b1);
|
||||
--fg0: var(--b00);
|
||||
--rfg: var(--b2);
|
||||
--hl: var(--y);
|
||||
}
|
||||
img { filter: brightness(0.7) saturate(0.5); }
|
||||
pre {
|
||||
background: hsl(210,40%,15%);
|
||||
border-color: hsl(210,15%,43%);
|
||||
}
|
||||
}
|
||||
|
||||
/* light checked */
|
||||
input#l:checked ~ div {
|
||||
--bg: var(--b3);
|
||||
|
@ -474,6 +492,10 @@ input#l:checked ~ div {
|
|||
input#l:checked ~ div img {
|
||||
filter: none;
|
||||
}
|
||||
input#l:checked ~ div pre {
|
||||
border: 1px solid hsl(210, 15%, 49%);
|
||||
background: hsl(210, 40%, 96%);
|
||||
}
|
||||
|
||||
/* dark checked */
|
||||
input#d:checked ~ div {
|
||||
|
@ -489,26 +511,9 @@ input#d:checked ~ div img {
|
|||
}
|
||||
input#d:checked ~ div pre {
|
||||
background: hsl(210,40%,15%);
|
||||
border: hsl(210,15%,43%);
|
||||
border-color: hsl(210,15%,43%);
|
||||
}
|
||||
|
||||
/* dark preferred */
|
||||
@media (prefers-color-scheme: dark)
|
||||
{
|
||||
:root {
|
||||
--bg: black;
|
||||
--rbg: var(--b03);
|
||||
--fg: var(--b1);
|
||||
--fg0: var(--b00);
|
||||
--rfg: var(--b2);
|
||||
--hl: var(--y);
|
||||
}
|
||||
img { filter: brightness(0.7) saturate(0.5); }
|
||||
pre {
|
||||
background: hsl(210,40%,15%);
|
||||
border: hsl(210,15%,43%);
|
||||
}
|
||||
}
|
||||
body, body > div {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
|
|
Loading…
Reference in a new issue