From 5816cb7a4519bcdf48f548f9fd16ac2282498fb5 Mon Sep 17 00:00:00 2001
From: alexanderdavide <alexeble1998@gmail.com>
Date: Sun, 13 Feb 2022 21:13:52 +0000
Subject: [PATCH] refactor: modernize and streamline js

---
 assets/js/anatole-theme-switcher.js |   97 +++++++++++++++++++++---------------------------
 1 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
index ae81039..7da3f46 100644
--- a/assets/js/anatole-theme-switcher.js
+++ b/assets/js/anatole-theme-switcher.js
@@ -1,74 +1,61 @@
-// initialize default value
-function getTheme() {
-  return localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
-}
+const getStoredThemeStyle = () => localStorage.getItem('theme');
 
-function setTheme(style) {
+const setThemeClass = (style) => {
+  const body = document.body;
+  const prevTheme = [...body.classList].find((c) => c.match(/theme--(light|dark)/));
+  if (!prevTheme) return;
+  body.classList.remove(prevTheme);
+  body.classList.add(`theme--${style}`);
+};
+
+const setThemeStyle = (style) => {
   document.documentElement.setAttribute('data-theme', style);
   localStorage.setItem('theme', style);
-  setCssClass(style);
-}
+  setThemeClass(style);
+};
 
-function init() {
-  // initialize default value
-  const theme = getTheme();
+const switchTheme = () => {
+  const currThemeStyle = getStoredThemeStyle();
+  switch (currThemeStyle) {
+    case 'light':
+      setThemeStyle('dark');
+      break;
+    case 'dark':
+      setThemeStyle('light');
+      break;
+    default:
+      setThemeStyle('light');
+      break;
+  }
+};
 
-  // check if a preferred color theme is set for users that have never been to our site
+const initTheme = () => {
+  const currThemeStyle = getStoredThemeStyle();
   const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-  if (theme === null) {
-    if (userPrefersDark) {
-      setTheme('dark');
-    } else if (!document.documentElement.getAttribute('data-theme')) {
-      setTheme('light');
-    } else {
-      setTheme(document.documentElement.getAttribute('data-theme'));
-    }
+
+  if (currThemeStyle) {
+    document.documentElement.setAttribute('data-theme', currThemeStyle);
+    setThemeClass(currThemeStyle);
+    return;
+  }
+  if (userPrefersDark) {
+    setThemeStyle('dark');
+  } else if (!document.documentElement.getAttribute('data-theme')) {
+    setThemeStyle('light');
   } else {
-    // load a stored theme
-    if (theme === 'light') {
-      document.documentElement.setAttribute('data-theme', 'light');
-      setCssClass('light');
-    } else {
-      document.documentElement.setAttribute('data-theme', 'dark');
-      setCssClass('dark');
-    }
+    setThemeStyle(document.documentElement.getAttribute('data-theme'));
   }
-}
+};
 
-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();
-  if (theme === 'light') {
-    setTheme('dark');
-  } else {
-    setTheme('light');
-  }
-}
-
-// Manual Switch
 document.addEventListener(
   'DOMContentLoaded',
-  function () {
+  () => {
     const themeSwitcher = document.querySelector('.themeswitch');
     themeSwitcher.addEventListener('click', switchTheme, false);
   },
   false,
 );
 
-// Automatic Switching
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
 
-document.addEventListener('DOMContentLoaded', function () {
-  init();
-});
+document.addEventListener('DOMContentLoaded', () => initTheme());

--
Gitblit v1.10.0