feat: Use the theme flavor configured in the browser (#226)

* Use the theme flavor configured in the browser
* refactor header-theme.js file

Cover
#128

src/js/header-01-theme.js

@@ -1,74 +1,44 @@
 /* eslint-disable no-undef */
-/* eslint-disable no-unused-vars */
+// Need to be on top of the file to avoid the flash after the content loaded
+document.querySelector('html').setAttribute('data-theme', isDarkTheme() ? 'dark' : 'light')
 
-function toDarkTheme (resolve) {
-  localStorage.setItem('theme', 'dark')
-  document.querySelector('html').setAttribute('data-theme', 'dark')
-
-  // Update highlight js theme
-  enableHightLightDarkTheme(true)
-  // Promise.resolve if existing
-  resolve && resolve()
-}
-
-function toLightTheme (resolve) {
-  localStorage.setItem('theme', 'light')
-  document.querySelector('html').setAttribute('data-theme', 'light')
-
-  // Update highlight js theme
-  enableHightLightDarkTheme(false)
-  // Promise.resolve if existing
-  resolve && resolve()
-}
-
-// Update highlight js to dark theme if dark = true
-function enableHightLightDarkTheme (dark) {
-  var hljsCssLink = document.getElementById('highlight-style-lnk')
-  if (hljsCssLink) {
-    var currentHref = hljsCssLink.getAttribute('href')
-    var cssHref = currentHref.replace('-dark', '-light')
-    if (dark) {
-      cssHref = currentHref.replace('-light', '-dark')
-    }
-    hljsCssLink.setAttribute('href', cssHref)
-  } else {
-    console.log('Failed to find highlight-style-lnk css link element in page, can not swap theme')
-  }
+// Check if user has set a theme preference in localStorage or in browser preferences
+function isDarkTheme () {
+  const localThemeSetting = localStorage.getItem('theme')
+  return !localThemeSetting
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+    : localThemeSetting === 'dark'
 }
 
-function performThemeSwitch (checkbox, switchBall) {
-  setTimeout(function () {
-    const themeSwitchPromise = new Promise((resolve) => {
-      if (checkbox.checked) {
-        toDarkTheme(resolve)
+document.addEventListener('DOMContentLoaded', () => {
+  function updateTheme (isDarkTheme) {
+    // Switch  HighlightJs to theme
+    function enableHighLightJsTheme (isDarkTheme) {
+      const hljsCssLink = document.getElementById('highlight-style-lnk')
+      if (hljsCssLink) {
+        const currentHref = hljsCssLink.getAttribute('href')
+        let cssHref = currentHref.replace('-dark', '-light')
+        if (isDarkTheme) {
+          cssHref = currentHref.replace('-light', '-dark')
+        }
+        hljsCssLink.setAttribute('href', cssHref)
       } else {
-        toLightTheme(resolve)
+        console.log('Failed to find highlight-style-lnk css link element in page, can not swap theme')
       }
-    })
-
-    themeSwitchPromise.finally(function () {
-      switchBall.innerHTML = ''
-    })
-  }, 100)
-}
+    }
+    document.querySelector('html').setAttribute('data-theme', isDarkTheme ? 'dark' : 'light')
+    enableHighLightJsTheme(isDarkTheme)
+  }
 
-// create the loader div
-const loader = document.createElement('div')
-loader.classList.add('lds-dual-ring')
+  const checkboxTheme = document.getElementById('theme-switch')
 
-function toggleDarkThemeMode (checkbox) {
-  const switchBall = document.querySelector('.theme-switch-wrapper .toggle-content .label .ball')
-  switchBall.appendChild(loader)
-  performThemeSwitch(checkbox, switchBall)
-}
+  checkboxTheme.addEventListener('change', (event) => {
+    const isDarkTheme = event.currentTarget.checked
+    localStorage.setItem('theme', isDarkTheme ? 'dark' : 'light')
+    updateTheme(isDarkTheme)
+  })
 
-function isDarkTheme () {
-  return localStorage.getItem('theme') === 'dark' ? 'checked' : 'unchecked'
-}
-
-// init
-if (localStorage.getItem('theme') === 'dark') {
-  toDarkTheme()
-} else {
-  toLightTheme()
-}
+  const darkThemeChecked = isDarkTheme()
+  updateTheme(darkThemeChecked)
+  checkboxTheme.checked = darkThemeChecked
+})

src/partials/footer-scripts.hbs

@@ -35,16 +35,3 @@
 });
 
 </script>
-<script>
-  // init toggle state
-  const isDarkThemeEnable = localStorage.getItem('theme') === 'dark';
-  initializeThemeToggleIfAvailable('check', isDarkThemeEnable);
-  initializeThemeToggleIfAvailable('check-mobile', isDarkThemeEnable);
-
-  function initializeThemeToggleIfAvailable(elementId, checked) {
-    const checkElement = document.getElementById(elementId);
-    if(checkElement) {
-      checkElement.checked = checked;
-    }
-  }
-</script>

src/partials/header-content.hbs

@@ -30,9 +30,9 @@
       {{/if}}
 
       <div class="theme-switch-wrapper">
-        <input type="checkbox" class="checkbox" onclick="toggleDarkThemeMode(this)" id="check">
+        <input type="checkbox" class="checkbox" id="theme-switch">
         <div class="toggle-content">
-          <label class="label" for="check">
+          <label class="label" for="theme-switch">
             <span>🌜</span>
             <span>🌞</span>
             <div class="ball"></div>

src/stylesheets/site.scss

@@ -16,6 +16,5 @@
 @import "print.scss";
 @import "components/cards";
 @import "search.scss";
-@import "loader.scss";
 @import "components/troubleshooting.scss";
 @import "components/colors.scss";