From 534432aa947e6573dbf725490c076b13606f50ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Avijit=20=F0=9F=9A=80?= <526avijit@gmail.com>
Date: Wed, 4 Aug 2021 23:23:48 +0200
Subject: [PATCH] Fix theme toggle on phone

---
 themes/gokarna/layouts/partials/header.html |  6 +++---
 themes/gokarna/static/css/dark.css          |  2 +-
 themes/gokarna/static/js/main.js            | 19 +++++++++++--------
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/themes/gokarna/layouts/partials/header.html b/themes/gokarna/layouts/partials/header.html
index 574440d..c09fcf7 100644
--- a/themes/gokarna/layouts/partials/header.html
+++ b/themes/gokarna/layouts/partials/header.html
@@ -23,7 +23,7 @@
             {{ end }}
 
             <span class="nav-icons-divider"></span>
-            <div class="nav-link" id="dark-theme-toggle">
+            <div class="nav-link dark-theme-toggle">
                 <a>
                     <span id="theme-toggle-icon" data-feather="moon"></span>
                 </a>
@@ -44,8 +44,8 @@
                     </a>
                 </li>
                 {{ end }}
-                <li class="nav-item">
-                    <a id="dark-theme-toggle">
+                <li class="nav-item dark-theme-toggle">
+                    <a>
                         <span id="theme-toggle-icon" data-feather="moon"></span>
                     </a>
                 </li>
diff --git a/themes/gokarna/static/css/dark.css b/themes/gokarna/static/css/dark.css
index 02a4d25..cb9d8ca 100644
--- a/themes/gokarna/static/css/dark.css
+++ b/themes/gokarna/static/css/dark.css
@@ -11,7 +11,7 @@ html {
 }
 
 .header {
-  background-color: rgb(var(--dark-bg-color));
+  background-color: rgba(var(--dark-bg-color), 0.95);
 }
 
 .nav-hamburger-list {
diff --git a/themes/gokarna/static/js/main.js b/themes/gokarna/static/js/main.js
index 97dee73..7cb5478 100644
--- a/themes/gokarna/static/js/main.js
+++ b/themes/gokarna/static/js/main.js
@@ -14,15 +14,16 @@ function ready() {
 
     const savedTheme = localStorage.getItem(THEME_PREF_STORAGE_KEY) || 
         (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark': 'light');
-    setTheme(savedTheme);
-    document.getElementById('dark-theme-toggle').addEventListener('click', () => {
-        toggleIcon = document.querySelector("#dark-theme-toggle a svg.feather");
+    const darkThemeToggles = document.querySelectorAll('.dark-theme-toggle');
+    setTheme(savedTheme, darkThemeToggles);
+    darkThemeToggles.forEach(el => el.addEventListener('click', (event) => {
+        toggleIcon = event.currentTarget.querySelector("a svg.feather");
         if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.dark) {
-            setTheme('light');
+            setTheme('light', [event.currentTarget]);
         } else if (toggleIcon.classList[1] === THEME_TO_ICON_CLASS.light) {
-            setTheme('dark');
+            setTheme('dark', [event.currentTarget]);
         }
-    });
+    }));
 
     document.getElementById('hamburger-menu-toggle').addEventListener('click', () => {
         const hamburgerMenu = document.getElementsByClassName('nav-hamburger-list')[0]
@@ -47,9 +48,11 @@ window.addEventListener('scroll', () => {
 });
 
 
-function setTheme(themeToSet) {
+function setTheme(themeToSet, targets) {
     localStorage.setItem(THEME_PREF_STORAGE_KEY, themeToSet);
     darkThemeCss.disabled = themeToSet === 'light';
-    document.querySelector('#dark-theme-toggle a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg();
+    targets.forEach((target) => {
+            target.querySelector('a').innerHTML = feather.icons[THEME_TO_ICON_CLASS[themeToSet].split('-')[1]].toSvg();
+    });
 }