[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

authored by

rygrit and committed by
GitHub
77a7aa83 cb040c4b

+90 -2
+20
app/assets/main.css
··· 171 171 } 172 172 } 173 173 174 + /* 175 + * Forced Colors Mode (WHCM) Override for Icons 176 + * 177 + * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine 178 + * for most icons as they inherit the correct text color. 179 + * 180 + * However, if icons disappear in specific contexts (e.g., inside buttons with 181 + * complex backgrounds or transparent states), uncomment the following block 182 + * to enforce visibility using `CanvasText`. 183 + */ 184 + /* 185 + @media (forced-colors: active) { 186 + [class^='i-'], 187 + [class*=' i-'] { 188 + forced-color-adjust: none !important; 189 + color: CanvasText !important; 190 + } 191 + } 192 + */ 193 + 174 194 html { 175 195 -webkit-font-smoothing: antialiased; 176 196 -moz-osx-font-smoothing: grayscale;
+15
app/components/Settings/AccentColorPicker.vue
··· 59 59 </label> 60 60 </fieldset> 61 61 </template> 62 + 63 + <style scoped> 64 + @media (forced-colors: active) { 65 + /* keep accent radio swatches visible in forced colors. */ 66 + label { 67 + forced-color-adjust: none; 68 + border: 1px solid CanvasText; 69 + 70 + &:has(> input:checked) { 71 + outline: 2px solid Highlight; 72 + outline-offset: 2px; 73 + } 74 + } 75 + } 76 + </style>
+15
app/components/Settings/BgThemePicker.vue
··· 37 37 </label> 38 38 </fieldset> 39 39 </template> 40 + 41 + <style scoped> 42 + @media (forced-colors: active) { 43 + /* keep background theme swatches visible in forced colors. */ 44 + label { 45 + forced-color-adjust: none; 46 + border: 1px solid CanvasText; 47 + 48 + &:has(> input:checked) { 49 + outline: 2px solid Highlight; 50 + outline-offset: 2px; 51 + } 52 + } 53 + } 54 + </style>
+27
app/components/Settings/Toggle.client.vue
··· 51 51 html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span { 52 52 translate: calc(-100%); 53 53 } 54 + 55 + @media (forced-colors: active) { 56 + /* make toggle tracks and thumb visible in forced colors. */ 57 + button[role='switch'] { 58 + & > span:last-of-type { 59 + forced-color-adjust: none; 60 + } 61 + 62 + &[aria-checked='false'] > span:last-of-type { 63 + background: Canvas; 64 + border-color: CanvasText; 65 + 66 + & > span { 67 + background: CanvasText; 68 + } 69 + } 70 + 71 + &[aria-checked='true'] > span:last-of-type { 72 + background: Highlight; 73 + border-color: Highlight; 74 + 75 + & > span { 76 + background: HighlightText; 77 + } 78 + } 79 + } 80 + } 54 81 </style>
+11 -1
app/pages/index.vue
··· 123 123 <li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name"> 124 124 <LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm"> 125 125 <span 126 - class="w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200" 126 + class="home-tag-dot w-1 h-1 rounded-full bg-accent group-hover:bg-fg transition-colors duration-200" 127 127 /> 128 128 {{ framework.name }} 129 129 </LinkBase> ··· 139 139 </section> 140 140 </main> 141 141 </template> 142 + 143 + <style scoped> 144 + /* Windows High Contrast Mode support */ 145 + @media (forced-colors: active) { 146 + .home-tag-dot { 147 + forced-color-adjust: none; 148 + background-color: CanvasText; 149 + } 150 + } 151 + </style>
+2 -1
uno.config.ts
··· 22 22 presetWind4(), 23 23 presetIcons({ 24 24 extraProperties: { 25 - display: 'inline-block', 25 + 'display': 'inline-block', 26 + 'forced-color-adjust': 'preserve-parent-color', 26 27 }, 27 28 warn: true, 28 29 scale: 1.2,