From 72311fb845b9ad9a0aa336c083340238caf076e5 Mon Sep 17 00:00:00 2001
From: Raymond Ha <raymond@shraymonks.com>
Date: Sat, 17 Jun 2023 15:04:04 -0700
Subject: [PATCH] UI - Fixes to dark mode toggle (#1629)

---
 changedetectionio/static/js/toggle-theme.js | 8 +-------
 changedetectionio/static/styles/styles.css  | 8 ++++----
 changedetectionio/templates/base.html       | 5 +----
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/changedetectionio/static/js/toggle-theme.js b/changedetectionio/static/js/toggle-theme.js
index 218fdd0c..885b8907 100644
--- a/changedetectionio/static/js/toggle-theme.js
+++ b/changedetectionio/static/js/toggle-theme.js
@@ -9,13 +9,7 @@ $(document).ready(function () {
     const htmlElement = document.getElementsByTagName("html");
     const isDarkMode = htmlElement[0].dataset.darkmode === "true";
     htmlElement[0].dataset.darkmode = !isDarkMode;
-    if (isDarkMode) {
-      button.classList.remove("dark");
-      setCookieValue(false);
-    } else {
-      button.classList.add("dark");
-      setCookieValue(true);
-    }
+    setCookieValue(!isDarkMode);
   };
 
   const setCookieValue = (value) => {
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index e6d866e0..e4c5636c 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -283,6 +283,10 @@ html[data-darkmode="true"] {
   --color-icon-github-hover: var(--color-grey-700);
   --color-watch-table-error: var(--color-light-red);
   --color-watch-table-row-text: var(--color-grey-800); }
+  html[data-darkmode="true"] #toggle-light-mode .icon-light {
+    display: none; }
+  html[data-darkmode="true"] #toggle-light-mode .icon-dark {
+    display: block; }
   html[data-darkmode="true"] .icon-spread {
     filter: hue-rotate(-10deg) brightness(1.5); }
   html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,
@@ -335,10 +339,6 @@ a.github-link {
   width: 3rem; }
   #toggle-light-mode .icon-dark {
     display: none; }
-  #toggle-light-mode.dark .icon-light {
-    display: none; }
-  #toggle-light-mode.dark .icon-dark {
-    display: block; }
 
 #toggle-search {
   width: 2rem; }
diff --git a/changedetectionio/templates/base.html b/changedetectionio/templates/base.html
index 30ea733d..f0044362 100644
--- a/changedetectionio/templates/base.html
+++ b/changedetectionio/templates/base.html
@@ -93,10 +93,7 @@
             </form>
           </li>
           <li class="pure-menu-item">
-            {% if dark_mode %}
-            {% set darkClass = 'dark' %}
-            {% endif %}
-            <button class="toggle-button {{darkClass}}"  id ="toggle-light-mode" type="button" title="Toggle Light/Dark Mode">
+            <button class="toggle-button" id ="toggle-light-mode" type="button" title="Toggle Light/Dark Mode">
               <span class="visually-hidden">Toggle light/dark mode</span>
               <span class="icon-light">
                 {% include "svgs/light-mode-toggle-icon.svg" %}