From c38766c5a60a918b6716c1dc1d343ea47cbc2255 Mon Sep 17 00:00:00 2001
From: Sam Storment <sjstorment22@gmail.com>
Date: Wed, 8 May 2024 22:13:24 -0500
Subject: [PATCH 1/4] (search, WIP) Convert SCSS variables to CSS custom
 properties for dynamic theming

---
 .../resources/static/search/serp.scss         | 204 +++++++++++-------
 1 file changed, 128 insertions(+), 76 deletions(-)

diff --git a/code/services-application/search-service/resources/static/search/serp.scss b/code/services-application/search-service/resources/static/search/serp.scss
index 089c3884..7152f662 100644
--- a/code/services-application/search-service/resources/static/search/serp.scss
+++ b/code/services-application/search-service/resources/static/search/serp.scss
@@ -1,33 +1,87 @@
-$nicotine-dark: #acae89;
-$nicotine-light: #f8f8ee;
-$fg-dark: #000;
-$fg-light: #fff;
-$highlight-dark: #2f4858;
-$highlight-light: #3F5F6F;
-$highlight-light2: #eee;
-$border-color: #ccc;
-$border-color2: #aaa;
-$heading-fonts: serif;
-$visited: #fcc;
+// $nicotine-dark: #acae89;
+// $nicotine-light: #f8f8ee;
+// $fg-dark: #000;
+// $fg-light: #fff;
+// $highlight-dark: #2f4858;
+// $highlight-light: #3F5F6F;
+// $highlight-light2: #eee;
+// $border-color: #ccc;
+// $border-color2: #aaa;
+// $heading-fonts: serif;
+// $visited: #fcc;
+
+:root {
+  --clr-bg: #fff;
+  --clr-text: #000; // $fg-dark
+
+  --clr-bg-page: #f8f8ee; // $nicotine-light
+
+  --clr-bg-theme: #3F5F6F; // $highlight-light
+  --clr-text-theme: #fff; // $fg-light
+
+  --clr-bg-highlight: #eee; // $highlight-light2
+  --clr-text-highlight: #111111;
+
+  --clr-bg-accent: #acae89; // $nicotine-dark
+
+  --clr-text-visited: #fcc; // $visited
+
+  --clr-border: #ccc; // $border-color
+  --clr-border-dim: #aaa; // $border-color2
+  --clr-border-dark: #888;
+
+  --clr-shadow: var(--clr-border); 
+
+  --font-family: sans-serif;
+  --font-size: 14px;
+  --font-family-heading: serif; // $heading-fonts
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --clr-bg: #2f2f2f;
+    --clr-text: #ddd;
+    --clr-bg-page: #161616;
+
+    --clr-bg-theme: #111111;
+    --clr-text-theme: var(--clr-text);
+
+    --clr-bg-highlight: #606060;
+    --clr-text-highlight: #eee;
+
+    --clr-bg-accent: var(--clr-bg);
+
+    --clr-border: #666666;
+    --clr-border-dim: #444444;
+    --clr-border-dark: #222222;
+
+    --clr-shadow: #000;
+  }
+}
 
 * {
   box-sizing: border-box;
 }
