forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: icons disappear in Windows High Contrast Mode (#1150)
+90
-2
+20
app/assets/main.css
+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
+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
+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
+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
+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>