adding dark mode

shprink · Jan 9, 2020 · 14b3385 · 14b3385
1 parent dee3010
commit 14b3385
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 9 deletions.
diff --git a/src/components/app-footer/app-footer.tsx b/src/components/app-footer/app-footer.tsx
@@ -6,6 +6,30 @@ import { Component, h } from "@stencil/core";
     :host {
       font-size: 1rem;
     }
+
+    a {
+      color: var(--light-link-color);
+    }
+    a:hover {
+      color: var(--light-link-hover-color);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      a {
+        color: var(--dark-link-color);
+      }
+      a:hover {
+        color: var(--dark-link-hover-color);
+      }
+    }
+    @media (prefers-color-scheme: light) {
+      a {
+        color: var(--light-link-color);
+      }
+      a:hover {
+        color: var(--light-link-hover-color);
+      }
+    }
   `,
   shadow: true
 })

diff --git a/src/components/app-jumbo/app-jumbo.tsx b/src/components/app-jumbo/app-jumbo.tsx
@@ -10,12 +10,29 @@ import { getBlackFridayDate, isItBlackFriday, isItSoon } from "./dates.utils";
     }
     .title {
       font-size: 9rem;
-      color: var(--title-color, black);
+      color: var(--light-color);
     }
     .title small {
       display: block;
       font-size: 20%;
-      color: var(--subtitle-color, grey);
+      color: var(--light-subtitle-color);
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .title {
+        color: var(--dark-color);
+      }
+      .title small {
+        color: var(--dark-subtitle-color);
+      }
+    }
+    @media (prefers-color-scheme: light) {
+      .title {
+        color: var(--light-color);
+      }
+      .title small {
+        color: var(--light-subtitle-color);
+      }
     }
   `,
   shadow: true

diff --git a/src/components/app-root/app-root.css b/src/components/app-root/app-root.css
@@ -6,6 +6,45 @@
   box-sizing: border-box;
 }
 
+:host {
+  background: var(--light-bg-color);
+  color: var(--light-color);
+}
+
+header > a {
+  color: var(--light-link-color);
+}
+
+header > a:hover {
+  color: var(--light-link-hover-color);
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    background: var(--dark-bg-color);
+    color: var(--dark-color);
+  }
+  header > a {
+    color: var(--dark-link-color);
+  }
+  header > a:hover {
+    color: var(--dark-link-hover-color);
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :host {
+    background: var(--light-bg-color);
+    color: var(--light-color);
+  }
+  header > a {
+    color: var(--light-link-color);
+  }
+  header > a:hover {
+    color: var(--light-link-hover-color);
+  }
+}
+
 footer {
   position: fixed;
   bottom: 0;
@@ -31,13 +70,11 @@ header {
 
 header > a {
   font-size: 1.2rem;
-  color: black;
   text-decoration: none;
   transition: color 0.5s ease;
 }
 
 header > a:hover {
   font-size: 1.2rem;
-  color: blue;
   text-decoration: none;
 }
diff --git a/src/index.html b/src/index.html
@@ -85,10 +85,24 @@
       function gtag() {
         dataLayer.push(arguments);
       }
-      gtag('js', new Date());
+      gtag("js", new Date());
 
-      gtag('config', 'UA-7727182-9');
+      gtag("config", "UA-7727182-9");
     </script>
+    <style>
+      :root {
+        --light-bg-color: white;
+        --light-color: black;
+        --light-subtitle-color: grey;
+        --light-link-color: var(--light-color);
+        --light-link-hover-color: blue;
+        --dark-bg-color: black;
+        --dark-color: white;
+        --dark-subtitle-color: grey;
+        --dark-link-color: var(--dark-color);
+        --dark-link-hover-color: #a7a7ff;
+      }
+    </style>
   </head>
   <body>
     <noscript>
@@ -100,10 +114,10 @@
     </script>
     <script>
       // Check that service workers are supported
-      if ('serviceWorker' in navigator) {
+      if ("serviceWorker" in navigator) {
         // Use the window load event to keep the page load performant
-        window.addEventListener('load', () => {
-          navigator.serviceWorker.register('/sw.js');
+        window.addEventListener("load", () => {
+          navigator.serviceWorker.register("/service-worker.js");
         });
       }
     </script>