fix: icons disappear in Windows High Contrast Mode (#1150)

Author: RYGRIT

app/assets/main.css

@@ -171,6 +171,26 @@
   }
 }
 
+/*
+ * Forced Colors Mode (WHCM) Override for Icons
+ *
+ * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
+ * for most icons as they inherit the correct text color.
+ *
+ * However, if icons disappear in specific contexts (e.g., inside buttons with
+ * complex backgrounds or transparent states), uncomment the following block
+ * to enforce visibility using `CanvasText`.
+ */
+/* 
+@media (forced-colors: active) {
+  [class^='i-'],
+  [class*=' i-'] {
+    forced-color-adjust: none !important;
+    color: CanvasText !important;
+  }
+}
+*/
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

app/components/Settings/AccentColorPicker.vue

@@ -59,3 +59,18 @@ onPrehydrate(el => {
     </label>
   </fieldset>
 </template>
+
+<style scoped>
+@media (forced-colors: active) {
+  /* keep accent radio swatches visible in forced colors. */
+  label {
+    forced-color-adjust: none;
+    border: 1px solid CanvasText;
+
+    &:has(> input:checked) {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
+</style>

app/components/Settings/BgThemePicker.vue

@@ -37,3 +37,18 @@ onPrehydrate(el => {
     </label>
   </fieldset>
 </template>
+
+<style scoped>
+@media (forced-colors: active) {
+  /* keep background theme swatches visible in forced colors. */
+  label {
+    forced-color-adjust: none;
+    border: 1px solid CanvasText;
+
+    &:has(> input:checked) {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
+</style>

app/components/Settings/Toggle.client.vue

@@ -51,4 +51,31 @@ button[aria-checked='true'] > span:last-of-type > span {
 html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
   translate: calc(-100%);
 }
+
+@media (forced-colors: active) {
+  /* make toggle tracks and thumb visible in forced colors. */
+  button[role='switch'] {
+    & > span:last-of-type {
+      forced-color-adjust: none;
+    }
+
+    &[aria-checked='false'] > span:last-of-type {
+      background: Canvas;
+      border-color: CanvasText;
+
+      & > span {
+        background: CanvasText;
+      }
+    }
+
+    &[aria-checked='true'] > span:last-of-type {
+      background: Highlight;
+      border-color: Highlight;
+
+      & > span {
+        background: HighlightText;
+      }
+    }
+  }
+}
 </style>

app/pages/index.vue

@@ -123,7 +123,7 @@ defineOgImageComponent('Default', {
           <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
             <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
               <span
-                class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
+                class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200"
               />
               {{ framework.name }}
             </LinkBase>
@@ -139,3 +139,13 @@ defineOgImageComponent('Default', {
     </section>
   </main>
 </template>
+
+<style scoped>
+/* Windows High Contrast Mode support */
+@media (forced-colors: active) {
+  .home-tag-dot {
+    forced-color-adjust: none;
+    background-color: CanvasText;
+  }
+}
+</style>

uno.config.ts

@@ -22,7 +22,8 @@ export default defineConfig({
     presetWind4(),
     presetIcons({
       extraProperties: {
-        display: 'inline-block',
+        'display': 'inline-block',
+        'forced-color-adjust': 'preserve-parent-color',
       },
       warn: true,
       scale: 1.2,