Responsive dark/light + variables

src/assets/css/minimalist.css

@@ -15,10 +15,10 @@ body {
     -ms-hyphens:auto;
 }
 #preamble {
-    border-bottom: solid 1px rgba(255,255,255,0);
+    border-bottom: solid 1px;
 }
 #postamble {
-    border-top: solid 1px rgba(255,255,255,0);
+    border-top: solid 1px;
 }
 #preamble,#postamble {
     padding: 10px 0;
@@ -185,48 +185,68 @@ navigation > a {
 }
 /* colors
 
-$base03:    #002b36;
-$base02:    #073642;
-$base01:    #586e75;
-$base00:    #657b83;
-
-$base0:     #839496;
-$base1:     #93a1a1;
-$base2:     #eee8d5;
-$base3:     #fdf6e3;
-
-$yellow:    #b58900;
-$orange:    #cb4b16;
-$red:       #dc322f;
-$magenta:   #d33682;
-$violet:    #6c71c4;
-$blue:      #268bd2;
-$cyan:      #2aa198;
-$green:     #859900;
 
 */
 
+:root {
+    color-scheme: light dark;
+    --base03:    #002b36;
+    --base02:    #073642;
+    --base01:    #586e75;
+    --base00:    #657b83;
+    --base0:     #839496;
+    --base1:     #93a1a1;
+    --base2:     #eee8d5;
+    --base3:     #fdf6e3;
+    --yellow:    #b58900;
+    --orange:    #cb4b16;
+    --red:       #dc322f;
+    --magenta:   #d33682;
+    --violet:    #6c71c4;
+    --blue:      #268bd2;
+    --cyan:      #2aa198;
+    --green:     #859900;
+    --transparent: rgba(255,255,255,0);
+    --main-background: #00151b; /* 0.5 darker than #002b36; */
+    --main-foreground: var(--base0);
+    --todo-txt: #000;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --main-background: #fafafa;
+        --main-foreground: var(--base01);
+        --second-foreground: var(--base00);
+        --reveal-background: var(--base3);
+        --border-color: var(--base2);
+        --todo-txt: #FFF;
+    }
+}
+
 body {
-    background: #00151b; /* 0.5 darker than #002b36; */
-    color: #839496;
+    background: var(--main-background);
+    color: var(--main-foreground);
 }
-a, a:visited { color: #93a1a1; }
-a:hover, a:active, a:focus { color: #b58900; }
-thead { background-color: #073642;
-        color: #93a1a1; }
-tr:hover { background-color: #073642; }
+a, a:visited { color: var(--base1); }
+a:hover, a:active, a:focus { color: var(--yellow); }
+thead { background-color: var(--reveal-background);
+        color: var(--second-fg); }
+tr:hover { background-color: var(--reveal-background); }
 #postamble:hover, #preamble:hover {
-    background-color: #002b36;
-    border-color:  #073642;
+    background-color: var(--reveal-background);
+    border-color:  var(--border-color);
+}
+h1 { color: var(--violet);}
+h2 { color: var(--magenta);}
+h3 { color: var(--red);}
+h4 { color: var(--orange);}
+h5 { color: var(--yellow);}
+h6 { color: var(--green);}
+table, td, th { border-color: var(--border-color); }
+code { background: var(--reveal-background); }
+#preamble,#postamble {
+    border-color: var(--transparent);
 }
-h1 { color: #6c71c4;}
-h2 { color: #d33682;}
-h3 { color: #dc322f;}
-h4 { color: #cb4b16;}
-h5 { color: #b58900;}
-h6 { color: #859900;}
-table, td, th { border-color: #073642; }
-code { background: #002b36; }
 /* -------- */
 /* org mode statuses */
 .timestamp-wrapper { font-family: menlo, monospace; font-size: 12px; }
@@ -237,7 +257,7 @@ code { background: #002b36; }
                padding: 1px 1ex;
              }
 /* org colors */
-.todo, .done { color: #000; }
+.todo, .done { color: var(--todo-txt); }
 .TODO { background-color: #dc322f; }
 .IN_PROGRESS { background-color: #b58900; }
 .IN_REVIEW { background-color: #2aa198; }