migrated darkMode feature to js bundle

assets/scripts/features/darkmode/index.js

@@ -0,0 +1,58 @@
+const PERSISTENCE_KEY = 'darkmode:color-scheme';
+
+async function getService() {
+  if(process.env.FEATURE_DARKMODE_DARKREADER) {
+    return await import('./darkreader');
+  }
+}
+
+window.addEventListener('DOMContentLoaded', async () => {
+  const $menu = document.getElementById('themeMenu');
+  const $icon = document.getElementById('navbar-theme-icon-svg');
+  if ($menu == null || $icon == null) return;
+
+  const $btns = $menu.getElementsByTagName('a');
+  const iconMap = Array.from($btns).reduce((map, $btn) => {
+    $img = $btn.getElementsByTagName('img')[0];
+    map[$btn.dataset.scheme] = $img.src;
+    return map;
+  }, {});
+
+  const {
+    setSchemeDark,
+    setSchemeLight,
+    setSchemeSystem,
+    defaultColorScheme,
+  } = await getService();
+
+  function loadScheme() {
+    return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme;
+  }
+  
+  function saveScheme(scheme) {
+    localStorage.setItem(PERSISTENCE_KEY, scheme);
+  }
+  
+  function setScheme(newScheme) {
+    $icon.src = iconMap[newScheme];  
+
+    if (newScheme === 'dark') {
+      setSchemeDark();
+    } else if (newScheme === 'system') {
+      setSchemeSystem();
+    } else {
+      setSchemeLight();
+    }
+  
+    saveScheme(newScheme);
+  }
+
+  setScheme(loadScheme());
+
+  Array.from($menu.getElementsByTagName('a')).forEach(($btn) => {
+    $btn.addEventListener('click', () => {
+      const { scheme } = $btn.dataset;
+      setScheme(scheme);
+    });
+  });
+});