New: Move to CSS Variables for Colorings

frontend/src/Search/QueryParameterModal.css

@@ -19,7 +19,7 @@
 
 .footNote {
   display: flex;
-  color: $helpTextColor;
+  color: var(--helpTextColor);
 
   .icon {
     margin-top: 3px;
@@ -29,7 +29,7 @@
 
   code {
     padding: 0 1px;
-    border: 1px solid $borderColor;
+    border: 1px solid var(--borderColor);
     background-color: #f7f7f7;
   }
 }

frontend/src/Search/QueryParameterOption.css

@@ -3,15 +3,15 @@
   align-items: stretch;
   flex-wrap: wrap;
   margin: 3px;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
 
   &:hover {
     .token {
-      background-color: #ddd;
+      background-color: rgba(0, 0, 0, 0.01);
     }
 
     .example {
-      background-color: #ccc;
+      background-color: rgba(0, 0, 0, 0.01);
     }
   }
 }
@@ -27,7 +27,7 @@
 .token {
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #eee;
+  background-color: var(--defaultButtonBackgroundColor);
   font-family: $monoSpaceFontFamily;
 }
 
@@ -37,7 +37,7 @@
   justify-content: space-between;
   flex: 0 0 50%;
   padding: 6px 16px;
-  background-color: #ddd;
+  background-color: var(--defaultHoverBackgroundColor);
 
   .footNote {
     padding: 2px;

frontend/src/Search/Table/ProtocolLabel.css

@@ -1,13 +1,13 @@
 .torrent {
   composes: label from '~Components/Label.css';
 
-  border-color: $torrentColor;
-  background-color: $torrentColor;
+  border-color: var(--torrentColor);
+  background-color: var(--torrentColor);
 }
 
 .usenet {
   composes: label from '~Components/Label.css';
 
-  border-color: $usenetColor;
-  background-color: $usenetColor;
+  border-color: var(--usenetColor);
+  background-color: var(--usenetColor);
 }

frontend/src/Search/Table/SearchIndexRow.css

@@ -58,7 +58,7 @@
 
   margin: 0 2px;
   width: 22px;
-  color: $textColor;
+  color: var(--textColor);
 }
 
 .externalLinks {