Dark mode - Make watches with errors easier to read

changedetectionio/static/styles/diff.css

@@ -18,6 +18,8 @@
   --color-grey-850: #eee;
   --color-grey-900: #f2f2f2;
   --color-black: #000;
+  --color-dark-red: #a00;
+  --color-light-red: #dd0000;
   --color-background-page: var(--color-grey-100);
   --color-background-gradient-first: #5ad8f7;
   --color-background-gradient-second: #2f50af;
@@ -27,9 +29,9 @@
   --color-link: #1b98f8;
   --color-menu-accent: #ed5900;
   --color-background-code: var(--color-grey-850);
-  --color-error: #a00;
+  --color-error: var(--color-dark-red);
   --color-error-input: #ffebeb;
-  --color-error-list: #dd0000;
+  --color-error-list: var(--color-light-red);
   --color-table-background: var(--color-background);
   --color-table-stripe: var(--color-grey-900);
   --color-text-tab: var(--color-white);
@@ -84,7 +86,8 @@
   --color-text-menu-link-hover: var(--color-grey-300);
   --color-shadow-jump: var(--color-grey-500);
   --color-icon-github: var(--color-black);
-  --color-icon-github-hover: var(--color-grey-300); }
+  --color-icon-github-hover: var(--color-grey-300);
+  --color-watch-table-error: var(--color-dark-red); }
 
 html[data-darkmode="true"] {
   --color-link: #59bdfb;
@@ -114,7 +117,8 @@ html[data-darkmode="true"] {
   --color-background-snapshot-age: var(--color-grey-200);
   --color-shadow-jump: var(--color-grey-200);
   --color-icon-github: var(--color-white);
-  --color-icon-github-hover: var(--color-grey-700); }
+  --color-icon-github-hover: var(--color-grey-700);
+  --color-watch-table-error: var(--color-light-red); }
   html[data-darkmode="true"] .watch-controls img {
     opacity: 0.4; }
   html[data-darkmode="true"] .icon-spread {

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

@@ -19,6 +19,8 @@
   --color-grey-850: #eee;
   --color-grey-900: #f2f2f2;
   --color-black: #000;
+  --color-dark-red: #a00;
+  --color-light-red: #dd0000;
 
   --color-background-page: var(--color-grey-100);
   --color-background-gradient-first: #5ad8f7;
@@ -29,9 +31,9 @@
   --color-link: #1b98f8;
   --color-menu-accent: #ed5900;
   --color-background-code: var(--color-grey-850);
-  --color-error: #a00;
+  --color-error: var(--color-dark-red);
   --color-error-input: #ffebeb;
-  --color-error-list: #dd0000;
+  --color-error-list: var(--color-light-red);
   --color-table-background: var(--color-background);
   --color-table-stripe: var(--color-grey-900);
   --color-text-tab: var(--color-white);
@@ -96,6 +98,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);
 }
 
 html[data-darkmode="true"] {
@@ -133,6 +137,7 @@ 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);
 
   // Anything that can't be manipulated through variables follows.
   .watch-controls {

changedetectionio/static/styles/scss/styles.scss

@@ -126,7 +126,7 @@ code {
   }
 
   .error {
-    color: var(--color-error);
+    color: var(--color-watch-table-error);
   }
 
   td {

changedetectionio/static/styles/styles.css

@@ -21,6 +21,8 @@
   --color-grey-850: #eee;
   --color-grey-900: #f2f2f2;
   --color-black: #000;
+  --color-dark-red: #a00;
+  --color-light-red: #dd0000;
   --color-background-page: var(--color-grey-100);
   --color-background-gradient-first: #5ad8f7;
   --color-background-gradient-second: #2f50af;
@@ -30,9 +32,9 @@
   --color-link: #1b98f8;
   --color-menu-accent: #ed5900;
   --color-background-code: var(--color-grey-850);
-  --color-error: #a00;
+  --color-error: var(--color-dark-red);
   --color-error-input: #ffebeb;
-  --color-error-list: #dd0000;
+  --color-error-list: var(--color-light-red);
   --color-table-background: var(--color-background);
   --color-table-stripe: var(--color-grey-900);
   --color-text-tab: var(--color-white);
@@ -87,7 +89,8 @@
   --color-text-menu-link-hover: var(--color-grey-300);
   --color-shadow-jump: var(--color-grey-500);
   --color-icon-github: var(--color-black);
-  --color-icon-github-hover: var(--color-grey-300); }
+  --color-icon-github-hover: var(--color-grey-300);
+  --color-watch-table-error: var(--color-dark-red); }
 
 html[data-darkmode="true"] {
   --color-link: #59bdfb;
@@ -117,7 +120,8 @@ html[data-darkmode="true"] {
   --color-background-snapshot-age: var(--color-grey-200);
   --color-shadow-jump: var(--color-grey-200);
   --color-icon-github: var(--color-white);
-  --color-icon-github-hover: var(--color-grey-700); }
+  --color-icon-github-hover: var(--color-grey-700);
+  --color-watch-table-error: var(--color-light-red); }
   html[data-darkmode="true"] .watch-controls img {
     opacity: 0.4; }
   html[data-darkmode="true"] .icon-spread {
@@ -334,7 +338,7 @@ code {
   .watch-table tr.unviewed {
     font-weight: bold; }
   .watch-table .error {
-    color: var(--color-error); }
+    color: var(--color-watch-table-error); }
   .watch-table td {
     white-space: nowrap; }
   .watch-table td.title-col {