Propagate CSS variables.

CSS variables are used for the prefers-dark, propagate them to component
CSS as well.

public/css/style.css

@@ -1,6 +1,8 @@
 :root {
     --color-background: #f9f9f9;
+    --color-background-attention: #ffffff;
     --color-text: #000000;
+    --color-text-inverted: #ffffff;
     --color-text-subdued: #4f4e4e;
     --color-text-attention: teal;
     --color-text-warning: rgb(218, 13, 13);
@@ -10,8 +12,10 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --color-background: #222222;
+        --color-background-attention: #000000;
         --color-text: #f9f9f9;
-        --color-text-subdued: #cccccc;
+        --color-text-inverted: #ffffff;
+        --color-text-subdued: #f1f1f1;
         --color-text-warning: rgb(218, 13, 13);
         --invert: 1;
     }

src/css/style.css

@@ -1,6 +1,8 @@
 :root {
     --color-background: #f9f9f9;
+    --color-background-attention: #ffffff;
     --color-text: #000000;
+    --color-text-inverted: #ffffff;
     --color-text-subdued: #4f4e4e;
     --color-text-attention: teal;
     --color-text-warning: rgb(218, 13, 13);
@@ -10,8 +12,10 @@
 @media (prefers-color-scheme: dark) {
     :root {
         --color-background: #222222;
+        --color-background-attention: #000000;
         --color-text: #f9f9f9;
-        --color-text-subdued: #cccccc;
+        --color-text-inverted: #ffffff;
+        --color-text-subdued: #f1f1f1;
         --color-text-warning: rgb(218, 13, 13);
         --invert: 1;
     }

src/frontend/components/datasheet-search.css

@@ -1,39 +1,38 @@
 .query {
-	font-size: 1.3em;
+	font-size: 1.3rem;
-	background-color: white;
+	background-color: var(--color-background-autention);
-	color: black;
+	color: var(--color-text);
-	border: 1px solid teal;
+	border: 1px solid var(--color-text-attention);
 	border-radius: 5px;
-	padding: .4em .8em;
+	padding: .4rem .8rem;
 	width: 100%;
 	box-sizing: border-box;
 }
 
 .noResults {
-	padding: .6em 1em;
+	padding: .6rem 1rem;
 }
 
 .results {
-	border: 1px solid teal;
+	border: 1px solid var(--color-text-attention);
 	border-radius: 5px;
-	/* margin-top: 1em; */
 
 	.result {
-		border-top: 1px solid teal;
+		border-top: 1px solid var(--color-text-attention);
-		padding: .6em 1em;
+		padding: .6rem 1rem;
-		font-size: .8em;
+		font-size: .8rem;
 
 		&.first {
 			border-top: 0;
-			font-size: 1em
+			font-size: 1rem
 		}
 
 		.name {
-			font-size: 1.3em;
+			font-size: 1.3rem;
 
 			.manufacturer {
-				color: #4f4e4e;
+				color: var(--color-text-subdued);
-				margin-right: .3em;
+				margin-right: .3rem;
 			}
 
 			.model {
@@ -42,7 +41,7 @@
 		}
 
 		.description {
-			color: #4f4e4e;
+			color: var(--color-text-subdued);
 			margin-top: .2em;
 		}
 
@@ -55,9 +54,9 @@
 			margin-top: -.3em;
 			margin-right: -.7em;
 
-			border: 1px solid #006262;
+			border: 1px solid var(--color-text);
-			background-color: #039f9f;
+			background-color: var(--color-text-attention);
-			color: white;
+			color: var(--color-text-inverted);
 		}
 	}
 }