Add a light mode to the site.
format Build format has succeeded Details
build-natter Build build-natter has succeeded Details
rust-clippy Build rust-clippy has succeeded Details
rust-test Build rust-test has succeeded Details

This commit is contained in:
Tom Alexander 2023-12-23 21:54:16 -05:00
parent fdff5a667b
commit d2ea6b6a0f
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
1 changed files with 24 additions and 1 deletions

View File

@ -5,6 +5,7 @@
--header-divider-color: #6a687a;
--stream-divider-color: #6ccff6;
--stream-post-background-color: #1f1f1f;
--src-font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
Consolas, "DejaVu Sans Mono", monospace;
@ -21,6 +22,28 @@
--table-even-background-color: #141414;
}
@media (prefers-color-scheme: light) {
:root {
--site-background-color: #f5f5f5;
--site-text-color: #000003;
--header-divider-color: #959785;
--stream-divider-color: #933009;
--stream-post-background-color: #e0e0e0;
--src-block-background-color: #ebebeb;
--src-block-border-color: #7b7d70;
--src-block-language-color: #f5f5f5;
--src-block-language-background: #7b7d70;
--quote-block-border-color: #7b7d70;
--table-border-color: #959785;
--table-odd-background-color: #f5f5f5;
--table-even-background-color: #ebebeb;
}
}
body {
color: var(--site-text-color);
background-color: var(--site-background-color);
@ -76,7 +99,7 @@ body {
/* A blog post in a blog stream (for example, the homepage). */
.blog_stream_post {
background: #1f1f1f;
background: var(--stream-post-background-color);
padding: 1rem 0.2rem;
}