feat: add dark mode

This commit is contained in:
ptrcnull 2022-08-27 03:45:23 +02:00
parent 70380e1901
commit 6c2f880cef

View file

@ -1,3 +1,27 @@
:root {
--main-bg-color: #ffffff;
--main-fg-color: #222222;
--code-bg-color: #eeeeee;
--code-fg-color: #272822;
--link-fresh-color: #0072b2;
--link-stale-color: #a84275;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: #222222;
--main-fg-color: #ffffff;
--code-bg-color: #272822;
--code-fg-color: #eeeeee;
--link-fresh-color: #56b4e9;
--link-stale-color: #0072b2;
}
}
html { html {
overflow-y: scroll overflow-y: scroll
} }
@ -7,7 +31,8 @@ body {
margin: 40px auto; margin: 40px auto;
padding: 0 10px; padding: 0 10px;
font: 14px/1.5 monospace; font: 14px/1.5 monospace;
color: #444 background-color: var(--main-bg-color);
color: var(--main-fg-color);
} }
h1, h1,
@ -17,18 +42,26 @@ h3 {
} }
code:not(pre>code) { code:not(pre>code) {
color: #272822; color: var(--code-fg-color);
background: #eeeeee; background: var(--code-bg-color);
padding: 2px; padding: 2px;
} }
pre { pre {
color: #FFFFFF; color: var(--main-bg-color);
background: #272822; background: var(--main-fg-color);
padding: 24px; padding: 24px;
overflow-x: auto overflow-x: auto
} }
a {
color: var(--link-fresh-color);
}
a:visited {
color: var(--link-stale-color);
}
article { article {
padding: 24px 0 padding: 24px 0
} }