UI - Fixing darkmode switch icon

changedetectionio/static/styles/scss/parts/_darkmode.scss

@@ -0,0 +1,25 @@
+
+#toggle-light-mode {
+  width: 3rem;
+  /* default */
+  .icon-dark {
+    display: none;
+  }
+
+}
+
+html[data-darkmode="true"] {
+  #toggle-light-mode {
+    .icon-light {
+      display: none;
+    }
+
+    .icon-dark {
+      display: block;
+    }
+  }
+}
+
+
+
+

changedetectionio/static/styles/scss/styles.scss

@@ -8,6 +8,7 @@
 @import "parts/_pagination";
 @import "parts/_spinners";
 @import "parts/_variables";
+@import "parts/_darkmode";
 
 body {
   color: var(--color-text);
@@ -54,22 +55,6 @@ a.github-link {
   }
 }
 
-#toggle-light-mode {
-  width: 3rem;
-  .icon-dark {
-    display: none;
-  }
-
-  &.dark {
-    .icon-light {
-      display: none;
-    }
-
-    .icon-dark {
-      display: block;
-    }
-  }
-}
 
 #toggle-search {
   width: 2rem;

changedetectionio/static/styles/styles.css

@@ -316,6 +316,18 @@ html[data-darkmode="true"] {
     html[data-darkmode="true"] .watch-table .unviewed.error {
       color: var(--color-watch-table-error); }
 
+#toggle-light-mode {
+  width: 3rem;
+  /* default */ }
+  #toggle-light-mode .icon-dark {
+    display: none; }
+
+html[data-darkmode="true"] #toggle-light-mode .icon-light {
+  display: none; }
+
+html[data-darkmode="true"] #toggle-light-mode .icon-dark {
+  display: block; }
+
 body {
   color: var(--color-text);
   background: var(--color-background-page); }
@@ -350,15 +362,6 @@ a.github-link {
   a.github-link:hover {
     color: var(--color-icon-github-hover); }
 
-#toggle-light-mode {
-  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; }