Skip to content

Commit 00bbd51

Browse files
RYGRITRYGRIT
committed
refactor: colocate WHCM styles and disable global icon override
1 parent e1d81d5 commit 00bbd51

5 files changed

Lines changed: 84 additions & 53 deletions

File tree

‎app/assets/main.css‎

Lines changed: 16 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -155,61 +155,25 @@
155155
}
156156
}
157157

158-
/* Keep icon masks visible when Windows forced colors overrides theme tokens. */
158+
/*
159+
* Forced Colors Mode (WHCM) Override for Icons
160+
*
161+
* By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
162+
* for most icons as they inherit the correct text color.
163+
*
164+
* However, if icons disappear in specific contexts (e.g., inside buttons with
165+
* complex backgrounds or transparent states), uncomment the following block
166+
* to enforce visibility using `CanvasText`.
167+
*/
168+
/*
159169
@media (forced-colors: active) {
160-
:where([class^='i-'], [class*=' i-']) {
161-
forced-color-adjust: none;
162-
color: CanvasText;
163-
}
164-
165-
/* Settings page: keep accent/background radio swatches visible in forced colors. */
166-
:where(
167-
fieldset:has(input[type='radio'][name='accent-color']),
168-
fieldset:has(input[type='radio'][name='background-theme'])
169-
)
170-
> label {
171-
forced-color-adjust: none;
172-
border: 1px solid CanvasText;
173-
}
174-
175-
:where(
176-
fieldset:has(input[type='radio'][name='accent-color']),
177-
fieldset:has(input[type='radio'][name='background-theme'])
178-
)
179-
> label:has(> input:checked) {
180-
outline: 2px solid Highlight;
181-
outline-offset: 2px;
182-
}
183-
184-
/* Settings page: make toggle tracks and thumb visible in forced colors. */
185-
button[role='switch'] > span:last-of-type {
186-
forced-color-adjust: none;
187-
}
188-
189-
button[role='switch'][aria-checked='false'] > span:last-of-type {
190-
background: Canvas;
191-
border-color: CanvasText;
192-
}
193-
194-
button[role='switch'][aria-checked='false'] > span:last-of-type > span {
195-
background: CanvasText;
196-
}
197-
198-
button[role='switch'][aria-checked='true'] > span:last-of-type {
199-
background: Highlight;
200-
border-color: Highlight;
201-
}
202-
203-
button[role='switch'][aria-checked='true'] > span:last-of-type > span {
204-
background: HighlightText;
205-
}
206-
207-
/* Homepage tag dots are custom spans, not list markers. */
208-
:where([class~='bg-accent'][class~='rounded-full'][class~='w-1'][class~='h-1']) {
209-
forced-color-adjust: none;
210-
background: CanvasText;
170+
[class^='i-'],
171+
[class*=' i-'] {
172+
forced-color-adjust: none !important;
173+
color: CanvasText !important;
211174
}
212175
}
176+
*/
213177

214178
html {
215179
-webkit-font-smoothing: antialiased;

‎app/components/Settings/AccentColorPicker.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,18 @@ onPrehydrate(el => {
5252
</label>
5353
</fieldset>
5454
</template>
55+
56+
<style scoped>
57+
@media (forced-colors: active) {
58+
/* keep accent radio swatches visible in forced colors. */
59+
label {
60+
forced-color-adjust: none;
61+
border: 1px solid CanvasText;
62+
63+
&:has(> input:checked) {
64+
outline: 2px solid Highlight;
65+
outline-offset: 2px;
66+
}
67+
}
68+
}
69+
</style>

‎app/components/Settings/BgThemePicker.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,18 @@ onPrehydrate(el => {
3636
</label>
3737
</fieldset>
3838
</template>
39+
40+
<style scoped>
41+
@media (forced-colors: active) {
42+
/* keep background theme swatches visible in forced colors. */
43+
label {
44+
forced-color-adjust: none;
45+
border: 1px solid CanvasText;
46+
47+
&:has(> input:checked) {
48+
outline: 2px solid Highlight;
49+
outline-offset: 2px;
50+
}
51+
}
52+
}
53+
</style>

‎app/components/Settings/Toggle.client.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,31 @@ button[aria-checked='true'] > span:last-of-type > span {
5151
html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
5252
translate: calc(-100%);
5353
}
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+
}
5481
</style>

‎app/pages/index.vue‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ defineOgImageComponent('Default', {
123123
<li v-for="framework in SHOWCASED_FRAMEWORKS" :key="framework.name">
124124
<LinkBase :to="packageRoute(framework.package)" class="gap-2 text-sm">
125125
<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"
127127
/>
128128
{{ framework.name }}
129129
</LinkBase>
@@ -139,3 +139,13 @@ defineOgImageComponent('Default', {
139139
</section>
140140
</main>
141141
</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>

0 commit comments

Comments
 (0)