Darkmode - Pause/Mute notification colour fix, re #1195

changedetectionio/static/styles/diff.css

@@ -121,17 +121,19 @@ 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"] .watch-controls img {
-    opacity: 0.4; }
-  html[data-darkmode="true"] .watch-table .unviewed {
-    color: #fff; }
-    html[data-darkmode="true"] .watch-table .unviewed.error {
-      color: var(--color-watch-table-error); }
   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,
   html[data-darkmode="true"] .watch-table .current-diff-url::after {
     filter: invert(0.5) hue-rotate(10deg) brightness(2); }
+  html[data-darkmode="true"] .watch-table .watch-controls .state-off img {
+    opacity: 0.3; }
+  html[data-darkmode="true"] .watch-table .watch-controls .state-on img {
+    opacity: 1.0; }
+  html[data-darkmode="true"] .watch-table .unviewed {
+    color: #fff; }
+    html[data-darkmode="true"] .watch-table .unviewed.error {
+      color: var(--color-watch-table-error); }
 
 #diff-ui {
   background: var(--color-background);

changedetectionio/static/styles/scss/parts/_variables.scss

@@ -140,18 +140,6 @@ html[data-darkmode="true"] {
   --color-watch-table-error: var(--color-light-red);
   --color-watch-table-row-text: var(--color-grey-800);
 
-  // Anything that can't be manipulated through variables follows.
-  .watch-controls {
-    img {
-      opacity: 0.4;
-    }
-  }
-  .watch-table .unviewed {
-    color: #fff;
-    &.error {
-      color: var(--color-watch-table-error);
-    }
-  }
 
   .icon-spread {
     filter: hue-rotate(-10deg) brightness(1.5);
@@ -163,5 +151,25 @@ html[data-darkmode="true"] {
     .current-diff-url::after {
       filter: invert(.5) hue-rotate(10deg) brightness(2);
     }
+
+    .watch-controls {
+      .state-off {
+        img {
+          opacity: 0.3;
+        }
+      }
+      .state-on {
+        img {
+          opacity: 1.0;
+        }
+      }
+    }
+
+    .unviewed {
+      color: #fff;
+      &.error {
+        color: var(--color-watch-table-error);
+      }
+    }
   }
 }

changedetectionio/static/styles/styles.css

@@ -124,17 +124,19 @@ 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"] .watch-controls img {
-    opacity: 0.4; }
-  html[data-darkmode="true"] .watch-table .unviewed {
-    color: #fff; }
-    html[data-darkmode="true"] .watch-table .unviewed.error {
-      color: var(--color-watch-table-error); }
   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,
   html[data-darkmode="true"] .watch-table .current-diff-url::after {
     filter: invert(0.5) hue-rotate(10deg) brightness(2); }
+  html[data-darkmode="true"] .watch-table .watch-controls .state-off img {
+    opacity: 0.3; }
+  html[data-darkmode="true"] .watch-table .watch-controls .state-on img {
+    opacity: 1.0; }
+  html[data-darkmode="true"] .watch-table .unviewed {
+    color: #fff; }
+    html[data-darkmode="true"] .watch-table .unviewed.error {
+      color: var(--color-watch-table-error); }
 
 /* spinner */
 .spinner,