add dark mode style for 0d

[chloro.git] / chloro / phyll / static / css / style.scss

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index 6bb4e87d3cec3d737a0bf086648c70153bafe894..b592acffa5e1ff7c693fb4160b5ef442b62cbdd2 100644 (file)
--- a/chloro/phyll/static/css/style.scss
+++ b/chloro/phyll/static/css/style.scss
@@ -1,25 +1,49 @@
 @charset "UTF-8";
 
-$text-color: #222;
-$link-color: #0000ee;
-$visited-link-color: #551a8b;
+html {
+       --body-background: white;
+       --text-background: #fafaff;
+       --text-color: #222;
+       --light-text-color: lighten(#222, 20%);
+       --lighter-text-color: lighten(#222, 30%);
+       --link-color: #0000ee;
+       --visited-link-color: #551a8b;
+       --gray: gray;
+       --note-background: #fbf7c1;
+       --blockquote-background: #eeeefd;
+}
+
+@media (prefers-color-scheme: dark) {
+       html {
+               --body-background: black;
+               --text-background: #113;
+               --text-color: #eef;
+               --light-text-color: lighten(#eef, 20%);
+               --lighter-text-color: lighten(#eef2, 30%);
+               --link-color: #aaf;
+               --visited-link-color: #b767ff;
+               --gray: gray;
+               --note-background: #867f11;
+               --blockquote-background: #223;
+       }
+}
 
 @import "opensans";
 
 body {
        font-family: "Open Sans", sans-serif;
-       background: white;
-       color: $text-color;
+       background: var(--body-background);
+       color: var(--text-color);
        font-size: 100%;
 }
 
 a {
-       color: $link-color;
+       color: var(--link-color);
        text-decoration: none;
-       border-bottom: 0.1em dotted $link-color;
+       border-bottom: 0.1em dotted var(--link-color);
        &:visited {
-               color: $visited-link-color;
-               border-color: $visited-link-color;
+               color: var(--visited-link-color);
+               border-color: var(--visited-link-color);
        }
        &:hover {
                border-bottom-style: solid;
@@ -33,8 +57,8 @@ header {
                text-transform: uppercase;
                margin: 1em 0 0 1em;
                padding: 0 0.5em;
-               color: lighten($text-color, 20%);
-               background: #fafaff;
+               color: var(--light-text-color);
+               background: var(--text-background);
                display: inline-block;
                a {
                        border: none;
@@ -66,7 +90,7 @@ main, footer {
 
 main {
        position: relative;
-       background: #fafaff;
+       background: var(--text-background);
        min-height: 70vh;
        clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
 }
@@ -111,7 +135,7 @@ main {
                .meta {
                        padding-top: 0.5rem;
                        padding-left: 0.5rem;
-                       color: lighten($text-color, 30%);
+                       color: var(--lighter-text-color);
                }
        }
 }
@@ -122,7 +146,7 @@ main {
                text-align: center;
                margin: 1em 0;
                img {
-                       border: 1px solid gray;
+                       border: 1px solid var(--gray);
                        padding: 3px;
                        max-width: 90%;
                        max-height: 70vh;
@@ -143,17 +167,17 @@ main {
        }
        div.meta {
                margin-top: 3em;
-               color: lighten($text-color, 30%);
+               color: var(--lighter-text-color);
        }
        div.note {
-               background: #fbf7c1;;
+               background: var(--note-background);
                padding: 0.2em 0.5em 0.2em 2em;
                p {
                        margin: 0.5em 0;
                }
        }
        blockquote {
-               background: #eeeefd;
+               background: var(--blockquote-background);
                padding: 0.1em 1em;
                clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
        }
@@ -186,8 +210,8 @@ main {
 .older.post-list {
        margin: 5em 0 2em 0;
        padding: 1em 0;
-       border-top: 0.1em dotted $link-color;
-       border-bottom: 0.1em dotted $link-color;
+       border-top: 0.1em dotted var(--link-color);
+       border-bottom: 0.1em dotted var(--link-color);
        line-height: 200%;
        li {
                display: inline;
@@ -207,7 +231,7 @@ footer {
 }
 
 div[contenteditable=true]:focus-within {
-       outline: 1px solid gray;
+       outline: 1px solid var(--gray);
        outline-offset: 3px;
 }