UI - Fixes to dark mode toggle (#1629)

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) {
+    setCookieValue(!isDarkMode);
-      button.classList.remove("dark");
-      setCookieValue(false);
-    } else {
-      button.classList.add("dark");
-      setCookieValue(true);
-    }
   };
 
   const setCookieValue = (value) => {

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; }

changedetectionio/templates/base.html

@@ -93,10 +93,7 @@
             </form>
           </li>
           <li class="pure-menu-item">
-            {% if dark_mode %}
+            <button class="toggle-button" id ="toggle-light-mode" type="button" title="Toggle Light/Dark Mode">
-            {% set darkClass = 'dark' %}
-            {% endif %}
-            <button class="toggle-button {{darkClass}}"  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" %}