+
+html {
+  color-scheme: light dark;
+}
+
 h1 a, h2 a {
-  color: $fg-light;
+  color: var(--clr-text-theme);
 }
 h1 a:visited, h2 a:visited {
-  color: $visited;
+  color: var(--clr-text-visited);
 }
 progress {
   width: 10ch;
 }
 
 body {
-  background-color: $nicotine-light;
-  color: $fg-dark;
-  font-family: sans-serif;
-  font-size: 14px;
+  background-color: var(--clr-bg-page);
+  color: var(--clr-text);
+  font-family: var(--font-family);
+  font-size: var(--font-size);
   line-height: 1.6;
   margin-left: auto;
   margin-right: auto;
@@ -99,28 +153,28 @@ body {
     li {
       display: inline;
       padding: 1ch;
-      background-color: $highlight-light2;
+      background-color: var(--clr-bg-highlight);
 
       a {
         text-decoration: none;
         display: inline-block;
-        color: #000;
+        color: var(--clr-text-highlight);
       }
     }
 
     li.current {
-      background-color: $highlight-light;
+      background-color: var(--clr-bg-theme);
       a {
-        color: #fff;
+        color: var(--clr-text-theme);
       }
     }
   }
 }
 
 .dialog {
-  border: 1px solid $border-color2;
-  box-shadow: 0 0 1ch $border-color;
-  background-color: #fff;
+  border: 1px solid var(--clr-border-dim);
+  box-shadow: 0 0 1ch var(--clr-shadow);
+  background-color: var(--clr-bg);
   padding: 1ch;
 
   h2 {
@@ -129,22 +183,22 @@ body {
     font-weight: normal;
     padding: 0.5ch;
     font-size: 12pt;
-    background-color: $highlight-light;
-    color: #fff;
+    background-color: var(--clr-bg-theme);
+    color: var(--clr-text-theme);
   }
 }
 
 header {
-  background-color: $nicotine-dark;
-  color: #fff;
-  border: 1px solid #888;
-  box-shadow: 0 0 0.5ch #888;
+  background-color: var(--clr-bg-accent);
+  color: var(--clr-text);
+  border: 1px solid var(--clr-border-dark);
+  box-shadow: 0 0 0.5ch var(--clr-border-dark);
   margin-bottom: 1ch;
 
   nav {
     a {
       text-decoration: none;
-      color: #000;
+      color: var(--clr-text);
 
       padding: .5ch;
       display: inline-block;
@@ -160,8 +214,8 @@ header {
     }
 
     a:hover, a:focus {
-      background: #2f4858;
-      color: #fff !important;
+      background: var(--clr-bg-theme);
+      color: var(--clr-text-theme);
     }
   }
 }
@@ -210,11 +264,11 @@ header {
     @extend .heading;
   }
 
-  background-color: #fff;
+  background-color: var(--clr-);
   padding: 1ch;
   margin: 1ch;
-  border: 1px solid $border-color2;
-  box-shadow: 0 0 1ch $border-color;
+  border: 1px solid var(--clr-border-dim);
+  box-shadow: 0 0 1ch var(--clr-shadow);
 }
 
 section.cards {
@@ -276,7 +330,8 @@ section.cards {
 
 .positions {
   box-shadow: 0 0 2px #888;
-  background-color: #e4e4e4;
+  background-color: var(--clr-bg-highlight);
+  color: var(--clr-text-highlight);
   padding: 2px;
   margin-right: -1ch;
   margin-left: 1ch;
@@ -297,13 +352,13 @@ footer {
 
   h1 {
     font-weight: normal;
-    border-bottom: 4px solid $highlight-light;
+    border-bottom: 4px solid var(--clr-bg-theme);
   }
 
   h2 {
     font-size: 14pt;
     font-weight: normal;
-    border-bottom: 2px solid $highlight-dark;
+    border-bottom: 2px solid var(--clr-bg-theme);
     width: 80%;
   }
 
@@ -312,9 +367,9 @@ footer {
     flex-basis: 40ch;
     flex-grow: 1.1;
 
-    background-color: #fff;
-    border-left: 1px solid $border-color2;
-    box-shadow: -1px -1px 5px $border-color;
+    background-color: var(--clr-bg);
+    border-left: 1px solid var(--clr-border-dim);
+    box-shadow: -1px -1px 5px var(--clr-shadow);
 
     padding-left: 1ch;
     padding-right: 1ch;
@@ -329,18 +384,18 @@ footer {
 }
 
 .shadowbox {
-  box-shadow: 0 0 1ch $border-color2;
-  border: 1px solid $border-color;
+  box-shadow: 0 0 1ch var(--clr-shadow);
+  border: 1px solid var(--clr-border);
 }
 
 .heading {
   margin: 0;
   padding: 0.5ch;
-  background-color: $highlight-light;
-  border-bottom: 1px solid $border-color2;
-  font-family: $heading-fonts;
+  background-color: var(--clr-bg-theme);
+  border-bottom: 1px solid var(--clr-border-dim);
+  font-family: var(--font-family-heading);
   font-weight: normal;
-  color: $fg-light;
+  color: var(--clr-text-theme);
   font-size: 12pt;
   word-break: break-word;
 }
@@ -440,7 +495,7 @@ footer {
   @extend .shadowbox;
 
   padding: 0.5ch;
-  background-color: $fg-light;
+  background-color: var(--clr-bg);
   display: grid;
   grid-template-columns: max-content 0 auto max-content;
   grid-gap: 0.5ch;
@@ -452,9 +507,9 @@ footer {
     padding: 0.5ch;
     font-size: 14pt;
     word-break: keep-all;
-    background-color: $highlight-light;
-    color: $fg-light;
-    font-family: $heading-fonts;
+    background-color: var(--clr-bg-theme);
+    color: var(--clr-text-theme);
+    font-family: var(--font-family-heading);
     font-weight: normal;
     border: 1px solid;
     text-align: center;
@@ -469,16 +524,13 @@ footer {
     font-family: monospace;
     font-size: 12pt;
     padding: 0.5ch;
-    border: 1px solid $border-color2;
-    background-color: $fg-light;
-    color: $fg-dark;
+    border: 1px solid var(--clr-border-dim);
   }
 
   input[type="submit"] {
     font-size: 12pt;
-    border: 1px solid $border-color2;
-    background-color: $fg-light;
-    color: $fg-dark;
+    border: 1px solid var(--clr-border-dim);
+    background-color: var(--clr-bg);
   }
 
   .suggestions {
@@ -528,22 +580,22 @@ footer {
 #filters {
   @extend .shadowbox;
   margin-top: 1ch;
-  background-color: $fg-light;
+  background-color: var(--clr-bg);
 
   h2 {
     @extend .heading;
-    background-color: $highlight-light;
+    background-color: var(--clr-bg-theme);
   }
   h3 {
     @extend .heading;
-    background-color: $highlight-light2;
+    background-color: var(--clr-bg-highlight);
     font-family: sans-serif;
     color: #000;
     border-bottom: 1px solid #000;
   }
 
   hr {
-    border-top: 0.5px solid $border-color2;
+    border-top: 0.5px solid var(--clr-border-dim);
     border-bottom: none;
   }
   ul {
@@ -553,17 +605,17 @@ footer {
     li {
       padding: 1ch;
       a {
-        color: $fg-dark;
+        color: inherit;
         text-decoration: none;
       }
       a:hover, a:focus {
-        border-bottom: 1px solid $highlight-light;
+        border-bottom: 1px solid var(--clr-bg-theme);
       }
     }
 
     li.current {
-      border-left: 4px solid $highlight-light;
-      background-color: $highlight-light2;
+      border-left: 4px solid var(--clr-bg-theme);
+      background-color: var(--clr-bg-highlight);
       a {
         margin-left: -4px;
       }
@@ -576,46 +628,46 @@ footer {
   margin: 1ch 0 2ch 0;
 
   .url {
-    background-color: $highlight-light;
+    background-color: var(--clr-bg-theme);
     padding-left: 0.5ch;
 
     a {
       word-break: break-all;
       font-family: monospace;
       font-size: 8pt;
-      color: $fg-light;
+      color: var(--clr-text-theme);
       text-shadow: 0 0 1ch #000; // guarantee decent contrast across background colors
     }
     a:visited {
-      color: $visited;
+      color: var(--clr-text-visited);
     }
   }
 
   h2 {
     a {
       word-break: break-all;
-      color: $fg-dark;
+      color: var(--clr-text);
       text-decoration: none;
     }
     font-size: 12pt;
     @extend .heading;
-    background-color: $highlight-light2;
+    background-color:var(--clr-bg-highlight);
   }
 
   .description {
-    background-color: $fg-light;
+    background-color: var(--clr-bg);
     word-break: break-word;
     padding: 1ch;
     margin: 0;
   }
 
   ul.additional-results {
-    background-color: $fg-light;
+    background-color: var(--clr-bg);
     padding: 1ch;
     list-style: none;
     margin: 0;
     a {
-        color: $fg-dark;
+        color: inherit;
     }
   }
 }
@@ -631,7 +683,7 @@ footer {
   display: flex;
   font-size: 10pt;
   padding: 1ch;
-  background-color: #eee;
+  background-color: var(--clr-bg-highlight);
 
   > * {
     margin-right: 1ch;
@@ -645,7 +697,7 @@ footer {
     padding-left: 4px;
   }
   a {
-    color: #000;
+    color: var(--clr-text-highlight);
   }
 }
 

From bb315221ab83ae4d4e36098029de3ad0ffe8adf3 Mon Sep 17 00:00:00 2001
From: Sam Storment <sjstorment22@gmail.com>
Date: Tue, 14 May 2024 01:32:40 -0500
Subject: [PATCH 2/4] (search, WIP) Make the dark theme look generally nicer.
 Rename CSS custom properties a bit. Switch a lot of background colors to HSL
 to make it easy to change colors relative to one another.

---
 .../resources/static/search/serp.scss         | 115 ++++++++----------
 1 file changed, 52 insertions(+), 63 deletions(-)

diff --git a/code/services-application/search-service/resources/static/search/serp.scss b/code/services-application/search-service/resources/static/search/serp.scss
index 7152f662..2e6a89aa 100644
--- a/code/services-application/search-service/resources/static/search/serp.scss
+++ b/code/services-application/search-service/resources/static/search/serp.scss
@@ -1,37 +1,24 @@
-// $nicotine-dark: #acae89;
-// $nicotine-light: #f8f8ee;
-// $fg-dark: #000;
-// $fg-light: #fff;
-// $highlight-dark: #2f4858;
-// $highlight-light: #3F5F6F;
-// $highlight-light2: #eee;
-// $border-color: #ccc;
-// $border-color2: #aaa;
-// $heading-fonts: serif;
-// $visited: #fcc;
-
 :root {
-  --clr-bg: #fff;
-  --clr-text: #000; // $fg-dark
+  --clr-bg-page: hsl(60, 42%, 95%); // $nicotine-light
 
-  --clr-bg-page: #f8f8ee; // $nicotine-light
+  --clr-bg-ui: hsl(0, 0%, 100%);
+  --clr-text-ui: #000; // $fg-dark
 
-  --clr-bg-theme: #3F5F6F; // $highlight-light
+  --clr-bg-theme: hsl(200, 28%, 34%); // $highlight-light
   --clr-text-theme: #fff; // $fg-light
 
-  --clr-bg-highlight: #eee; // $highlight-light2
+  --clr-bg-highlight: hsl(0, 0%, 93%); // $highlight-light2
   --clr-text-highlight: #111111;
 
-  --clr-bg-accent: #acae89; // $nicotine-dark
+  --clr-bg-accent: hsl(63, 19%, 61%); // $nicotine-dark
+  --clr-border-accent: hsl(63, 19%, 35%);
+
+  --clr-border: #aaa; // $border-color2
+  
+  --clr-shadow: var(--clr-border); 
 
   --clr-text-visited: #fcc; // $visited
 
-  --clr-border: #ccc; // $border-color
-  --clr-border-dim: #aaa; // $border-color2
-  --clr-border-dark: #888;
-
-  --clr-shadow: var(--clr-border); 
-
   --font-family: sans-serif;
   --font-size: 14px;
   --font-family-heading: serif; // $heading-fonts
@@ -39,23 +26,24 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --clr-bg: #2f2f2f;
-    --clr-text: #ddd;
-    --clr-bg-page: #161616;
+    --clr-bg-page: hsl(0, 0%, 6%);
 
-    --clr-bg-theme: #111111;
-    --clr-text-theme: var(--clr-text);
+    --clr-bg-ui: hsl(0, 0%, 18%);
+    --clr-text-ui: #ddd;
 
-    --clr-bg-highlight: #606060;
-    --clr-text-highlight: #eee;
+    --clr-bg-theme: hsl(0, 0%, 2%);
+    --clr-text-theme: var(--clr-text-ui);
 
-    --clr-bg-accent: var(--clr-bg);
+    --clr-bg-highlight: hsl(0, 0%, 11%);
+    --clr-text-highlight: #fff;
 
-    --clr-border: #666666;
-    --clr-border-dim: #444444;
-    --clr-border-dark: #222222;
+    --clr-bg-accent: hsl(200, 32%, 28%);
+    --clr-border-accent: hsl(200, 8%, 12%);
+
+    --clr-border: hsl(0, 0%, 30%);
 
     --clr-shadow: #000;
+    
   }
 }
 
@@ -79,7 +67,7 @@ progress {
 
 body {
   background-color: var(--clr-bg-page);
-  color: var(--clr-text);
+  color: var(--clr-text-ui);
   font-family: var(--font-family);
   font-size: var(--font-size);
   line-height: 1.6;
@@ -172,9 +160,9 @@ body {
 }
 
 .dialog {
-  border: 1px solid var(--clr-border-dim);
+  border: 1px solid var(--clr-border);
   box-shadow: 0 0 1ch var(--clr-shadow);
-  background-color: var(--clr-bg);
+  background-color: var(--clr-bg-ui);
   padding: 1ch;
 
   h2 {
@@ -190,15 +178,15 @@ body {
 
 header {
   background-color: var(--clr-bg-accent);
-  color: var(--clr-text);
-  border: 1px solid var(--clr-border-dark);
-  box-shadow: 0 0 0.5ch var(--clr-border-dark);
+  border: 1px solid var(--clr-border-accent);
+  color: var(--clr-text-ui);
+  box-shadow: 0 0 0.5ch var(--clr-shadow);
   margin-bottom: 1ch;
 
   nav {
     a {
       text-decoration: none;
-      color: var(--clr-text);
+      color: var(--clr-text-ui);
 
       padding: .5ch;
       display: inline-block;
@@ -206,9 +194,9 @@ header {
 
     a.extra {
       background: #ccc linear-gradient(45deg,
-              rgba(255,100,100,1) 0%,
-              rgba(100,255,100,1) 50%,
-              rgba(100,100,255,1) 100%);
+              hsl(0, 100%, 70%) 0%,
+              hsl(120, 100%, 70%) 50%,
+              hsl(240, 100%, 70%) 100%);
       color: black;
       text-shadow: 0 0 0.5ch #fff;
     }
@@ -267,7 +255,7 @@ header {
   background-color: var(--clr-);
   padding: 1ch;
   margin: 1ch;
-  border: 1px solid var(--clr-border-dim);
+  border: 1px solid var(--clr-border);
   box-shadow: 0 0 1ch var(--clr-shadow);
 }
 
@@ -281,7 +269,7 @@ section.cards {
 
   .card {
     border: 2px #ccc;
-    background-color: #fff;
+    background-color: var(--clr-ui);
     border-left: 1px solid #ecb;
     border-top: 1px solid #ecb;
     box-shadow: #0008 0 0 5px;
@@ -330,7 +318,7 @@ section.cards {
 
 .positions {
   box-shadow: 0 0 2px #888;
-  background-color: var(--clr-bg-highlight);
+  backdrop-filter: brightness(90%);
   color: var(--clr-text-highlight);
   padding: 2px;
   margin-right: -1ch;
@@ -367,8 +355,8 @@ footer {
     flex-basis: 40ch;
     flex-grow: 1.1;
 
-    background-color: var(--clr-bg);
-    border-left: 1px solid var(--clr-border-dim);
+    background-color: var(--clr-bg-ui);
+    border-left: 1px solid var(--clr-border);
     box-shadow: -1px -1px 5px var(--clr-shadow);
 
     padding-left: 1ch;
@@ -392,7 +380,7 @@ footer {
   margin: 0;
   padding: 0.5ch;
   background-color: var(--clr-bg-theme);
-  border-bottom: 1px solid var(--clr-border-dim);
+  border-bottom: 1px solid var(--clr-border);
   font-family: var(--font-family-heading);
   font-weight: normal;
   color: var(--clr-text-theme);
@@ -495,7 +483,7 @@ footer {
   @extend .shadowbox;
 
   padding: 0.5ch;
-  background-color: var(--clr-bg);
+  background-color: var(--clr-bg-ui);
   display: grid;
   grid-template-columns: max-content 0 auto max-content;
   grid-gap: 0.5ch;
@@ -511,7 +499,6 @@ footer {
     color: var(--clr-text-theme);
     font-family: var(--font-family-heading);
     font-weight: normal;
-    border: 1px solid;
     text-align: center;
   }
 
@@ -524,15 +511,17 @@ footer {
     font-family: monospace;
     font-size: 12pt;
     padding: 0.5ch;
-    border: 1px solid var(--clr-border-dim);
+    border: 1px solid var(--clr-border);
+    background-color: inherit;
   }
 
   input[type="submit"] {
     font-size: 12pt;
-    border: 1px solid var(--clr-border-dim);
-    background-color: var(--clr-bg);
+    border: 1px solid var(--clr-border);
+    background-color: var(--clr-bg-ui);
   }
 
+  // white suggesitons looks fine in dark mode
   .suggestions {
     background-color: #fff;
     padding: .5ch;
@@ -543,7 +532,7 @@ footer {
     width: 300px;
     border-left: 1px solid #ccc;
     border-top: 1px solid #ccc;
-    box-shadow: 5px 5px 5px #888;
+    box-shadow: 5px 5px 5px var(--clr-shadow);
     z-index: 10;
 
     a {
@@ -580,7 +569,7 @@ footer {
 #filters {
   @extend .shadowbox;
   margin-top: 1ch;
-  background-color: var(--clr-bg);
+  background-color: var(--clr-bg-ui);
 
   h2 {
     @extend .heading;
@@ -589,13 +578,13 @@ footer {
   h3 {
     @extend .heading;
     background-color: var(--clr-bg-highlight);
+    color: var(--clr-text-highlight);
     font-family: sans-serif;
-    color: #000;
     border-bottom: 1px solid #000;
   }
 
   hr {
-    border-top: 0.5px solid var(--clr-border-dim);
+    border-top: 0.5px solid var(--clr-border);
     border-bottom: none;
   }
   ul {
@@ -646,7 +635,7 @@ footer {
   h2 {
     a {
       word-break: break-all;
-      color: var(--clr-text);
+      color: var(--clr-text-ui);
       text-decoration: none;
     }
     font-size: 12pt;
@@ -655,14 +644,14 @@ footer {
   }
 
   .description {
-    background-color: var(--clr-bg);
+    background-color: var(--clr-bg-ui);
     word-break: break-word;
     padding: 1ch;
     margin: 0;
   }
 
   ul.additional-results {
-    background-color: var(--clr-bg);
+    background-color: var(--clr-bg-ui);
     padding: 1ch;
     list-style: none;
     margin: 0;

From 43489c98d87d41f984b9b0bd19e4ccb09a14913c Mon Sep 17 00:00:00 2001
From: Sam Storment <sjstorment22@gmail.com>
Date: Sun, 19 May 2024 01:06:54 -0500
Subject: [PATCH 3/4] (search) Minor dark theme tweaks after the new mocked UI
 elements were added

---
 .../resources/static/search/serp.scss           | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/code/services-application/search-service/resources/static/search/serp.scss b/code/services-application/search-service/resources/static/search/serp.scss
index 2e6a89aa..72fed2ff 100644
--- a/code/services-application/search-service/resources/static/search/serp.scss
+++ b/code/services-application/search-service/resources/static/search/serp.scss
@@ -252,7 +252,7 @@ header {
     @extend .heading;
   }
 
-  background-color: var(--clr-);
+  background-color: var(--clr-bg-ui);
   padding: 1ch;
   margin: 1ch;
   border: 1px solid var(--clr-border);
@@ -268,11 +268,10 @@ section.cards {
   justify-content: flex-start;
 
   .card {
-    border: 2px #ccc;
-    background-color: var(--clr-ui);
+    background-color: var(--clr-bg-ui);
     border-left: 1px solid #ecb;
     border-top: 1px solid #ecb;
-    box-shadow: #0008 0 0 5px;
+    box-shadow: var(--clr-shadow) 0 0 5px;
 
     h2 {
       @extend .heading;
@@ -281,7 +280,7 @@ section.cards {
 
     h2 a {
       display: block !important;
-      color: #fff;
+      color: inherit;
       text-decoration: none;
     }
     a:focus img  {
@@ -313,11 +312,17 @@ section.cards {
       padding-right: 1ch;
       line-height: 1.6;
     }
+
+    @media (prefers-color-scheme: dark) {
+      & {
+        border: 1px solid var(--clr-border);
+      }
+    }
   }
 }
 
 .positions {
-  box-shadow: 0 0 2px #888;
+  box-shadow: 0 0 2px var(--clr-shadow);
   backdrop-filter: brightness(90%);
   color: var(--clr-text-highlight);
   padding: 2px;

From 5659df43885649f1969148dc0cd5b15f5ee676c5 Mon Sep 17 00:00:00 2001
From: Sam Storment <sjstorment22@gmail.com>
Date: Tue, 21 May 2024 00:03:46 -0500
Subject: [PATCH 4/4] (search) Set link and form field colors manually to
 override browser defaults with poor dark mode contrast

---
 .../resources/static/search/serp.scss         | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/code/services-application/search-service/resources/static/search/serp.scss b/code/services-application/search-service/resources/static/search/serp.scss
index 72fed2ff..b2ca3a19 100644
--- a/code/services-application/search-service/resources/static/search/serp.scss
+++ b/code/services-application/search-service/resources/static/search/serp.scss
@@ -17,7 +17,9 @@
   
   --clr-shadow: var(--clr-border); 
 
-  --clr-text-visited: #fcc; // $visited
+  --clr-link: #0066cc;
+  --clr-link-visited: #531a89;
+  --clr-heading-link-visited: #fcc; // $visited
 
   --font-family: sans-serif;
   --font-size: 14px;
@@ -43,7 +45,10 @@
     --clr-border: hsl(0, 0%, 30%);
 
     --clr-shadow: #000;
-    
+
+    --clr-link: #8a8aff;
+    --clr-link-visited: #ffadff;
+    --clr-heading-link-visited: var(--clr-link-visited);
   }
 }
 
@@ -55,11 +60,23 @@ html {
   color-scheme: light dark;
 }
 
+a {
+  color: var(--clr-link);
+}
+
+a:visited {
+  color: var(--clr-link-visited);
+}
+
+input, textarea, select {
+  color: inherit;
+}
+
 h1 a, h2 a {
   color: var(--clr-text-theme);
 }
 h1 a:visited, h2 a:visited {
-  color: var(--clr-text-visited);
+  color: var(--clr-heading-link-visited);
 }
 progress {
   width: 10ch;
@@ -187,11 +204,14 @@ header {
     a {
       text-decoration: none;
       color: var(--clr-text-ui);
-
       padding: .5ch;
       display: inline-block;
     }
 
+    a:visited {
+      color: var(--clr-text-ui);
+    }
+
     a.extra {
       background: #ccc linear-gradient(45deg,
               hsl(0, 100%, 70%) 0%,
@@ -524,6 +544,7 @@ footer {
     font-size: 12pt;
     border: 1px solid var(--clr-border);
     background-color: var(--clr-bg-ui);
+    cursor: pointer;
   }
 
   // white suggesitons looks fine in dark mode
@@ -633,7 +654,7 @@ footer {
       text-shadow: 0 0 1ch #000; // guarantee decent contrast across background colors
     }
     a:visited {
-      color: var(--clr-text-visited);
+      color: var(--clr-heading-link-visited);
     }
   }