Implement proper dark mode (#800)

* Implement proper dark mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Fix footer color in light mode

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

---------

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

assets/scripts/features/darkmode/darkreader.js

@@ -1,30 +0,0 @@
-import { enable, disable, auto, setFetchMethod } from 'darkreader'
-import * as params from '@params'
-
-const darkreader = params?.darkmode?.darkreader || {}
-const defaultColorScheme = darkreader.defaultcolorscheme || 'system'
-const theme = {
-  brightness: 100,
-  contrast: 100,
-  sepia: 0,
-  ...(darkreader.theme || {})
-}
-const fixes = {
-  invert: ['img[src$=".svg"]'],
-  ...(darkreader.fixes || {})
-}
-setFetchMethod(window.fetch)
-
-export function setSchemeDark () {
-  enable(theme, fixes)
-}
-
-export function setSchemeLight () {
-  disable()
-}
-
-export function setSchemeSystem () {
-  auto(theme, fixes)
-}
-
-export { defaultColorScheme }

assets/scripts/features/darkmode/index.js

@@ -1,14 +1,6 @@
 const PERSISTENCE_KEY = 'darkmode:color-scheme'
 
-async function getService () {
+window.addEventListener('load', async () => {
-  if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
-    return await import('./darkreader')
-  }
-
-  throw Error(' No service defined for feature darkMode.')
-}
-
-window.addEventListener('DOMContentLoaded', async () => {
   const menu = document.getElementById('themeMenu')
   const $icon = document.getElementById('navbar-theme-icon-svg')
   if (menu == null || $icon == null) return
@@ -20,32 +12,32 @@ window.addEventListener('DOMContentLoaded', async () => {
     return map
   }, {})
 
-  const {
-    setSchemeDark,
-    setSchemeLight,
-    setSchemeSystem,
-    defaultColorScheme
-  } = await getService()
 
-  function loadScheme () {
+  function loadScheme() {
-    return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
+    return localStorage.getItem(PERSISTENCE_KEY) || "system"
   }
 
-  function saveScheme (scheme) {
+  function saveScheme(scheme) {
     localStorage.setItem(PERSISTENCE_KEY, scheme)
   }
 
-  function setScheme (newScheme) {
+  function getPreferredColorScheme() {
+    const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    return isDarkMode ? "dark" : "light";
+  }
+
+  function setScheme(newScheme) {
+    let theme = newScheme
+    if (newScheme === 'system') {
+      theme = getPreferredColorScheme()
+    }
+    // set data-theme attribute on html tag
+    document.querySelector("html").dataset.theme = theme;
+
+    // update icon
     $icon.src = iconMap[newScheme]
 
-    if (newScheme === 'dark') {
+    // save preference to local storage
-      setSchemeDark()
-    } else if (newScheme === 'system') {
-      setSchemeSystem()
-    } else {
-      setSchemeLight()
-    }
-
     saveScheme(newScheme)
   }
 

assets/scripts/sections/navbar.js

@@ -1,7 +1,6 @@
 const updateNavBar = () => {
   const topNavbar = document.getElementById('top-navbar')
   const navbarToggler = document.getElementById('navbar-toggler')
-  const themeIcon = document.getElementById('navbar-theme-icon-svg')
 
   if (window.scrollY > 40) {
     topNavbar?.classList.remove('transparent-navbar')
@@ -10,8 +9,6 @@ const updateNavBar = () => {
     navbarToggler?.classList.remove('navbar-dark')
     navbarToggler?.classList.add('navbar-light')
 
-    // color theme selector a.k.a. dark mode
-    themeIcon?.classList.remove('navbar-icon-svg-dark')
 
     // get the main logo from hidden img tag
     const mainLogo = document.getElementById('main-logo')
@@ -26,9 +23,6 @@ const updateNavBar = () => {
     navbarToggler?.classList.remove('navbar-light')
     navbarToggler?.classList.add('navbar-dark')
 
-    // color theme selector a.k.a. dark mode
-    themeIcon?.classList.add('navbar-icon-svg-dark')
-
     // get the inverted logo from hidden img tag
     const invertedLogo = document.getElementById('inverted-logo')
     if (invertedLogo) {

assets/styles/colortheme/colortheme.css

@@ -1,20 +0,0 @@
-/* Note: No need to invert when the screen is small because the navbar is
-   collapsed to a hamburger menu. */
-   @media only screen and (min-width: 1200px) {
-    .dynamic-navbar .navbar-icon-svg-dark {
-      filter: invert(1);
-    };
-  }
-  
-  @media only screen and (min-width: 1200px) {
-    .dropdown-menu-icons-only {
-      width: 25px;
-      min-width: 3rem;
-    }
-  }
-  
-  .menu-icon-center {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }

assets/styles/components/buttons.scss

@@ -1,44 +1,44 @@
 .btn-dark {
-  background-color: $text-color !important;
+  background-color: get-light-color('text-color') !important;
-  border-color: $text-color !important;
+  border-color: get-light-color('text-color') !important;
-  color: $text-over-accent-color !important;
+  color: get-light-color('text-over-accent-color') !important;
   @include transition();
 
   &:hover,
   &:focus {
-    background-color: $accent-color !important;
+    background-color: get-light-color('accent-color') !important;
-    border-color: $accent-color !important;
+    border-color: get-light-color('accent-color') !important;
     @include transition();
   }
 }
 
 .btn-info {
-  background-color: $accent-color !important;
+  background-color: get-light-color('accent-color') !important;
-  color: $text-over-accent-color !important;
+  color: get-light-color('text-over-accent-color') !important;
 
   &:hover,
   &:focus {
-    background-color: $hover-over-accent-color !important;
+    background-color: get-light-color('hover-over-accent-color') !important;
   }
 }
 
 .btn-outline-info {
-  color: $accent-color !important;
+  color: get-light-color('accent-color') !important;
-  border-color: $accent-color !important;
+  border-color: get-light-color('accent-color') !important;
 
   &:hover,
   &:focus {
-    background-color: $accent-color !important;
+    background-color: get-light-color('accent-color') !important;
-    color: $text-over-accent-color !important;
+    color: get-light-color('text-over-accent-color') !important;
   }
 }
 
 .btn-link {
-  color: $accent-color;
+  color: get-light-color('accent-color');
 
   &:hover,
   &:focus {
-    color: $hover-over-accent-color;
+    color: get-light-color('hover-over-accent-color');
   }
 }
 
@@ -46,7 +46,7 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-radius: 0.25rem;
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
 }
 
 .tags {
@@ -56,18 +56,19 @@
     font-size: 0.5em;
     list-style-type: none;
     display: inline-block;
-    background: $accent-color;
+    background: get-light-color('accent-color');
     margin-left: 0.1em;
     margin-right: 0.1em;
   }
   a {
-    color: $text-over-accent-color;
+    color: get-light-color('text-over-accent-color');
+    text-decoration: none !important;
   }
 }
 
 .icon-button {
-  background-color: $text-color;
+  background-color: get-light-color('text-color');
-  color: $text-over-accent-color !important;
+  color: get-light-color('text-over-accent-color') !important;
   padding: 0.25rem 0.5rem;
   line-height: 1.5;
   border-radius: 0.2rem;
@@ -75,19 +76,99 @@
 
   &:hover,
   &:focus {
-    background-color: $accent-color !important;
+    background-color: get-light-color('accent-color') !important;
     @include transition();
   }
 }
 
 .filled-button {
-  background-color: $accent-color !important;
+  background-color: get-light-color('accent-color') !important;
-  color: $text-over-accent-color !important;
+  color: get-light-color('text-over-accent-color') !important;
   @include transition();
 
   &:hover,
   &:active {
-    background-color: $hover-over-accent-color !important;
+    background-color: get-light-color('hover-over-accent-color') !important;
     @include transition();
   }
 }
+
+html[data-theme='dark'] {
+  .btn-dark {
+    background-color: get-dark-color('accent-color') !important;
+    border-color: get-dark-color('accent-color') !important;
+    color: get-dark-color('text-over-accent-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('hover-over-accent-color') !important;
+      border-color: get-dark-color('hover-over-accent-color') !important;
+    }
+  }
+
+  .btn-info {
+    background-color: get-dark-color('bg-card') !important;
+    color: get-dark-color('text-color') !important;
+    border: 1px solid get-dark-color('muted-text-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('hover-over-accent-color') !important;
+    }
+  }
+
+  .btn-outline-info {
+    color: get-dark-color('accent-color') !important;
+    border-color: get-dark-color('accent-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('accent-color') !important;
+      color: get-dark-color('text-over-accent-color') !important;
+    }
+  }
+
+  .btn-link {
+    color: get-dark-color('accent-color');
+
+    &:hover,
+    &:focus {
+      color: get-dark-color('hover-over-accent-color');
+    }
+  }
+
+  .nav-button {
+    color: get-dark-color('muted-text-color');
+  }
+
+  .tags {
+    li {
+      background: get-dark-color('accent-color');
+      a {
+        background-color: get-dark-color('bg-card');
+        border: 1px solid get-dark-color('muted-text-color');
+        color: get-dark-color('text-over-accent-color');
+      }
+    }
+  }
+
+  .icon-button {
+    background-color: get-dark-color('muted-text-color');
+    color: get-dark-color('text-over-accent-color') !important;
+
+    &:hover,
+    &:focus {
+      background-color: get-dark-color('accent-color') !important;
+    }
+  }
+
+  .filled-button {
+    background-color: get-dark-color('accent-color') !important;
+    color: get-dark-color('text-over-accent-color') !important;
+
+    &:hover,
+    &:active {
+      background-color: get-dark-color('hover-over-accent-color') !important;
+    }
+  }
+}

assets/styles/components/cards.scss

@@ -2,12 +2,12 @@
   box-shadow: none;
   @include transition();
   overflow: hidden;
-  background: $bg-card;
+  background: get-light-color('bg-card');
 
   &:hover,
   &:focus {
     box-shadow: $box-shadow;
-    border: 1px solid $bg-primary;
+    border: 1px solid get-light-color('bg-primary');
     @include transition();
   }
 
@@ -36,7 +36,10 @@
   }
 
   .card-footer {
-    background: $bg-card !important;
+    background: get-light-color('bg-card') !important;
+    a.btn {
+      text-decoration: none !important;
+    }
   }
 }
 
@@ -45,7 +48,7 @@
   display: inline-flex;
 
   .post-card-link {
-    text-decoration: none;
+    text-decoration: none !important;
   }
 
   .card {
@@ -80,9 +83,33 @@
 
       span {
         font-size: 10pt;
-        color: $muted-text-color !important;
+        color: get-light-color('muted-text-color') !important;
         padding-top: 5px;
       }
     }
   }
 }
+
+html[data-theme='dark'] {
+  .card {
+    background: get-dark-color('bg-card');
+
+    &:hover,
+    &:focus {
+      border: 1px solid rgba(get-dark-color('accent-color'), 0.2);
+    }
+    .card-footer {
+      background: get-dark-color('bg-card') !important;
+    }
+  }
+
+  .post-card {
+    .card {
+      .card-footer {
+        span {
+          color: get-dark-color('muted-text-color') !important;
+        }
+      }
+    }
+  }
+}

assets/styles/components/images.scss

@@ -17,7 +17,7 @@ img {
 }
 
 figure {
-  border: 1px solid $border-color;
+  border: 1px solid rgba(get-light-color('accent-color'), 0.1);
   height: -moz-fit-content;
   height: fit-content;
   width: -moz-fit-content;
@@ -30,5 +30,15 @@ caption,
 figcaption {
   caption-side: bottom;
   text-align: center;
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
+}
+
+html[data-theme='dark'] {
+  figure {
+    border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+  }
+  caption,
+  figcaption {
+    color: get-dark-color('muted-text-color');
+  }
 }

assets/styles/components/links.scss

@@ -1,38 +1,38 @@
 a {
-  color: $accent-color;
+  color: get-light-color('accent-color');
   @include transition();
 
   &:hover,
   &:focus {
-    text-decoration: $hover-over-accent-color underline;
+    text-decoration: get-light-color('hover-over-accent-color') underline;
-    color: $hover-over-accent-color;
+    color: get-light-color('hover-over-accent-color');
     @include transition();
   }
 }
 
 .list-link {
-  text-decoration: none;
+  text-decoration: none !important;
-  color: $text-color;
+  color: get-light-color('text-color');
   @include transition();
   &.active {
     display: inline;
-    color: $accent-color;
+    color: get-light-color('accent-color');
   }
 
   &:hover {
     margin-left: 3px;
-    color: $accent-color;
+    color: get-light-color('accent-color');
     @include transition();
   }
 }
 
 a.header-anchor {
   text-decoration: none;
-  color: $heading-color;
+  color: get-light-color('heading-color');
   i,
   svg {
     font-size: 10pt;
-    color: $text-color;
+    color: get-light-color('text-color');
     display: none;
     margin-left: 0.5rem;
   }
@@ -43,10 +43,37 @@ a.header-anchor {
     }
   }
   code {
-    color: $inline-code-color;
+    color: get-light-color('inline-code-color');
   }
 }
 
 .anchor {
   padding-top: 3.5rem;
 }
+
+html[data-theme='dark'] {
+  a {
+    color: get-dark-color('accent-color');
+    &:hover,
+    &:focus {
+      text-decoration: get-dark-color('hover-over-accent-color') underline;
+      color: get-dark-color('hover-over-accent-color');
+    }
+  }
+  .list-link {
+    color: get-dark-color('text-color');
+    &:hover {
+      color: get-dark-color('accent-color');
+    }
+  }
+  a.header-anchor {
+    color: get-dark-color('heading-color');
+    i,
+    svg {
+      color: get-dark-color('text-color');
+    }
+    code {
+      color: get-dark-color('inline-code-color');
+    }
+  }
+}

assets/styles/components/misc.scss

@@ -6,12 +6,12 @@
 
   .page-item {
     & > a {
-      color: $accent-color;
+      color: get-light-color('accent-color');
     }
     &.active,
     &:hover > a {
-      background-color: $accent-color !important;
+      background-color: get-light-color('accent-color') !important;
-      color: $text-over-accent-color !important;
+      color: get-light-color('text-over-accent-color') !important;
     }
   }
 }
@@ -31,3 +31,18 @@ pre {
     }
   }
 }
+
+html[data-theme='dark'] {
+  .paginator {
+    .page-item {
+      & > a {
+        color: get-dark-color('accent-color');
+      }
+      &.active,
+      &:hover > a {
+        background-color: get-dark-color('accent-color') !important;
+        color: get-dark-color('text-over-accent-color') !important;
+      }
+    }
+  }
+}

assets/styles/components/tables.scss

@@ -1,24 +1,24 @@
 table {
   border-radius: 0.1rem;
-  border: 1px solid $border-color;
+  border: 1px solid rgba(get-light-color('accent-color'), 0.1);
   min-width: 10rem;
   padding: 0.1rem;
   thead {
     tr {
-      background: $accent-color;
+      background: get-light-color('accent-color');
-      color: $text-over-accent-color;
+      color: get-light-color('text-over-accent-color');
     }
   }
 
   tbody {
     tr {
       height: 40px !important;
-      color: $text-color;
+      color: get-light-color('text-color');
       &:nth-child(odd) {
-        background-color: $bg-primary;
+        background-color: get-light-color('bg-primary');
       }
       &:nth-child(even) {
-        background-color: rgba($accent-color, 0.05);
+        background-color: rgba(get-light-color('accent-color'), 0.05);
       }
     }
   }
@@ -33,10 +33,10 @@ table {
 
 .gist {
   table {
-    border-radius: unset;
+    border-radius: unset !important;
-    background: unset;
+    background: unset !important;
-    border: unset;
+    border: unset !important;
-    padding: unset;
+    padding: unset !important;
 
     tr {
       height: unset !important;
@@ -44,31 +44,67 @@ table {
 
     th,
     td {
-      padding: unset;
+      padding: unset !important;
-      border-left: unset;
+      border-left: unset !important;
-      border-bottom: unset;
+      border-bottom: unset !important;
     }
     td,
     tc {
-      border-right: 1px solid $border-color;
+      border-right: 1px solid rgba(get-light-color('accent-color'), 0.1);
     }
 
     thead {
       tr {
-        background: unset;
+        background: unset !important;
-        color: unset;
+        color: unset !important;
       }
     }
 
     tbody {
       tr {
         &:nth-child(odd) {
-          background-color: unset;
+          background-color: unset !important;
         }
         &:hover {
-          background: unset;
+          background: unset !important;
         }
       }
     }
   }
 }
+
+html[data-theme='dark'] {
+  table {
+    border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+    thead {
+      tr {
+        background: get-dark-color('accent-color');
+        color: get-dark-color('text-over-accent-color');
+      }
+    }
+
+    tbody {
+      tr {
+        color: get-dark-color('text-color');
+        &:nth-child(odd) {
+          background-color: get-dark-color('bg-primary');
+        }
+        &:nth-child(even) {
+          background-color: rgba(get-dark-color('accent-color'), 0.05);
+        }
+      }
+    }
+  }
+  .gist {
+    &::selection{
+      background: get-dark-color('text-color');
+      color: get-dark-color('inverse-text-color');
+    }
+    table {
+      td,
+      tc {
+        border-right: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+      }
+    }
+  }
+}

assets/styles/components/texts.scss

@@ -3,41 +3,41 @@ h2,
 h3,
 h4,
 h5 {
-  color: $heading-color;
+  color: get-light-color('heading-color');
 }
 
 strong {
-  color: $heading-color !important;
+  color: get-light-color('heading-color') !important;
 }
 
 p {
-  color: $text-color;
+  color: get-light-color('text-color');
 }
 
 blockquote {
-  border-left: 4px solid $accent-color;
+  border-left: 4px solid get-light-color('accent-color');
-  background-color: rgba($accent-color, 0.05);
+  background-color: rgba(get-light-color('accent-color'), 0.05);
   padding: 0.3rem;
   padding-left: 1rem;
 
   & > p {
-    color: $text-color;
+    color: get-light-color('text-color');
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
   }
 }
 
 .text-muted {
-  color: $muted-text-color !important;
+  color: get-light-color('muted-text-color') !important;
 }
 
 .text-heading {
   font-weight: bold;
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
 }
 
 .sub-title {
-  color: $muted-text-color;
+  color: get-light-color('muted-text-color');
   font-size: 10pt;
 }
 
@@ -60,3 +60,50 @@ blockquote {
     font-size: 1.5rem;
   }
 }
+
+html[data-theme='dark'] {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    color: get-dark-color('heading-color');
+  }
+
+  strong {
+    color: get-dark-color('heading-color') !important;
+  }
+
+  p {
+    color: get-dark-color('text-color');
+  }
+
+  blockquote {
+    border-left: 4px solid get-dark-color('accent-color');
+    background-color: rgba(get-dark-color('accent-color'), 0.05);
+    color: get-dark-color('text-color');
+  }
+
+  .text-muted {
+    color: get-dark-color('muted-text-color') !important;
+  }
+
+  .text-heading {
+    color: get-dark-color('muted-text-color');
+  }
+
+  .sub-title {
+    color: get-dark-color('muted-text-color');
+  }
+  ::-moz-selection {
+    @include selection-color($theme: 'dark');
+  }
+
+  ::selection {
+    @include selection-color($theme: 'dark');
+  }
+  li,
+  ul {
+    color: get-dark-color('text-color');
+  }
+}

assets/styles/layouts/list.scss

@@ -49,12 +49,12 @@ body.kind-page {
 
           .page-item {
             & > a {
-              color: $accent-color;
+              color: get-light-color('accent-color');
             }
 
             &.active > a {
-              background-color: $accent-color;
+              background-color: get-light-color('accent-color');
-              color: $text-over-accent-color;
+              color: get-light-color('text-over-accent-color');
             }
           }
         }
@@ -172,3 +172,36 @@ body.kind-page {
     }
   }
 }
+
+html[data-theme='dark'] {
+  body.kind-section,
+  body.kind-term,
+  body.kind-page {
+    .wrapper {
+      .content-section {
+        .content {
+          .paginator {
+            .page-item {
+              & > a {
+                background-color: get-dark-color('bg-card') !important;
+                color: get-dark-color('text-color') !important;
+                border: 1px solid get-dark-color('muted-text-color') !important;
+                text-decoration: none !important;
+
+                &:hover {
+                  background-color: get-dark-color('hover-over-accent-color') !important;
+                  color: get-dark-color('text-over-accent-color') !important;
+                }
+              }
+
+              &.active > a {
+                background-color: get-dark-color('accent-color') !important;
+                color: get-dark-color('text-over-accent-color') !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/layouts/main.scss

@@ -20,16 +20,16 @@ html {
 }
 
 body {
-  background-color: $bg-primary;
+  background-color: get-light-color('bg-primary');
   font-family: 'Mulish';
 }
 
 .bg-primary {
-  background-color: $bg-primary !important;
+  background-color: get-light-color('bg-primary') !important;
 }
 
 .bg-secondary {
-  background-color: $bg-secondary !important;
+  background-color: get-light-color('bg-secondary') !important;
 }
 
 .flag-icon {
@@ -55,12 +55,12 @@ body {
 }
 
 kbd {
-  background-color: $accent-color;
+  background-color: get-light-color('accent-color');
-  color: $text-over-accent-color;
+  color: get-light-color('text-over-accent-color');
 }
 
 mark {
-  background-color: $highlight-color;
+  background-color: get-light-color('highlight-color');
   border-radius: 0.25rem;
 }
 
@@ -88,3 +88,24 @@ mark {
     padding-right: 0;
   }
 }
+
+html[data-theme='dark'] {
+  body {
+    background-color: get-dark-color('bg-primary');
+    color: get-dark-color('text-color');
+  }
+
+  .bg-primary {
+    background-color: get-dark-color('bg-primary') !important;
+  }
+  .bg-secondary {
+    background-color: get-dark-color('bg-secondary') !important;
+  }
+  kbd {
+    background-color: get-dark-color('accent-color');
+    color: get-dark-color('text-over-accent-color');
+  }
+  mark {
+    background-color: get-dark-color('highlight-color');
+  }
+}

assets/styles/layouts/notes.scss

@@ -48,7 +48,7 @@ body.type-notes {
 
           .note-title {
             padding-left: 1rem;
-            color: $accent-color;
+            color: get-light-color('accent-color');
 
             &:before {
               content: '';
@@ -56,11 +56,11 @@ body.type-notes {
               width: 98%;
               height: 100%;
               margin-bottom: -26px;
-              border-bottom: 1px solid $accent-color;
+              border-bottom: 1px solid get-light-color('accent-color');
             }
 
             span {
-              background: $bg-secondary;
+              background: get-light-color('bg-secondary');
               padding-right: 5px;
             }
           }
@@ -173,3 +173,27 @@ body.type-notes {
     }
   }
 }
+
+html[data-theme='dark'] {
+  body.type-notes {
+    .wrapper {
+      .content-section {
+        .content {
+          .note-card-holder {
+            .note-title {
+              color: get-dark-color('accent-color');
+              &:before {
+                border-bottom: 1px solid get-dark-color('accent-color');
+              }
+
+              span {
+                background: get-dark-color('bg-secondary');
+                padding-right: 5px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/layouts/single.scss

@@ -1,5 +1,5 @@
 body.kind-page {
-  background-color: $bg-secondary;
+  background-color: get-light-color('bg-secondary');
   position: relative;
 
   .wrapper {
@@ -23,7 +23,7 @@ body.kind-page {
         padding-top: 1.5rem;
 
         .read-area {
-          background-color: $bg-primary;
+          background-color: get-light-color('bg-primary');
 
           .hero-area {
             margin-top: 3rem;
@@ -54,7 +54,7 @@ body.kind-page {
                 width: 120px;
                 -o-object-fit: cover;
                 object-fit: cover;
-                background-color: $bg-primary;
+                background-color: get-light-color('bg-primary');
                 padding: 5px;
               }
             }
@@ -93,6 +93,9 @@ body.kind-page {
               .next-prev-text {
                 white-space: break-spaces;
               }
+              a {
+                text-decoration: none !important;
+              }
             }
           }
         }
@@ -111,7 +114,7 @@ body.kind-page {
         padding-top: 1rem;
         overflow-x: hidden;
         overflow-y: auto;
-        background-color: $bg-primary;
+        background-color: get-light-color('bg-primary');
         margin-right: 0.5rem;
         @include transition();
 
@@ -138,16 +141,17 @@ body.kind-page {
             .nav-link {
               padding: 0;
               padding-left: 0.5rem;
+              text-decoration: none !important;
               @include transition();
-              color: $heading-color;
+              color: get-light-color('text-color');
 
               &:hover,
               &:focus,
               &.active {
                 padding-left: 1rem;
                 padding-right: 0.5rem;
-                background-color: $accent-color;
+                background-color: get-light-color('accent-color');
-                color: $text-over-accent-color;
+                color: get-light-color('text-over-accent-color');
                 @include transition();
               }
             }
@@ -176,13 +180,13 @@ body.kind-page {
     position: fixed;
     bottom: 0rem;
     right: 1rem;
-    color: $accent-color;
+    color: get-light-color('accent-color');
     font-size: 24pt;
     z-index: 900000;
     visibility: hidden;
 
     &:hover {
-      color: $hover-over-accent-color;
+      color: get-light-color('hover-over-accent-color');
     }
     &.show {
       visibility: visible;
@@ -190,7 +194,7 @@ body.kind-page {
 
     i {
       box-shadow: $box-shadow;
-      background-color: $bg-primary;
+      background-color: get-light-color('bg-primary');
       border-radius: 50%;
     }
   }
@@ -318,3 +322,61 @@ body.kind-page {
     }
   }
 }
+
+html[data-theme='dark'] {
+  body.kind-page {
+    background-color: get-dark-color('bg-secondary');
+
+    .wrapper {
+      .content-section {
+        .content {
+          .read-area {
+            background-color: get-dark-color('bg-primary');
+
+            .page-content {
+              .author-profile {
+                img {
+                  background-color: get-dark-color('bg-primary');
+                }
+              }
+            }
+          }
+        }
+      }
+      .toc-section {
+        .toc-holder {
+          background-color: get-dark-color('bg-primary');
+          hr {
+            background-color: get-dark-color('muted-text-color');
+          }
+
+          .toc {
+            nav {
+              .nav-link {
+                color: get-dark-color('text-color');
+
+                &:hover,
+                &:focus,
+                &.active {
+                  background-color: get-dark-color('accent-color');
+                  color: get-dark-color('text-over-accent-color');
+                }
+              }
+            }
+          }
+        }
+      }
+
+      #scroll-to-top {
+        color: get-dark-color('accent-color');
+        &:hover {
+          color: get-dark-color('hover-over-accent-color');
+        }
+
+        i {
+          background-color: get-dark-color('bg-primary');
+        }
+      }
+    }
+  }
+}

assets/styles/mixins.scss

@@ -1,3 +1,21 @@
+@function get-color($mode, $key) {
+  @if map-has-key($themes, $mode) {
+    $theme: map-get($themes, $mode);
+    @if map-has-key($theme, $key) {
+      @return map-get($theme, $key);
+    }
+  }
+  @return red; // default color for debugging purpose
+}
+
+@function get-light-color($key) {
+  @return get-color('light', $key);
+}
+
+@function get-dark-color($key) {
+  @return get-color('dark', $key);
+}
+
 @mixin reset-list {
   margin: 0;
   padding: 0;
@@ -24,7 +42,11 @@
   transition: all $transition-type $transition-duration;
 }
 
-@mixin selection-color() {
+@mixin selection-color($theme: 'light') {
-  background: $accent-color;
+  background: get-light-color('accent-color');
-  color: $text-over-accent-color;
+  color: get-light-color('text-over-accent-color');
+  @if $theme == 'dark' {
+    background: get-dark-color('accent-color');
+    color: get-dark-color('text-over-accent-color');
+  }
 }

assets/styles/navigators/navbar.scss

@@ -1,8 +1,14 @@
-@mixin nav-item-hover-effect() {
+@mixin nav-item-hover-effect($theme: 'light') {
-  color: $accent-color !important;
+  color: get-light-color('accent-color') !important;
-  border-bottom: 2px solid $accent-color !important;
+  border-bottom: 2px solid get-light-color('accent-color') !important;
-  background: rgba($accent-color, 0.1);
+  background: rgba(get-light-color('accent-color'), 0.1);
   @include transition();
+
+  @if $theme == 'dark' {
+    color: get-dark-color('accent-color') !important;
+    border-bottom: 2px solid get-dark-color('accent-color') !important;
+    background: rgba(get-dark-color('accent-color'), 0.1);
+  }
 }
 
 .top-navbar {
@@ -14,13 +20,13 @@
   z-index: 99999;
   margin: 0px;
   padding-top: 0.4rem;
-  color: $heading-color;
+  color: get-light-color('heading-color');
   text-align: center;
-  background-color: $bg-primary;
+  background-color: get-light-color('bg-primary');
   @include transition();
 
   .navbar-brand {
-    color: $heading-color;
+    color: get-light-color('heading-color');
     font-weight: 600;
     img {
       width: 42px;
@@ -41,7 +47,8 @@
 
   li {
     a {
-      color: $heading-color;
+      color: get-light-color('heading-color');
+      text-decoration: none !important;
       font-weight: 500;
       @include transition();
       border-bottom: 2px solid transparent;
@@ -57,14 +64,14 @@
 
   #top-navbar-divider {
     margin-top: 10px;
-    background-color: $muted-text-color;
+    background-color: get-light-color('muted-text-color');
     height: 20px;
     width: 2px;
   }
 
   .dropdown-menu {
     box-shadow: $box-shadow;
-    border: 1px solid $border-color;
+    border: 1px solid rgba(get-light-color('accent-color'), 0.1);
     max-height: 0vh;
     overflow: hidden;
     display: block;
@@ -77,7 +84,7 @@
       @include transition();
 
       a {
-        color: $heading-color !important;
+        color: get-light-color('heading-color') !important;
 
         &:hover {
           @include nav-item-hover-effect();
@@ -90,40 +97,51 @@
     margin-top: -5px;
     &.show,
     &.collapsing {
-      background-color: $bg-primary;
+      background-color: get-light-color('bg-primary');
       padding-left: 1rem;
 
       li {
         a {
-          color: $heading-color;
+          color: get-light-color('heading-color');
           font-weight: 500;
           @include transition();
         }
       }
       .navbar-nav {
         .active {
-          color: $accent-color;
+          color: get-light-color('accent-color');
         }
         a:hover {
-          color: $accent-color;
+          color: get-light-color('accent-color');
         }
       }
     }
   }
 
   &.transparent-navbar {
-    background-color: transparent;
+    background-color: transparent !important;
     .navbar-brand {
-      color: $inverse-text-color;
+      color: get-light-color('inverse-text-color');
       font-weight: 600;
     }
     li {
       a {
-        color: $inverse-text-color;
+        color: get-light-color('inverse-text-color');
       }
     }
     .feather-menu {
-      stroke: $inverse-text-color;
+      stroke: get-light-color('inverse-text-color');
+    }
+  }
+
+  #themeMenu {
+    width: 25px;
+    min-width: 3rem;
+
+    img.theme-icon {
+      display: block !important;
+      margin-left: auto !important;
+      margin-right: auto !important;
     }
   }
 
@@ -140,7 +158,7 @@
     &.transparent-navbar {
       .navbar-nav .active,
       li a:hover {
-        color: $accent-color;
+        color: get-light-color('accent-color');
         @include transition();
       }
     }
@@ -163,9 +181,12 @@
       right: 0.5rem;
       bottom: 1rem;
       z-index: 10000000;
-      background-color: $bg-primary;
+      background-color: get-light-color('bg-primary');
       box-shadow: $box-shadow;
     }
+    #themeMenu{
+      width: 100%;
+    }
   }
 
   @include media('<=small') {
@@ -180,5 +201,85 @@
 .feather-menu {
   width: 1.5rem;
   height: 1.5rem;
-  stroke: $text-color;
+  stroke: get-light-color('text-color');
+}
+
+html[data-theme='dark'] {
+  .top-navbar {
+    color: get-dark-color('heading-color');
+    background-color: get-dark-color('bg-primary');
+
+    .navbar-brand {
+      color: get-dark-color('heading-color');
+    }
+    .sidebar-icon {
+      filter: invert(0.5);
+    }
+
+    li {
+      a {
+        color: get-dark-color('heading-color');
+      }
+    }
+
+    #top-navbar-divider {
+      background-color: get-dark-color('muted-text-color');
+    }
+
+    .dropdown-menu {
+      box-shadow: $box-shadow;
+      background-color: get-dark-color('bg-card');
+      border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+
+      &.show {
+        a {
+          color: get-dark-color('heading-color') !important;
+        }
+      }
+    }
+
+    .navbar-collapse {
+      &.show,
+      &.collapsing {
+        background-color: get-dark-color('bg-primary');
+
+        li {
+          a {
+            color: get-dark-color('heading-color');
+          }
+        }
+        .navbar-nav {
+          .active {
+            color: get-dark-color('accent-color');
+          }
+          a:hover {
+            color: get-dark-color('accent-color');
+          }
+        }
+      }
+    }
+
+    &.transparent-navbar {
+      .navbar-brand {
+        color: get-dark-color('text-color');
+      }
+      li {
+        a {
+          color: get-dark-color('text-color');
+        }
+      }
+      .feather-menu {
+        stroke: get-dark-color('text-color');
+      }
+    }
+  }
+
+  img.theme-icon {
+    filter: invert(1);
+  }
+
+  .feather-sidebar,
+  .feather-menu {
+    stroke: get-dark-color('text-color');
+  }
 }

assets/styles/navigators/sidebar.scss

@@ -7,14 +7,14 @@
   .sidebar-holder {
     top: 2.5rem;
     position: sticky;
-    background-color: $bg-primary;
+    background-color: get-light-color('bg-primary');
     height: 100vh;
     overflow: auto;
     box-shadow: $box-shadow;
     @include transition();
 
     .sidebar {
-      background: $bg-primary;
+      background: get-light-color('bg-primary');
       height: 100vh;
       @include transition();
 
@@ -27,12 +27,12 @@
         margin-top: 30px;
         margin-bottom: 10px;
         border-radius: 5px;
-        background-color: $bg-secondary;
+        background-color: get-light-color('bg-secondary');
         @include transition();
-        border: 1px solid $border-color;
+        border: 1px solid rgba(get-light-color('accent-color'), 0.1);
 
         &:focus {
-          border: 1pt solid $accent-color;
+          border: 1pt solid get-light-color('accent-color');
           outline: none;
         }
       }
@@ -56,11 +56,11 @@
             margin: 0;
             padding: 0 1em;
             line-height: 2em;
-            color: $heading-color;
+            color: get-light-color('heading-color');
             position: relative;
 
             i {
-              color: $heading-color;
+              color: get-light-color('heading-color');
               font-size: 12px;
               margin-right: 5px;
             }
@@ -80,7 +80,7 @@
               top: 2.5rem;
               left: 1.5rem;
               bottom: 0.9rem;
-              border-left: 1px solid $text-color;
+              border-left: 1px solid get-light-color('text-color');
             }
             li {
               &:before {
@@ -88,14 +88,14 @@
                 display: block;
                 width: 18px;
                 height: 0;
-                border-top: 1px solid $text-color;
+                border-top: 1px solid get-light-color('text-color');
                 margin-top: -1px;
                 position: absolute;
                 top: 18px;
                 left: -2px;
               }
               &:last-child:before {
-                background: $bg-primary;
+                background: get-light-color('bg-primary');
                 height: auto;
                 top: 1.1rem;
                 bottom: 0;
@@ -253,3 +253,49 @@
   width: 1rem;
   height: 1rem;
 }
+
+html[data-theme='dark'] {
+  .sidebar-section {
+    .sidebar-holder {
+      background-color: get-dark-color('bg-primary');
+
+      .sidebar {
+        background: get-dark-color('bg-primary');
+
+        #search-box {
+          background-color: get-dark-color('bg-secondary');
+          border: 1px solid rgba(get-dark-color('accent-color'), 0.1);
+
+          &:focus {
+            border: 1pt solid get-dark-color('accent-color');
+          }
+        }
+
+        .sidebar-tree {
+          .tree {
+            li {
+              color: get-dark-color('heading-color');
+
+              i {
+                color: get-dark-color('heading-color');
+              }
+            }
+            .subtree {
+              &:before {
+                border-left: 1px solid get-dark-color('text-color');
+              }
+              li {
+                &:before {
+                  border-top: 1px solid get-dark-color('text-color');
+                }
+                &:last-child:before {
+                  background: get-dark-color('bg-primary');
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/sections/about.scss

@@ -54,11 +54,11 @@ $progress-bar-colors: (
 
     a {
       font-size: 1.5rem;
-      color: $text-color;
+      color: get-light-color('text-color');
       padding: 0.5rem;
 
       &:hover {
-        color: $accent-color;
+        color: get-light-color('accent-color');
         @include transition();
       }
     }
@@ -78,7 +78,7 @@ $progress-bar-colors: (
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      border: 12px solid $bg-primary;
+      border: 12px solid get-light-color('bg-primary');
       position: absolute;
       top: 0;
       left: 0;
@@ -130,9 +130,9 @@ $progress-bar-colors: (
       height: 90%;
       padding: 1rem;
       border-radius: 50%;
-      background: $text-color;
+      background: get-light-color('text-color');
       font-size: 1rem;
-      color: $bg-primary;
+      color: get-light-color('bg-primary');
       line-height: initial;
       text-align: center;
       position: absolute;
@@ -202,3 +202,28 @@ $progress-bar-colors: (
     }
   }
 }
+
+html[data-theme='dark'] {
+  .about-section {
+    .social-link {
+      a {
+        color: get-dark-color('text-color');
+
+        &:hover {
+          color: get-dark-color('accent-color');
+        }
+      }
+    }
+
+    .circular-progress {
+      &::after {
+        border: 12px solid get-dark-color('bg-primary');
+      }
+
+      .circular-progress-value {
+        background: get-dark-color('inverse-text-color');
+        color: get-dark-color('text-color');
+      }
+    }
+  }
+}

assets/styles/sections/accomplishments.scss

@@ -2,13 +2,13 @@
   @include section-title-adjustment();
 
   .card {
-    background: $bg-card;
+    background: get-light-color('bg-card');
-    border-top: 2px solid $accent-color;
+    border-top: 2px solid get-light-color('accent-color');
     height: 100%;
 
     &:hover,
     &:focus {
-      border-top: 2px solid $hover-over-accent-color;
+      border-top: 2px solid get-light-color('hover-over-accent-color');
     }
 
     .card-header {
@@ -16,7 +16,7 @@
       border: none;
 
       .sub-title {
-        color: $muted-text-color;
+        color: get-light-color('muted-text-color');
         margin-top: 0.4rem;
       }
     }
@@ -28,7 +28,7 @@
     }
 
     .card-footer {
-      background: $bg-card;
+      background: get-light-color('bg-card');
       border: none;
       padding: 0;
       padding-left: 0.7rem;
@@ -53,3 +53,26 @@
     max-width: 100%;
   }
 }
+
+html[data-theme='dark'] {
+  .accomplishments-section {
+    .card {
+      background: get-dark-color('bg-card');
+      border-top: 2px solid get-dark-color('accent-color');
+
+      &:hover,
+      &:focus {
+        border-top: 2px solid get-dark-color('hover-over-accent-color');
+      }
+
+      .card-header {
+        .sub-title {
+          color: get-dark-color('muted-text-color');
+        }
+      }
+      .card-footer {
+        background: get-dark-color('bg-card');
+      }
+    }
+  }
+}

assets/styles/sections/achievements.scss

@@ -12,7 +12,7 @@
       margin-left: 7px;
       margin-right: 7px;
       z-index: 1;
-      background-color: $bg-secondary;
+      background-color: get-light-color('bg-secondary');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
@@ -21,8 +21,8 @@
       @include transition();
 
       .title {
-        color: $inverse-text-color;
+        color: get-light-color('inverse-text-color');
-        background-color: rgba($bg-primary-inverse, 0.7);
+        background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
         opacity: 0;
         padding: 5px;
         position: absolute;
@@ -85,28 +85,28 @@
     }
 
     .svg-inline--fa {
-      color: $muted-text-color;
+      color: get-light-color('muted-text-color');
-      background-color: rgba($bg-primary-inverse, 0.7);
+      background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
       padding: 10px;
       font-size: 0rem;
       opacity: 0;
     }
     .caption {
-      background-color: rgba($bg-primary-inverse, 0.7);
+      background-color: rgba(get-light-color('bg-primary-inverse'), 0.7);
       bottom: 1rem;
       left: 1rem;
-      color: $inverse-text-color;
+      color: get-light-color('inverse-text-color');
       padding: 15px;
       position: absolute;
       @include transition();
 
       h4 {
-        color: $inverse-text-color;
+        color: get-light-color('inverse-text-color');
       }
       p {
         font-size: 16px;
         font-weight: 300;
-        color: $inverse-text-color;
+        color: get-light-color('inverse-text-color');
       }
     }
 
@@ -127,3 +127,33 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .achievements-section {
+    #gallery {
+      .achievement-entry {
+        background-color: get-dark-color('bg-secondary');
+
+        .title {
+          color: get-dark-color('inverse-text-color');
+          background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
+        }
+      }
+      .svg-inline--fa {
+        color: get-dark-color('muted-text-color');
+        background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
+      }
+      .caption {
+        background-color: rgba(get-dark-color('bg-primary-inverse'), 0.7);
+        color: get-dark-color('inverse-text-color');
+
+        h4 {
+          color: get-dark-color('inverse-text-color');
+        }
+        p {
+          color: get-dark-color('inverse-text-color');
+        }
+      }
+    }
+  }
+}

assets/styles/sections/education.scss

@@ -4,7 +4,7 @@
   .card {
     &:hover,
     &:focus {
-      border-left: 2px solid $accent-color;
+      border-left: 2px solid get-light-color('accent-color');
     }
   }
 
@@ -23,19 +23,19 @@
         position: absolute;
         left: 1rem;
         top: 0;
-        background-color: $accent-color;
+        background-color: get-light-color('accent-color');
         height: 100%;
         width: 2px;
       }
 
       .icon-holder {
-        background-color: $accent-color;
+        background-color: get-light-color('accent-color');
         border-radius: 50%;
         height: 2rem;
         width: 2rem;
         padding: 0.2rem;
         text-align: center;
-        color: $text-over-accent-color;
+        color: get-light-color('text-over-accent-color');
         position: relative;
       }
     }
@@ -43,14 +43,14 @@
     tr,
     th,
     td {
-      border: none;
+      border: none !important;
       padding: 0;
-      background: none;
+      background: none !important;
     }
 
     tr {
       &:hover {
-        background: none;
+        background: none !important;
       }
       &:first-child {
         .hline {
@@ -72,7 +72,7 @@
         div {
           height: 2px;
           margin-right: -1px;
-          background-color: $accent-color;
+          background-color: get-light-color('accent-color');
         }
       }
 
@@ -81,10 +81,10 @@
           padding: 1rem;
           margin-top: 0.5rem;
           margin-bottom: 0.5rem;
-          border-left: 2px solid $accent-color;
+          border-left: 2px solid get-light-color('accent-color');
-          border-top: 1px solid $bg-primary;
+          border-top: 1px solid get-light-color('bg-primary');
-          border-bottom: 1px solid $bg-primary;
+          border-bottom: 1px solid get-light-color('bg-primary');
-          border-right: 1px solid $bg-primary;
+          border-right: 1px solid get-light-color('bg-primary');
           border-radius: 5px;
 
           h5 {
@@ -92,7 +92,7 @@
           }
 
           .timeframe {
-            color: $muted-text-color;
+            color: get-light-color('muted-text-color');
             text-align: right;
           }
 
@@ -109,7 +109,7 @@
               th {
                 background: none;
                 border: none;
-                color: $text-color;
+                color: get-light-color('text-color');
               }
 
               tr {
@@ -167,5 +167,68 @@
 }
 
 .education-alt .degree-info {
-  border-right: 2px solid $accent-color;
+  border-right: 2px solid get-light-color('accent-color');
+}
+
+html[data-theme='dark'] {
+  .education-section {
+    .card {
+      &:hover,
+      &:focus {
+        border-left: 2px solid get-dark-color('accent-color');
+      }
+    }
+
+    .education-info-table {
+      .icon {
+        .hline {
+          background-color: get-dark-color('accent-color');
+        }
+
+        .icon-holder {
+          background-color: get-dark-color('accent-color');
+          color: get-dark-color('text-over-accent-color');
+        }
+      }
+      tr {
+        .line {
+          div {
+            background-color: get-dark-color('accent-color');
+          }
+        }
+
+        .details {
+          .degree-info {
+            border-left: 2px solid get-dark-color('accent-color');
+            border-top: 1px solid get-dark-color('bg-primary');
+            border-bottom: 1px solid get-dark-color('bg-primary');
+            border-right: 1px solid get-dark-color('bg-primary');
+
+            .timeframe {
+              color: get-dark-color('muted-text-color');
+            }
+
+            .taken-courses {
+              table {
+                tr,
+                td,
+                th {
+                  color: get-dark-color('text-color');
+                }
+              }
+            }
+
+            &:hover{
+              border: 1px solid rgba(get-dark-color('accent-color'),0.2);
+              border-left: 2px solid get-dark-color('accent-color');
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .education-alt .degree-info {
+    border-right: 2px solid get-dark-color('accent-color');
+  }
 }

assets/styles/sections/experiences.scss

@@ -7,7 +7,7 @@
     padding-left: 1rem;
     & > li {
       margin-left: 0;
-      color: $text-color;
+      color: get-light-color('text-color');
     }
   }
 
@@ -18,8 +18,8 @@
   .circle {
     padding: 13px 20px;
     border-radius: 50%;
-    background-color: $accent-color;
+    background-color: get-light-color('accent-color');
-    color: $text-over-accent-color;
+    color: get-light-color('text-over-accent-color');
     max-height: 50px;
     z-index: 2;
   }
@@ -33,7 +33,7 @@
       &::after {
         content: '';
         position: absolute;
-        border-left: 3px solid $accent-color;
+        border-left: 3px solid get-light-color('accent-color');
         z-index: 1;
         height: 100%;
         left: 50%;
@@ -48,7 +48,7 @@
         height: 40px;
       }
       hr {
-        border-top: 3px solid $accent-color;
+        border-top: 3px solid get-light-color('accent-color');
         margin: 0;
         top: 17px;
         position: relative;
@@ -58,7 +58,7 @@
         overflow: hidden;
       }
       .corner {
-        border: 3px solid $accent-color;
+        border: 3px solid get-light-color('accent-color');
         width: 100%;
         position: relative;
         border-radius: 15px;
@@ -113,3 +113,33 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .experiences-section {
+    ul {
+      & > li {
+        color: get-dark-color('text-color');
+      }
+    }
+    .circle {
+      background-color: get-dark-color('accent-color');
+      color: get-dark-color('text-over-accent-color');
+    }
+
+    .timeline {
+      .vertical-line {
+        &::after {
+          border-left: 3px solid get-dark-color('accent-color');
+        }
+      }
+      .horizontal-line {
+        hr {
+          border-top: 3px solid get-dark-color('accent-color');
+        }
+        .corner {
+          border: 3px solid get-dark-color('accent-color');
+        }
+      }
+    }
+  }
+}

assets/styles/sections/footer.scss

@@ -1,19 +1,19 @@
 .footer {
-  color: $muted-text-color !important;
+  color: get-light-color('muted-text-color') !important;
-  background-color: $bg-primary-inverse;
+  background-color: get-light-color('footer-color');
   position: relative;
   z-index: 9999;
 
   h5 {
-    color: $inverse-text-color;
+    color: get-light-color('inverse-text-color');
   }
 
   a {
-    color: $muted-text-color;
+    color: get-light-color('muted-text-color');
     @include transition();
     &:hover {
       margin-left: 5px;
-      text-decoration: $muted-text-color underline;
+      text-decoration: get-light-color('muted-text-color') underline;
       @include transition();
     }
   }
@@ -28,30 +28,30 @@
   }
 
   hr {
-    background-color: $muted-text-color;
+    background-color: get-light-color('muted-text-color');
   }
 
   p:first-child {
-    color: $inverse-text-color;
+    color: get-light-color('inverse-text-color');
   }
 
   input {
-    background-color: $inverse-text-color;
+    background-color: get-light-color('inverse-text-color');
     &:focus {
-      background-color: $bg-secondary;
+      background-color: get-light-color('bg-secondary');
     }
   }
 
   #disclaimer {
-    color: $muted-text-color !important;
+    color: get-light-color('muted-text-color') !important;
     text-align: justify;
     & > strong {
-      color: $inverse-text-color !important;
+      color: get-light-color('inverse-text-color') !important;
     }
   }
 
   #theme {
-    color: $inverse-text-color;
+    color: get-light-color('inverse-text-color');
     img {
       width: 32px;
       display: inline-block;
@@ -67,3 +67,46 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .footer {
+    color: get-dark-color('muted-text-color') !important;
+    background-color: get-dark-color('footer-color');
+    h5 {
+      color: get-dark-color('heading-color');
+    }
+
+    a {
+      color: get-dark-color('muted-text-color');
+      &:hover {
+        text-decoration: get-dark-color('muted-text-color') underline;
+      }
+    }
+
+    hr {
+      background-color: get-dark-color('muted-text-color');
+    }
+
+    p:first-child {
+      color: get-dark-color('muted-text-color');
+    }
+
+    input {
+      background-color: get-dark-color('bg-primary');
+      &:focus {
+        background-color: get-dark-color('bg-secondary');
+      }
+    }
+
+    #disclaimer {
+      color: get-dark-color('muted-text-color') !important;
+      & > strong {
+        color: get-dark-color('text-color') !important;
+      }
+    }
+
+    #theme {
+      color: get-dark-color('text-color');
+    }
+  }
+}

assets/styles/sections/home.scss

@@ -2,7 +2,7 @@
   height: 100vh;
   padding: 0;
   margin: 0;
-  color: $text-over-accent-color;
+  color: get-light-color('text-over-accent-color');
   overflow: hidden;
 
   .background {
@@ -44,19 +44,19 @@
   img {
     width: 148px;
     height: 148px;
-    background-color: $bg-secondary;
+    background-color: get-light-color('bg-secondary');
     padding: 5px;
     margin-bottom: 10px;
   }
 
   .greeting,
   .greeting-subtitle {
-    color: $text-over-accent-color;
+    color: get-light-color('text-over-accent-color');
   }
 
   .typing-carousel {
     font-size: 14pt;
-    color: $text-over-accent-color;
+    color: get-light-color('text-over-accent-color');
   }
 
   #typing-carousel-data {
@@ -65,7 +65,7 @@
 
   .arrow {
     position: absolute;
-    color: $text-over-accent-color;
+    color: get-light-color('text-over-accent-color');
     font-size: 1.5rem;
     bottom: 0;
   }
@@ -108,3 +108,24 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .home {
+    color: get-dark-color('text-over-accent-color');
+    img {
+      background-color: get-dark-color('bg-secondary');
+    }
+
+    .greeting,
+    .greeting-subtitle {
+      color: get-dark-color('text-over-accent-color');
+    }
+
+    .typing-carousel {
+      color: get-dark-color('text-over-accent-color');
+    }
+    .arrow {
+      color: get-dark-color('text-over-accent-color');
+    }
+  }
+}

assets/styles/sections/projects.scss

@@ -1,7 +1,7 @@
 .projects-section {
   .card {
     .card-header {
-      background-color: $bg-card;
+      background-color: get-light-color('bg-card');
       padding: 0.7rem;
       padding-bottom: 0rem;
       text-decoration: none;
@@ -10,7 +10,7 @@
         margin-right: 0.5rem;
       }
       .sub-title {
-        color: $muted-text-color;
+        color: get-light-color('muted-text-color');
         margin-top: 0.4rem;
 
         span {
@@ -81,3 +81,16 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .projects-section {
+    .card {
+      .card-header {
+        background-color: get-dark-color('bg-card');
+        .sub-title {
+          color: get-dark-color('muted-text-color');
+        }
+      }
+    }
+  }
+}

assets/styles/sections/publications.scss

@@ -2,12 +2,12 @@
   @include section-title-adjustment();
 
   .card {
-    background: $bg-card;
+    background: get-light-color('bg-card');
-    border-top: 2px solid $accent-color;
+    border-top: 2px solid get-light-color('accent-color');
 
     &:hover,
     &:focus {
-      border-top: 2px solid $accent-color;
+      border-top: 2px solid get-light-color('accent-color');
     }
 
     .card-header {
@@ -17,7 +17,7 @@
       flex-direction: column;
 
       .sub-title {
-        color: $muted-text-color;
+        color: get-light-color('muted-text-color');
         margin-top: 0.4rem;
 
         span:nth-child(2) {
@@ -33,7 +33,7 @@
     }
 
     .card-footer {
-      background: $bg-card;
+      background: get-light-color('bg-card');
       border: none;
       padding: 0;
       padding-left: 1rem;
@@ -106,3 +106,27 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .publications-section {
+    .card {
+      background: get-dark-color('bg-card');
+      border-top: 2px solid get-dark-color('accent-color');
+
+      &:hover,
+      &:focus {
+        border-top: 2px solid get-dark-color('accent-color');
+      }
+
+      .card-header {
+        .sub-title {
+          color: get-dark-color('muted-text-color');
+        }
+      }
+
+      .card-footer {
+        background: get-dark-color('bg-card');
+      }
+    }
+  }
+}

assets/styles/sections/skills.scss

@@ -5,12 +5,12 @@
     height: 100%;
 
     .card-head {
-      background-color: $bg-primary !important;
+      background-color: get-light-color('bg-primary') !important;
       height: -moz-fit-content;
       height: fit-content;
       padding: 0.7rem;
       padding-bottom: 0rem;
-      border-bottom: 0.0625rem solid rgba($accent-color, 0.4);
+      border-bottom: 0.0625rem solid rgba(get-light-color('accent-color'), 0.4);
 
       .card-img-xs {
         margin-right: 0.5rem;
@@ -33,3 +33,14 @@
     }
   }
 }
+
+html[data-theme='dark'] {
+  .skills-section {
+    .card {
+      .card-head {
+        background-color: get-dark-color('bg-card') !important;
+        border-bottom: 0.0625rem solid rgba(get-dark-color('accent-color'), 0.4);
+      }
+    }
+  }
+}

assets/styles/variables.scss

@@ -13,33 +13,76 @@ $breakpoints: (
 // Color are chosen from TailwindCSS color scheme
 // https://tailwindcss.com/docs/customizing-colors
 
-// accent-color
-$accent-color: #0891b2; // cyan 600
-$hover-over-accent-color: #06b6d4; // cyan 500
-$text-over-accent-color: #e4e4e7; // zinc 200
-
-// background-color
-$bg-primary: #f8fafc; // slate 50
-$bg-primary-inverse: #0f172a; // slate 900
-$bg-secondary: #e2e8f0; // slate 200
-$bg-card: #fff;
-
-// text-color
-$heading-color: #1e293b; // slate 800
-$text-color: #334155; // slate 700
-$inverse-text-color: #cbd5e1; // slate 300
-$muted-text-color: #64748b; // slate 500
-$inline-code-color: #dc2626; // red 600
-$highlight-color: #fde68a; // amber 200
-
 // transitions
 $transition-duration: 0.3s;
 $transition-type: ease-out;
 
 // borders and shadows
-$border-color: rgba($accent-color, 0.1);
 $box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
 
+// themes
+$themes: (
+  'light': (
+    // cyan 600
+    'accent-color': #0891b2,
+    // cyan 500
+    'hover-over-accent-color': #06b6d4,
+    // zinc 200
+    'text-over-accent-color': #e4e4e7,
+    // slate 50
+    'bg-primary': #f8fafc,
+    // slate 900
+    'bg-primary-inverse': #0f172a,
+    // slate 200
+    'bg-secondary': #e2e8f0,
+    'bg-card': #fff,
+    // slate 800
+    'heading-color': #1e293b,
+    // slate 700
+    'text-color': #334155,
+    // slate 300
+    'inverse-text-color': #cbd5e1,
+    // slate 500
+    'muted-text-color': #64748b,
+    // red 600
+    'inline-code-color': #dc2626,
+    // amber 200
+    'highlight-color': #fde68a,
+    // slate 900
+    'footer-color': #0f172a,
+  ),
+  'dark': (
+    // cyan 600
+    'accent-color': #0891b2,
+    // cyan 500
+    'hover-over-accent-color': #06b6d4,
+    // zinc 200
+    'text-over-accent-color': #e4e4e7,
+    // gray-800
+    'bg-primary': #1f2937,
+    // slate 900
+    'bg-primary-inverse': #0f172a,
+    // gray 900
+    'bg-secondary': #111827,
+    // slate 800
+    'bg-card': #1e293b,
+    // slate 100
+    'heading-color': #f1f5f9,
+    // slate 300
+    'text-color': #cbd5e1,
+    // slate 900
+    'inverse-text-color': #0f172a,
+    // slate 500
+    'muted-text-color': #64748b,
+    // red 600
+    'inline-code-color': #dc2626,
+    // amber 200
+    'highlight-color': #fde68a,
+    // slate 900
+    'footer-color': #0f172a,
+  ),
+);
+
 $brand-colors: (
   'facebook': #3b5998,
   'twitter': #1da1f2,

data/toha/styles.yml

@@ -8,12 +8,6 @@ videoplayer:
       styles:
       - plyr/dist/plyr
 
-darkmode:
-  services:
-    darkreader:
-      styles:
-      - ./colortheme/colortheme
-
 syntaxhighlight:
   services:
     hljs:

exampleSite/config.yaml

@@ -81,15 +81,6 @@ params:
     # Enable dark theme
     darkMode:
       enable: false
-      services:
-        darkreader:
-          defaultColorScheme: system # options are 'system', 'dark', 'light'
-          fixes:
-            invert: ['img[src$=".svg"]'] # inverts svg colors.
-          theme:
-            brightness: 100
-            contrast: 100
-            sepia: 0
 
     # Enable and configure portfolio
     portfolio:

layouts/_default/baseof.html

@@ -11,7 +11,17 @@
 
     <!--================= add analytics if enabled =========================-->
     {{- partial "analytics.html" . -}}
-
+    <script>
+      theme = localStorage.getItem('darkmode:color-scheme') || 'system';
+      if (theme == 'system') {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          theme = 'dark';
+        } else {
+          theme = 'light';
+        }
+      }
+      document.documentElement.setAttribute('data-theme', theme);
+    </script>
   </head>
 
   <body class="type-{{ .Page.Type }} kind-{{ .Page.Kind }}" data-spy="scroll" data-target="#TableOfContents" data-offset="80">

layouts/index.html

@@ -17,6 +17,17 @@
     
     <!--================= add analytics if enabled =========================-->
     {{- partial "analytics.html" . -}}
+    <script>
+      theme = localStorage.getItem('darkmode:color-scheme') || 'system';
+      if (theme == 'system') {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          theme = 'dark';
+        } else {
+          theme = 'light';
+        }
+      }
+      document.documentElement.setAttribute('data-theme', theme);
+    </script>
   </head>
   <body data-spy="scroll" data-target="#top-navbar" data-offset="100">
 

layouts/partials/helpers/get-esbuild-options.html

@@ -72,29 +72,12 @@ params:
     # The `darkMode` feature
     darkmode:
       enable: true
-      services:
-        # darkmode is realized by using DarkReader library
-        darkreader:
-          # options are 'system', 'dark', 'light'
-          defaultColorScheme: system
-          # For all available options, see `interface DynamicThemeFix`:
-          #   https://github.com/darkreader/darkreader/blob/main/index.d.ts#L125
-          fixes:
-            invert: ['img[src$=".svg"]'] # inverts svg colors.
-          # For all available options, see `interface Theme` in:
-          #   https://github.com/darkreader/darkreader/blob/main/index.d.ts#L45
-          theme:
-            brightness: 100
-            contrast: 100
-            sepia: 0
-```
 
 This helper will convert the above config into the following env vars:
 
   * `FEATURE_ANALYTICS=1`
   * `FEATURE_ANALYTICS_GOOGLE=1`
   * `FEATURE_DARKMODE=1`
-  * `FEATURE_DARKMODE_DARKREADER=1`
 
 In JS, you can use it like this:
 

layouts/partials/navigators/theme-selector.html

@@ -1,17 +1,17 @@
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-  <img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
+  <img id="navbar-theme-icon-svg" class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
 </a>
 <div id="themeMenu" class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
   <a class="dropdown-item nav-link" href="#" data-scheme="light">
-    <img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
+    <img class="theme-icon" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
   </a>
   <a class="dropdown-item nav-link" href="#" data-scheme="dark">
-    <img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
+    <img class="theme-icon" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
   </a>
   <a class="dropdown-item nav-link" href="#" data-scheme="system">
-    <img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
+    <img class="theme-icon" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
   </a>
 </div>
 </li>

package-lock.json

@@ -13,7 +13,6 @@
         "@fortawesome/fontawesome-free": "^6.2.0",
         "autoprefixer": "^10.4.13",
         "bootstrap": "^4.6.2",
-        "darkreader": "^4.9.58",
         "eslint": "^8.31.0",
         "eslint-config-prettier": "^8.6.0",
         "eslint-config-standard": "^17.0.0",
@@ -1013,16 +1012,6 @@
         "lodash-es": "^4.17.21"
       }
     },
-    "node_modules/darkreader": {
-      "version": "4.9.58",
-      "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
-      "integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/darkreader/donate"
-      }
-    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4543,12 +4532,6 @@
         "lodash-es": "^4.17.21"
       }
     },
-    "darkreader": {
-      "version": "4.9.58",
-      "resolved": "https://registry.npmjs.org/darkreader/-/darkreader-4.9.58.tgz",
-      "integrity": "sha512-D/JGoJqW3m2AWBLhO+Pev+eThfs+CwRT4bcLb/1zKjql2yVwG0lx8C2XRDdSVGHw4y11n26W7syWoBpUfuhMqQ==",
-      "dev": true
-    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.hugo.json

@@ -32,7 +32,6 @@
     "@fontsource/mulish": "4.5.13",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "bootstrap": "^4.6.2",
-    "darkreader": "^4.9.58",
     "filterizr": "^2.2.4",
     "flag-icon-css": "^4.1.7",
     "fuse.js": "^6.6.2",

package.json

@@ -10,7 +10,6 @@
       "@fortawesome/fontawesome-free": "project",
       "autoprefixer": "project",
       "bootstrap": "project",
-      "darkreader": "project",
       "eslint": "project",
       "eslint-config-prettier": "project",
       "eslint-config-standard": "project",
@@ -42,7 +41,6 @@
     "@fortawesome/fontawesome-free": "^6.2.0",
     "autoprefixer": "^10.4.13",
     "bootstrap": "^4.6.2",
-    "darkreader": "^4.9.58",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-standard": "^17.0.0",