From: Frédéric Péters <fpeters@0d.be>
Date: Sat, 10 Dec 2022 20:49:24 +0000 (+0100)
Subject: add dark mode style for 0d
X-Git-Tag: v2023~3
X-Git-Url: https://git.0d.be/?p=chloro.git;a=commitdiff_plain;h=cadda71004a6b5773efb6329febf0d48e5efbd22

add dark mode style for 0d
---

diff --git a/chloro/phyll/static/css/style.scss b/chloro/phyll/static/css/style.scss
index 6bb4e87..b592acf 100644
--- 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;
 }