add favicons with theme support

webtor-io · Sep 29, 2024 · 6d5f4e1 · 6d5f4e1
1 parent 9943c5a
commit 6d5f4e1
Show file tree

Hide file tree

Showing 8 changed files with 1,734 additions and 25 deletions.
diff --git a/assets/src/images/logo-lofi.svg b/assets/src/images/logo-lofi.svg
diff --git a/assets/src/images/logo-night.svg b/assets/src/images/logo-night.svg
diff --git a/assets/src/images/logo.svg b/assets/src/images/logo.svg
diff --git a/assets/src/js/lib/themeSelector.js b/assets/src/js/lib/themeSelector.js
@@ -2,6 +2,12 @@ const storageKey = 'theme';
 function getThemes(themeSelector) {
     return themeSelector.getAttribute('data-toggle-theme').split(',').map((t) => t.trim());
 }
+function changeFavicons(current) {
+    const els = document.querySelectorAll('link[rel~="icon"]')
+    for (const el of els) {
+        el.href = el.href.replace(/\w+\/favicon/, `${current}/favicon`);
+    }
+}
 export function initTheme(themeSelector) {
     const [darkTheme, lightTheme] = getThemes(themeSelector);
     let currentTheme = window.localStorage.getItem(storageKey);
@@ -11,7 +17,10 @@ export function initTheme(themeSelector) {
             currentTheme = lightTheme;
         }
     }
-    if (currentTheme === lightTheme) themeSelector.checked = true;
+    if (currentTheme === lightTheme) {
+        themeSelector.checked = true;
+        changeFavicons(currentTheme);
+    }
     document.querySelector('html').setAttribute('data-theme', currentTheme);
     window.localStorage.setItem(storageKey, currentTheme);
 }
@@ -22,6 +31,7 @@ export function themeSelector(themeSelector) {
     themeSelector.addEventListener('change', (e) => {
         currentTheme = e.target.checked ? lightTheme : darkTheme;
         document.querySelector('html').setAttribute('data-theme', currentTheme);
+        changeFavicons(currentTheme);
         window.localStorage.setItem(storageKey, currentTheme);
     });
 }