From 21843b6456f8476be6cb4873a81ef2f56419e1ca Mon Sep 17 00:00:00 2001
From: Rafael Bardini <rafael@rbardini.com>
Date: Sun, 7 Mar 2021 14:50:42 +0100
Subject: [PATCH] feat(dark): add dark mode support

---
 README.md                                |  1 +
 package.json                             |  2 +-
 style.css                                | 11 +++++++++++
 tap-snapshots/test-render.js-TAP.test.js | 11 +++++++++++
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a02cad3..babe937 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,7 @@ Inspired by [jsonresume-theme-flat](https://github.com/erming/jsonresume-theme-f
 
 - 💄 Markdown support
 - 📐 CSS grid layout
+- 🌗 Light and dark modes
 - 🧩 Standalone CLI
 
 [View demo →](https://jsonresume-theme-even.netlify.app)
diff --git a/package.json b/package.json
index ed9bd2a..89af405 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "style.css"
   ],
   "scripts": {
-    "build:demo": "mkdir public && cat node_modules/resume-schema/sample.resume.json | ./bin/cli.js > public/index.html",
+    "build:demo": "mkdir -p public && cat node_modules/resume-schema/sample.resume.json | ./bin/cli.js > public/index.html",
     "format": "prettier --write .",
     "lint": "eslint .",
     "postinstall": "husky install",
diff --git a/style.css b/style.css
index 96498c9..636fe1b 100644
--- a/style.css
+++ b/style.css
@@ -1,5 +1,6 @@
 :root {
   /* Colors */
+  --backgroundColor: #ffffff;
   --primaryColor: #212529;
   --secondaryColor: #95a5a6;
   --accentColor: #f1c40f;
@@ -16,6 +17,15 @@
   --scale5: calc(var(--scale4) * var(--ratio));
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --backgroundColor: #181a1b;
+    --primaryColor: #d1cdc7;
+    --secondaryColor: #aaa398;
+    --mutedColor: #1e2021;
+  }
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -27,6 +37,7 @@ html {
 }
 
 body {
+  background: var(--backgroundColor);
   color: var(--primaryColor);
   display: grid;
   font: 1em/1.5 Lato, sans-serif;
diff --git a/tap-snapshots/test-render.js-TAP.test.js b/tap-snapshots/test-render.js-TAP.test.js
index dd1ffca..ab95a33 100644
--- a/tap-snapshots/test-render.js-TAP.test.js
+++ b/tap-snapshots/test-render.js-TAP.test.js
@@ -16,6 +16,7 @@ exports[`test/render.js TAP renders a resume > must match snapshot 1`] = `
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap">
     <style>:root {
   /* Colors */
+  --backgroundColor: #ffffff;
   --primaryColor: #212529;
   --secondaryColor: #95a5a6;
   --accentColor: #f1c40f;
@@ -32,6 +33,15 @@ exports[`test/render.js TAP renders a resume > must match snapshot 1`] = `
   --scale5: calc(var(--scale4) * var(--ratio));
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --backgroundColor: #181a1b;
+    --primaryColor: #d1cdc7;
+    --secondaryColor: #aaa398;
+    --mutedColor: #1e2021;
+  }
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -43,6 +53,7 @@ html {
 }
 
 body {
+  background: var(--backgroundColor);
   color: var(--primaryColor);
   display: grid;
   font: 1em/1.5 Lato, sans-serif;