Added darkmode theme for website!

1 files changed, 51 insertions, 14 deletions

diff --git a/templates/index.css b/templates/index.css
index 911fe58..25f0ddb 100644
--- a/templates/index.css
+++ b/templates/index.css
@@ -1,20 +1,50 @@
 :root {
-    --blue: #7BD3EA;
-    --green: #A1EEBD;
-    --pink:  #F6D6D6;
+    --accent-color: #7BD3EA;
+    --primary-color: #A1EEBD;
+    --secondary-color:  #F6D6D6;
     --bg-color: #ffffeb;
     --color: black;
     --code-color: white;
     --quote-color: #aaa;
     --quote-text: black;
     --footer-text: black;
-    --border-color: var(--pink);
-    --article-border-color: var(--green);
-    --article-border-outset-color: var(--blue);
+    --border-color: var(--secondary-color);
+    --article-border-color: var(--primary-color);
+    --article-border-outset-color: var(--accent-color);
     --main-width: 800px;
 
 }
 
+@media (prefers-color-scheme: dark) {
+    :root {
+	--accent-color: #7BD3EA;
+	--primary-color: #A1EEBD;
+	--secondary-color:  #BE90FF;
+	--bg-color: #2d2d2d;
+	--color: #fff;
+	--code-color: #1b1b4f;
+	--code-color: #3e3e53;
+	--quote-color: #999;
+	--quote-text: #fff;
+	--footer-text: black;
+	--border-color: var(--secondary-color);
+	--article-border-color: var(--primary-color);
+	--article-border-outset-color: var(--accent-color);
+    }
+
+    a {
+	color: var(--accent-color);
+    }
+
+    a:focus {
+	color: var(--secondary-color);
+    }
+
+    a:visited {
+	color: var(--accent-color);
+    }
+}
+
 /* #261c35 # darkmode bg-color */
 /* #ffa # links */
 /* #3E7 or this? */
@@ -36,8 +66,8 @@ html, body {
     font-size: 3em;
     text-decoration: underline;
     text-decoration-style: wavy;
-    text-decoration-color: var(--pink);
-    color: #000;
+    text-decoration-color: var(--secondary-color);
+    color: var(--color);
     font-family: monospace;
 }
 
@@ -69,7 +99,7 @@ main article h1 {
 }
 
 main footer {
-    background-color: var(--pink);
+    background-color: var(--secondary-color);
     margin: 16px 0;
     padding: 2px 16px;
     color: var(--footer-text);
@@ -104,11 +134,18 @@ pre, code {
 
 main article figure blockquote {
     padding: 8px;
-    background-color: var(--pink);
-    box-shadow: 8px 8px var(--blue);
+    background-color: var(--secondary-color);
+    box-shadow: 8px 8px var(--accent-color);
     color: var(--quote-text);
 }
 
+@media (prefers-color-scheme: dark) {
+    main article figure blockquote {
+	background-color: var(--bg-color);
+	border: 4px solid var(--secondary-color);
+    }
+}
+
 main article figure blockquote p:before {
     content: '“';
     font-size: 2em;
@@ -135,7 +172,7 @@ main article figure blockquote cite {
 }
 
 hr {
-    border-color: var(--pink);
+    border-color: var(--secondary-color);
     border-style: solid;
 }
 
@@ -143,11 +180,11 @@ main article table {
     border-collapse: collapse;
 }
 main article table thead {
-    background-color: var(--green);
+    background-color: var(--primary-color);
 }
 main article table tr td,
 main article table tr th {
-    border: 1px solid var(--blue);
+    border: 1px solid var(--accent-color);
     padding: 2px 8px;
 }