From 7b94ba6f23617fb1a7bb230b0a98b9348c941fb4 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Mon, 5 Dec 2022 15:13:47 +0100
Subject: [PATCH] Dark mode - make watch list easier to read when theres
 'unviewed' entries

---
 changedetectionio/static/styles/diff.css           |  8 ++++++--
 .../static/styles/scss/parts/_variables.scss       |  7 +++++--
 changedetectionio/static/styles/scss/styles.scss   |  8 ++++++--
 changedetectionio/static/styles/styles.css         | 14 ++++++++++----
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/changedetectionio/static/styles/diff.css b/changedetectionio/static/styles/diff.css
index 8663c147..ec019a7f 100644
--- a/changedetectionio/static/styles/diff.css
+++ b/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,
diff --git a/changedetectionio/static/styles/scss/parts/_variables.scss b/changedetectionio/static/styles/scss/parts/_variables.scss
index 983debd2..bccac914 100644
--- a/changedetectionio/static/styles/scss/parts/_variables.scss
+++ b/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);
   }
diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss
index 65b09971..ebedf2da 100644
--- a/changedetectionio/static/styles/scss/styles.scss
+++ b/changedetectionio/static/styles/scss/styles.scss
@@ -121,10 +121,14 @@ code {
   width: 100%;
   font-size: 80%;
 
-  tr.unviewed {
-    font-weight: bold;
+  tr {
+    &.unviewed {
+      font-weight: bold;
+    }
+    color: var(--color-watch-table-row-text);
   }
 
+
   .error {
     color: var(--color-watch-table-error);
   }
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index 37877828..949ad0a3 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/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 {
-    font-weight: bold; }
+  .watch-table tr {
+    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 {