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 () {
-  if (process.env.FEATURE_DARKMODE_DARKREADER === '1') {
-    return await import('./darkreader')
-  }
-
-  throw Error(' No service defined for feature darkMode.')
-}
-
-window.addEventListener('DOMContentLoaded', async () => {
+window.addEventListener('load', 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 () {
-    return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme
+  function loadScheme() {
+    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') {
-      setSchemeDark()
-    } else if (newScheme === 'system') {
-      setSchemeSystem()
-    } else {
-      setSchemeLight()
-    }
-
+    // save preference to local storage
     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) {