Dark mode - make watch list easier to read when theres 'unviewed' entries

changedetectionio/static/styles/diff.css

@@ -87,7 +87,8 @@
   --color-shadow-jump: var(--color-grey-500);
   --color-icon-github: var(--color-black);
   --color-icon-github-hover: var(--color-grey-300);
-  --color-watch-table-error: var(--color-dark-red); }
+  --color-watch-table-error: var(--color-dark-red);
+  --color-watch-table-row-text: var(--color-grey-100); }
 
 html[data-darkmode="true"] {
   --color-link: #59bdfb;
@@ -118,9 +119,12 @@ html[data-darkmode="true"] {
   --color-shadow-jump: var(--color-grey-200);
   --color-icon-github: var(--color-white);
   --color-icon-github-hover: var(--color-grey-700);
-  --color-watch-table-error: var(--color-light-red); }
+  --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"] .icon-spread {
     filter: hue-rotate(-10deg) brightness(1.5); }
   html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,

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

@@ -100,6 +100,7 @@
   --color-icon-github-hover: var(--color-grey-300);
 
   --color-watch-table-error: var(--color-dark-red);
+  --color-watch-table-row-text: var(--color-grey-100);
 }
 
 html[data-darkmode="true"] {
@@ -127,7 +128,6 @@ html[data-darkmode="true"] {
   --color-text-input-description: var(--color-grey-600);
   --color-text-input-placeholder: var(--color-grey-600);
   --color-text-watch-tag-list: #fa3e92;
-
   --color-background-code: var(--color-grey-200);
 
   --color-background-tab: rgba(0, 0, 0, 0.2);
@@ -138,6 +138,7 @@ html[data-darkmode="true"] {
   --color-icon-github: var(--color-white);
   --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);
 
   // Anything that can't be manipulated through variables follows.
   .watch-controls {
@@ -145,7 +146,9 @@ html[data-darkmode="true"] {
       opacity: 0.4;
     }
   }
-
+  .watch-table .unviewed {
+    color: #fff;
+  }
   .icon-spread {
     filter: hue-rotate(-10deg) brightness(1.5);
   }

changedetectionio/static/styles/scss/styles.scss

@@ -121,10 +121,14 @@ code {
   width: 100%;
   font-size: 80%;
 
-  tr.unviewed {
+  tr {
-    font-weight: bold;
+    &.unviewed {
+      font-weight: bold;
+    }
+    color: var(--color-watch-table-row-text);
   }
 
+
   .error {
     color: var(--color-watch-table-error);
   }

changedetectionio/static/styles/styles.css

@@ -90,7 +90,8 @@
   --color-shadow-jump: var(--color-grey-500);
   --color-icon-github: var(--color-black);
   --color-icon-github-hover: var(--color-grey-300);
-  --color-watch-table-error: var(--color-dark-red); }
+  --color-watch-table-error: var(--color-dark-red);
+  --color-watch-table-row-text: var(--color-grey-100); }
 
 html[data-darkmode="true"] {
   --color-link: #59bdfb;
@@ -121,9 +122,12 @@ html[data-darkmode="true"] {
   --color-shadow-jump: var(--color-grey-200);
   --color-icon-github: var(--color-white);
   --color-icon-github-hover: var(--color-grey-700);
-  --color-watch-table-error: var(--color-light-red); }
+  --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"] .icon-spread {
     filter: hue-rotate(-10deg) brightness(1.5); }
   html[data-darkmode="true"] .watch-table .title-col a[target="_blank"]::after,
@@ -335,8 +339,10 @@ code {
 .watch-table {
   width: 100%;
   font-size: 80%; }
-  .watch-table tr.unviewed {
+  .watch-table tr {
-    font-weight: bold; }
+    color: var(--color-watch-table-row-text); }
+    .watch-table tr.unviewed {
+      font-weight: bold; }
   .watch-table .error {
     color: var(--color-watch-table-error); }
   .watch-table td {