use css variables to aplly colors

1 files changed, 33 insertions, 11 deletions

diff --git a/html/template.html b/html/template.html
index f79e1711..d674445c 100644
--- a/html/template.html
+++ b/html/template.html
@@ -17,12 +17,32 @@ $endif$
   <style>
     
 $if(document-css)$
+:root {
+  /* define applied colors */
+  --bg: #fdfdfd;
+  --fg: #1a1a1a;
+  --link-color: #1a1a1a;
+  --pre-bg: #fdfdfd;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* change apllied colors to the dark gruvbox pallet
+   * https://github.com/morhetz/gruvbox
+   */
+  :root {
+    --bg: #282828; /* dark bg */
+    --fg: #ebdbb2; /* dark fg */
+    --link-color: #d79921; /* yellow */
+    --pre-bg: #1d2021; /* dark bg0_h */
+  }
+}
+
 html {
   line-height: $if(linestretch)$$linestretch$$else$1.5$endif$;
   font-family: $if(mainfont)$$mainfont$$else$Georgia, serif$endif$;
   font-size: $if(fontsize)$$fontsize$$else$20px$endif$;
-  color: $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
-  background-color: $if(backgroundcolor)$$backgroundcolor$$else$#fdfdfd$endif$;
+  color: $if(fontcolor)$$fontcolor$$else$var(--fg)$endif$;
+  background-color: $if(backgroundcolor)$$backgroundcolor$$else$var(--bg)$endif$;
 }
 body {
   margin: 0 auto;
@@ -60,10 +80,10 @@ p {
   margin: 1em 0;
 }
 a {
-  color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
+  color: $if(linkcolor)$$linkcolor$$else$var(--link-color)$endif$;
 }
 a:visited {
-  color: $if(linkcolor)$$linkcolor$$else$#1a1a1a$endif$;
+  color: $if(linkcolor)$$linkcolor$$else$(--link-color)$endif$;
 }
 img {
   max-width: 100%;
@@ -95,8 +115,8 @@ code {
   font-family: $if(monofont)$$monofont$$else$Menlo, Monaco, 'Lucida Console', Consolas, monospace$endif$;
 $if(monobackgroundcolor)$
   background-color: $monobackgroundcolor$;
-  padding: .2em .4em;
 $endif$
+  padding: .2em .4em;
   font-size: 85%;
   margin: 0;
 }
@@ -104,12 +124,14 @@ pre {
   margin: 1em 0;
 $if(monobackgroundcolor)$
   background-color: $monobackgroundcolor$;
-  padding: 1em;
+$else$
+  background-color: var(--pre-bg);
 $endif$
+  padding: 1em;
   overflow: auto;
 }
 hr {
-  background-color: #1a1a1a;
+  background-color: var(--fg);
   border: none;
   height: 1px;
   margin: 1em 0;
@@ -127,11 +149,11 @@ table caption {
 }
 tbody {
   margin-top: 0.5em;
-  border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
-  border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+  border-top: 1px solid $if(fontcolor)$$fontcolor$$else$var(--fg)$endif$;
+  border-bottom: 1px solid $if(fontcolor)$$fontcolor$$else$var(--fg)$endif$;
 }
 th {
-  border-top: 1px solid $if(fontcolor)$$fontcolor$$else$#1a1a1a$endif$;
+  border-top: 1px solid $if(fontcolor)$$fontcolor$$else$var(--fg)$endif$;
   padding: 0.25em 0.5em 0.25em 0.5em;
 }
 td {
@@ -209,7 +231,7 @@ $if(toc)$
     padding: 20px;
     overflow-x: hidden;
     overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-    background-color: #f5f5f5;
+    background-color: var(--bg);
     border-right: 1px solid #eee;
     max-width: 200px;
   }