Merge pull request #16 from goodroot/adds-darkmode

Adds darkmode

2 files changed, 98 insertions, 2 deletions

diff --git a/README.md b/README.md
index e3ecfbc..40bee80 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # Hugo.io - Classic Theme
 
-Classic is forked from the **XMin** theme, written by [Yihui Xie](https://yihui.name).
+Classic is stylized fork of the **XMin** theme, written by [Yihui Xie](https://yihui.name).
 
-It provides some simplifications, `highlight.js` for syntax highlighting, emoji support, and slick fonts.
+Provides `highlight.js` for syntax highlighting, emoji support, Inter and optional **_darkmode_**.
 
 [**View live demo**](https://goodroot.ca)
 
@@ -66,6 +66,24 @@ header a {
 
 Change `color:` to a nice matching colour.
 
+### Darkmode
+
+1. Open `static/css/style.css`
+
+2. Edit the following attributes to match light/dark
+
+```css
+/* darkmode */
+@media (prefers-color-scheme: dark) {
+    ...
+}
+
+/* lightmode */
+@media (prefers-color-scheme: light) {
+    ...
+}
+```
+
 #### Screenshot
 
 ![Screenshot of Hugo Classic](/images/screenshot.png)
diff --git a/static/css/style.css b/static/css/style.css
index 0612362..df18d69 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,3 +1,81 @@
+/* Toggle darkmode / lightmode */
+
+/* darkmode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #393E41;
+        color: white;
+    }
+
+    blockquote {
+      background: #393E41;
+    }
+
+    a {
+      color: #EBC3DB;
+    }
+
+    header {
+      background: #393E41;
+      border-bottom: 2px dotted #EBC3DB;
+
+    }
+
+    .article-meta, .menu a {
+      background: #393E41;
+      color: white;
+    }
+
+    code { background: #black; }
+
+    table {
+      margin: auto;
+      border-top: 1px solid #666;
+      border-bottom: 1px solid #666;
+    }
+    table thead th { border-bottom: 1px solid #666; }
+    th, td { padding: 5px; }
+    tr:nth-child(even) { background: #666 }
+}
+
+/* lightmode */
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #393E41;
+        color: white;
+    }
+
+    blockquote {
+      background: #393E41;
+    }
+
+    a {
+      color: #EBC3DB;
+    }
+
+    header {
+      background: #393E41;
+      border-bottom: 2px dotted #EBC3DB;
+
+    }
+
+    .article-meta, .menu a {
+      background: #393E41;
+      color: white;
+    }
+
+    code { background: #black; }
+
+    table {
+      margin: auto;
+      border-top: 1px solid #666;
+      border-bottom: 1px solid #666;
+    }
+    table thead th { border-bottom: 1px solid #666; }
+    th, td { padding: 5px; }
+    tr:nth-child(even) { background: #666 }
+}
+
 body {
   max-width: 800px;
   margin: auto;