refactor: added back basic dark mode

assets/js/anatole-theme-switcher.js

@@ -6,6 +6,7 @@ function getTheme() {
 function setTheme(style) {
   document.documentElement.setAttribute('data-theme', style);
   localStorage.setItem('theme', style);
+  setCssClass(style);
 }
 
 function init() {
@@ -26,12 +27,25 @@ function init() {
     // load a stored theme
     if (theme === 'light') {
       document.documentElement.setAttribute('data-theme', 'light');
+      setCssClass('light');
     } else {
       document.documentElement.setAttribute('data-theme', 'dark');
+      setCssClass('dark');
     }
   }
 }
 
+function setCssClass(style) {
+  var body = document.body;
+  if (style === 'light') {
+    body.classList.remove('theme--dark');
+    body.classList.add('theme--light');
+  } else if (style === 'dark') {
+    body.classList.remove('theme--light');
+    body.classList.add('theme--dark');
+  }
+}
+
 // switch themes
 function switchTheme() {
   const theme = getTheme();
@@ -55,4 +69,6 @@ document.addEventListener(
 // Automatic Switching
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
 
-init();
+document.addEventListener('DOMContentLoaded', function () {
+  init();
+});

assets/scss/main.scss

@@ -1,5 +1,6 @@
 @import './modules/variables';
 @import './modules/config';
+@import './modules/color_theme';
 @import './partials/hugo';
 @import './partials/base';
 @import './partials/layout/html';

assets/scss/modules/_color_theme.scss

@@ -0,0 +1,43 @@
+$themes: (
+  light: (
+    accent: $accent--lightmode,
+    primary: $primary--lightmode,
+    primary-light: $primary-light--lightmode,
+    primary-lighter: $primary-lighter--lightmode,
+    info: $info,
+    shadow: $shadow--lightmode,
+    border: 1px solid $primary-lighter--lightmode
+  ),
+  dark: (
+    accent: $accent--darkmode,
+    primary: $primary--darkmode,
+    primary-light: $primary-light--darkmode,
+    primary-lighter: $primary-lighter--darkmode,
+    info: $info,
+    shadow: $shadow--darkmode,
+    border: 1px solid $primary-lighter--darkmode
+  ),
+);
+
+@mixin themed() {
+  @each $theme, $map in $themes {
+    .theme--#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function t($key) {
+  @return map-get($theme-map, $key);
+}

assets/scss/modules/_config.scss

@@ -1,4 +1,3 @@
-
 @mixin desktop {
   @media screen and (min-width: 961px) {
     @content;

assets/scss/modules/_variables.scss

@@ -1,12 +1,21 @@
-/* Newly defined variables */
-$accent: #fff;
+/* Strings used for mapping variables */
 $primary: #464646;
-$primary-light: #9f9f9f;
-$primary-lighter: #eeeeee;
-$info: #0366d7;
-$shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-$border: 1px solid rgba(0, 0, 0, 0.15);
+
+/* Newly defined variables */
+$accent--lightmode: #fff;
+$primary--lightmode: #464646;
+$primary-light--lightmode: #9f9f9f;
+$primary-lighter--lightmode: #eeeeee;
+$shadow--lightmode: 0 8px 16px rgba(10, 10, 10, 0.1);
+
+$accent--darkmode: #152028;
+$primary--darkmode: #eeeeee;
+$primary-light--darkmode: #9f9f9f;
+$primary-lighter--darkmode: #464646;
+$shadow--darkmode: 0 8px 16px rgba(10, 10, 10, 0.1);
+
 $alert: #ffc107;
+$info: #0366d7;
 
 /* Former variables*/
 $secondary-bg-color: #eeeeee;

assets/scss/partials/_hugo.scss

@@ -1,16 +1,22 @@
 a {
   text-decoration: none;
-  color: $primary;
+  @include themed() {
+    color: t('primary');
+  }
 
   &:hover {
-    color: $info;
+    @include themed() {
+      color: t('info');
+    }
   }
 }
 
 blockquote {
+  @include themed() {
+    color: t('primary');
+    border-left: t('border');
+  }
   padding: 0 1em;
-  border-left: 0.25em solid $primary;
-  color: $primary;
 }
 
 p {

assets/scss/partials/components/_alert.scss

@@ -1,21 +1,24 @@
 .alert {
-    padding: 1rem;
-    border-style: solid;
-    border-color:$alert;
-    border-radius: 0.25rem;
-    border-width: 2px;
+  @include themed() {
+    border-color: t('alert');
+  }
+  padding: 1rem;
+  border-style: solid;
+  border-radius: 0.25rem;
+  border-width: 2px;
 
-    &__indicator {
-        background-color: $alert;
-        display: inline-block;
-        border-radius: 9999px;
-        padding: 0.5rem;
-        width: 2.5rem;
-        height: 2.5rem;
-        text-align: center;
-        color: $accent;
-        font-weight: 800;
-        margin-right: 0.75rem;
-      }
+  &__indicator {
+    @include themed() {
+      color: t('accent');
+      background-color: t('alert');
+    }
+    display: inline-block;
+    border-radius: 9999px;
+    padding: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    font-weight: 800;
+    margin-right: 0.75rem;
   }
-  
+}

assets/scss/partials/components/_archive.scss

@@ -15,23 +15,31 @@
     }
 
     &-date {
+      @include themed() {
+        color: t('primary-light');
+      }
       float: right;
       max-width: 10%;
       text-align: right;
-      color: $primary-light;
     }
     &-title {
-      color: $primary;
+      @include themed() {
+        color: t('primary');
+      }
       width: 90%;
       display: inline-block;
       &:hover {
-        color: $info;
+        @include themed() {
+          color: t('info');
+        }
       }
     }
 
     &-heading {
+      @include themed() {
+        color: t('primary');
+      }
       font-size: 2.4rem;
-      color: $primary;
       font-weight: 600;
       line-height: 2.2em;
     }

assets/scss/partials/components/_category.scss

@@ -1,9 +1,11 @@
 .category {
+  @include themed() {
+    border: t('border');
+    background-color: t('primary-lighter');
+    color: t('primary') !important;
+  }
   padding: 4px 6px;
   border-radius: 3px;
-  color: $tag-color !important;
-  background-color: $primary-lighter;
-  border: 1px solid $primary-light;
   display: inline-block;
   font-size: 1.5rem;
   line-height: 1;

assets/scss/partials/components/_footer.scss

@@ -23,13 +23,13 @@
 
   &__sidebar {
     display: none;
-    @include desktop_and_print{
+    @include desktop_and_print {
       display: inline-block;
     }
   }
 
   &__base {
-    @include desktop_and_print{
+    @include desktop_and_print {
       display: none;
     }
   }

assets/scss/partials/components/_languageswitch.scss

@@ -13,17 +13,21 @@
     position: relative;
 
     @include desktop {
-      background: $accent;
-      border-color: $primary;
+      @include themed() {
+        background: t(accent);
+        border-color: t(primary);
+        box-shadow: t(shadow);
+      }
       border-radius: 5px;
-      box-shadow: $shadow;
       position: absolute;
       top: 40px;
     }
 
     &-item {
+      @include themed() {
+        color: t('primary');
+      }
       background: transparent;
-      color: $primary;
       display: block;
       line-height: 1;
       padding: 0.5rem 0.75rem 0.5rem 0;
@@ -40,10 +44,12 @@
     display: none;
 
     &::before {
+      @include themed() {
+        background: t('accent');
+        box-shadow: t('shadow');
+        border-color: t('primary');
+      }
       content: '';
-      background: $accent;
-      box-shadow: $shadow;
-      border-color: $primary;
       border-radius: 2px 0px 0px 0px;
       height: 14px;
       bottom: 0px;

assets/scss/partials/components/_navbarburger.scss

@@ -7,7 +7,9 @@
   margin-left: auto;
 
   &__line {
-    background-color: $primary;
+    @include themed() {
+      background-color: t('primary');
+    }
     display: block;
     height: 1px;
     left: calc(50% - 8px);

assets/scss/partials/components/_page404.scss

@@ -1,4 +1,4 @@
 .page_404 {
-    text-align: center;
-    padding-top: 50px;
-}
+  text-align: center;
+  padding-top: 50px;
+}

assets/scss/partials/components/_pagination.scss

@@ -9,11 +9,13 @@
     padding: 0;
     height: 13px;
     &-item {
+      @include themed() {
+        color: t('primary');
+      }
       margin: 0 2px 0 2px;
       display: inline;
       line-height: 1;
       text-decoration: none;
-      color: $primary;
     }
   }
 }