Add automatic dark/light theme switching based on os

9 files changed, 23 insertions, 51 deletions

diff --git a/assets/js/theme.js b/assets/js/theme.js
deleted file mode 100644
index 699baf6..0000000
--- a/assets/js/theme.js
+++ /dev/null
@@ -1,27 +0,0 @@
-// Toggle theme
-
-const theme = window.localStorage && window.localStorage.getItem("theme");
-const themeToggle = document.querySelector(".theme-toggle");
-const isDark = theme === "dark";
-var metaThemeColor = document.querySelector("meta[name=theme-color]");
-
-if (theme !== null) {
-  document.body.classList.toggle("dark-theme", isDark);
-  isDark
-    ? metaThemeColor.setAttribute("content", "#1b1c1d")
-    : metaThemeColor.setAttribute("content", "#fafafa");
-}
-
-themeToggle.addEventListener("click", () => {
-  document.body.classList.toggle("dark-theme");
-
-  window.localStorage &&
-    window.localStorage.setItem(
-      "theme",
-      document.body.classList.contains("dark-theme") ? "dark" : "light"
-    );
-
-  document.body.classList.contains("dark-theme")
-    ? metaThemeColor.setAttribute("content", "#1b1c1d")
-    : metaThemeColor.setAttribute("content", "#fafafa");
-});
diff --git a/assets/scss/_buttons.scss b/assets/scss/_buttons.scss
index 32a086f..73e72a4 100644
--- a/assets/scss/_buttons.scss
+++ b/assets/scss/_buttons.scss
@@ -23,20 +23,18 @@ a.button {
   cursor: pointer;
   outline: none;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
     color: inherit;
   }
 
-  /* variants */
-
   &.outline {
     background: transparent;
     border-color: $light-background-secondary;
     box-shadow: none;
     padding: 8px 18px;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-background-secondary;
       color: inherit;
     }
@@ -91,7 +89,7 @@ a.button {
     cursor: pointer;
     outline: none;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       background: $dark-background-secondary;
       color: inherit;
     }
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index 358db39..fe0af42 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -1,13 +1,13 @@
 .header {
-  background: #fafafa;
+  background: $light-background-header;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   padding: 20px;
 
-  .dark-theme & {
-    background: #1b1c1d;
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
   }
 
   &__right {
diff --git a/assets/scss/_list.scss b/assets/scss/_list.scss
index 2be9738..c77b0f9 100644
--- a/assets/scss/_list.scss
+++ b/assets/scss/_list.scss
@@ -12,7 +12,7 @@
   &:not(:last-of-type) {
     border-bottom: 1px solid $light-border-color;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       border-color: $dark-border-color;
     }
   }
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index e1c51a3..e59a4d5 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -35,7 +35,7 @@ body {
     font-size: 1rem;
   }
 
-  &.dark-theme {
+  @media (prefers-color-scheme: dark) {
     background-color: $dark-background;
     color: $dark-color;
   }
@@ -175,7 +175,7 @@ figure {
 em, i, strong {
   color: black;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     color: white;
   }
 }
@@ -190,7 +190,7 @@ code {
   border-radius: 5px;
   font-size: 0.95rem;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 }
@@ -214,7 +214,7 @@ pre {
     padding: 0;
     font-size: inherit;
 
-    .dark-theme & {
+    @media (prefers-color-scheme: dark) {
       color: inherit;
     }
   }
@@ -290,7 +290,7 @@ hr {
   background: $light-border-color;
   height: 1px;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-border-color;
   }
 }
diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss
index 17ba5ae..5fc75fb 100644
--- a/assets/scss/_menu.scss
+++ b/assets/scss/_menu.scss
@@ -1,11 +1,9 @@
 .menu {
-  background: #fafafa;
-  border-right: 1px solid;
-  margin-right: 18px;
+  background: $light-background-header;
   z-index: 9999;
 
-  .dark-theme & {
-    background: #1b1c1d;
+  @media (prefers-color-scheme: dark) {
+    background: $dark-background-header;
   }
 
   @media #{$media-size-phone} {
diff --git a/assets/scss/_single.scss b/assets/scss/_single.scss
index 5efb20d..dd478a9 100644
--- a/assets/scss/_single.scss
+++ b/assets/scss/_single.scss
@@ -118,7 +118,7 @@
       letter-spacing: 0.1em;
       z-index: 1;
 
-      .dark-theme & {
+      @media (prefers-color-scheme: dark) {
         background: $dark-background;
         color: $dark-color-secondary;
       }
@@ -160,7 +160,7 @@
   cursor: pointer;
   appearance: none;
 
-  .dark-theme & {
+  @media (prefers-color-scheme: dark) {
     background: $dark-background-secondary;
   }
 
diff --git a/assets/scss/_tables.scss b/assets/scss/_tables.scss
index c7a398e..986ee41 100644
--- a/assets/scss/_tables.scss
+++ b/assets/scss/_tables.scss
@@ -11,7 +11,7 @@
       padding: 12px 15px;
       border: 1px solid $light-table-color;
 
-      .dark-theme & {
+      @media (prefers-color-scheme: dark) {
         border: 1px solid $dark-table-color;
       }
     }
@@ -22,7 +22,7 @@
         color: $light-color;
         text-align: left;
 
-        .dark-theme & {
+        @media (prefers-color-scheme: dark) {
           background-color: $dark-table-color;
           color: $dark-color;
         }
@@ -32,7 +32,8 @@
     tbody {
       tr {
         border: 1px solid $light-table-color;
-        .dark-theme & {
+        
+        @media (prefers-color-scheme: dark) {
           border: 1px solid $dark-table-color;
         }
       }
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
index 4d5ef44..c1367cd 100644
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@@ -3,6 +3,7 @@
 /* Light theme color */
 $light-background: #fff;
 $light-background-secondary: #eaeaea;
+$light-background-header: #fafafa;
 $light-color: #222;
 $light-color-secondary: #999;
 $light-border-color: #dcdcdc;
@@ -11,6 +12,7 @@ $light-table-color: #dcdcdc;
 /* Dark theme colors */
 $dark-background: #232425;
 $dark-background-secondary: #3b3d42;
+$dark-background-header: #1b1c1d;
 $dark-color: #a9a9b3;
 $dark-color-secondary: #b3b3bd;
 $dark-border-color: #4e4e57;