chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

add dark mode

Browse source
This commit is contained in:
Chris Kruining 2024-10-02 23:37:00 +02:00
parent f860ba70f1
commit fb0ef58f9a
2 changed files with 29 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

38
src/app.css
View file

@ -1,3 +1,19 @@
:root {
--surface-1: #eee;
--surface-2: #f8f8f8;
--surface-3: #fff;
--text: #222;
}
@media (prefers-color-scheme: dark) {
:root {
--surface-1: #333;
--surface-2: #383838;
--surface-3: #444;
--text: #eee;
}
}
html { html {
inline-size: 100%; inline-size: 100%;
block-size: 100%; block-size: 100%;
@ -9,6 +25,8 @@ body {
block-size: 100%; block-size: 100%;
overflow: clip; overflow: clip;
background-color: var(--surface-3);
margin: 0; margin: 0;
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@ -27,7 +45,8 @@ body {
padding-inline-start: 1em; padding-inline-start: 1em;
block-size: 2em; block-size: 2em;
background-color: #eee; background-color: var(--surface-1);
color: var(--text);
& > .logo { & > .logo {
inline-size: 3em; inline-size: 3em;
@ -45,14 +64,15 @@ body {
.menu-item { .menu-item {
padding: .5em 1em; padding: .5em 1em;
background-color: var(--surface-1);
color: var(--text);
border: none; border: none;
background-color: #eee;
cursor: pointer; cursor: pointer;
text-align: start; text-align: start;
&:hover { &:hover {
background-color: #fff; background-color: var(--surface-2);
} }
} }
@ -68,8 +88,8 @@ body {
padding: .5em 0; padding: .5em 0;
inline-size: max-content; inline-size: max-content;
background-color: #fff; background-color: var(--surface-2);
border: 1px solid #eee; border: 1px solid var(--surface-3);
border-block-start-width: 0; border-block-start-width: 0;
margin: unset; margin: unset;
@ -78,16 +98,16 @@ body {
} }
& > .menu-item { & > .menu-item {
background-color: #fff; background-color: var(--surface-2);
&:hover { &:hover {
background-color: #f8f8f8; background-color: var(--surface-3);
} }
} }
} }
:popover-open + .menu-item { :popover-open + .menu-item {
background-color: #fff; background-color: var(--surface-2);
} }
} }