Fix #4283 to improve forced-color support

src/static/css/newtab.css

@@ -100,3 +100,24 @@ img {
     margin-right: auto;
     padding-top: 0.5em;
 }
+
+@media (forced-colors: active) {
+    code {
+        outline: thin solid transparent;
+    }
+    input[id^="spoiler"] + label {
+        background: ButtonFace;
+        color: ButtonText;
+    }
+    input[id^="spoiler"]:checked + label {
+        color: SelectedItemText;
+        background: SelectedItem;
+    }
+    #nagbar-changelog {
+        font-size: 8pt;
+        color: ActiveText;
+        background: transparent;
+        line-height: 1.4;
+        margin-bottom: 0.25em;
+    }
+}

src/static/themes/auto/auto.css

@@ -1,2 +1,23 @@
-@import '../default/default.css';
-@import '../dark/dark.css' (prefers-color-scheme: dark);
+@import "../default/default.css";
+@import "../dark/dark.css" (prefers-color-scheme: dark);
+
+@media (forced-colors: active) {
+    :root {
+        --tridactyl-bg: Canvas;
+        --tridactyl-fg: CanvasText;
+        --tridactyl-search-highlight-color: Highlight; /* currently ignored due to shadow dom issue */
+        --tridactyl-hintspan-fg: SelectedItemText;
+        --tridactyl-hintspan-bg: SelectedItem;
+        --tridactyl-hint-active-fg: inherit;
+        --tridactyl-hint-active-bg: Highlight; /*use Mark when supported https://bugzilla.mozilla.org/show_bug.cgi?id=1638052 */
+        --tridactyl-cmdl-bg: Field;
+        --tridactyl-cmdl-fg: FieldText;
+        --tridactyl-of-fg: SelectedItemText;
+        --tridactyl-of-bg: SelectedItem;
+    }
+
+    .option.focused .url {
+        color: SelectedItemText;
+        background-color: SelectedItem;
+    }
+}