fix: icons disappear in Windows High Contrast Mode by RYGRIT · Pull Request #1150 · npmx-dev/npmx.dev

RYGRIT · 2026-02-07T14:20:05Z

freecompress-2026-02-07.22-06-31.mp4

…ntrast-mode

vercel · 2026-02-07T14:20:13Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Feb 8, 2026 7:16am
npmx.dev	Ready	Preview, Comment	Feb 8, 2026 7:16am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 8, 2026 7:16am

codecov · 2026-02-07T14:21:54Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

userquin · 2026-02-07T14:22:16Z

nice ❤️

coderabbitai · 2026-02-07T14:23:29Z

📝 Walkthrough

Walkthrough

Adds forced-colours accessibility handling: a new annotated @media (forced-colors: active) block (commented in app/assets/main.css) plus active forced-colours CSS in several components (AccentColorPicker.vue, BgThemePicker.vue, Toggle.client.vue, app/pages/index.vue) to preserve visibility of icons, radio swatches, toggle switches and the homepage accent dot under Windows forced-colours. Also updates uno.config.ts to add forced-color-adjust: 'preserve-parent-color' for the icons preset. Changes are CSS-only and additive; no runtime logic changes.

Possibly related PRs

fix: remove border opacity on toggle #1011: Modifies app/components/Settings/Toggle.client.vue styling for toggle visibility/contrast (accessibility-focused CSS changes), closely related at the component styling level.

Suggested reviewers

danielroe
RamaHerbin
shuuji3

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description references issue `#1130` and includes a video attachment, which relates to the changeset addressing icon visibility in Windows High Contrast Mode.
Linked Issues check	✅ Passed	The PR successfully implements the core requirement from issue `#1130`: applying forced-color-adjust properties to preserve icon visibility in Windows High Contrast Mode across components and configuration.
Out of Scope Changes check	✅ Passed	All changes are scoped to addressing Windows High Contrast Mode visibility, with CSS/styling adjustments collocated to affected components and configuration, with no unrelated modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/Settings/AccentColorPicker.vue (1)

63-74: Confirm CSS nesting support or flatten the forced‑colours selectors.

This block relies on CSS nesting (&:has(...)). If the build or target browsers don’t support nesting, the forced‑colours fix won’t apply. Consider flattening selectors to be safe.
Suggested non‑nested equivalent
 `@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;
-    }
   }
+  label:has(> input:checked) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
 }

app/components/Settings/Toggle.client.vue (1)

55-79: Confirm CSS nesting support or flatten the forced‑colours selectors.

These nested selectors require CSS nesting support. If unsupported, the forced‑colours styles will be ignored. A flat selector form avoids that risk.

Suggested non‑nested equivalent

 `@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;
-      }
-    }
-  }
+  button[role='switch'] > span:last-of-type {
+    forced-color-adjust: none;
+  }
+  button[role='switch'][aria-checked='false'] > span:last-of-type {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+  button[role='switch'][aria-checked='false'] > span:last-of-type > span {
+    background: CanvasText;
+  }
+  button[role='switch'][aria-checked='true'] > span:last-of-type {
+    background: Highlight;
+    border-color: Highlight;
+  }
+  button[role='switch'][aria-checked='true'] > span:last-of-type > span {
+    background: HighlightText;
+  }
 }

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

app/assets/main.css (1)
207-211: Fragile selector based on utility class combination.

This selector depends on a specific combination of utility classes (bg-accent, rounded-full, w-1, h-1). If any of these classes change in the component, this rule will silently break. Consider adding a dedicated class (e.g., .homepage-tag-dot) or a data-* attribute to make this selector more robust.
♻️ Suggested approach

Add a dedicated class to the element in the component:
-:where([class~='bg-accent'][class~='rounded-full'][class~='w-1'][class~='h-1']) {
+:where(.tag-dot) {
   forced-color-adjust: none;
   background: CanvasText;
 }
Then add the .tag-dot class to the element in the relevant Vue component alongside the existing utility classes.

uno.config.ts

userquin

LGTM

carwack

LGTM!

I added a suggestion nit pick, but I don't think changes are really required!

carwack · 2026-02-07T14:54:46Z

app/assets/main.css

+  button[role='switch'][aria-checked='false'] > span:last-of-type {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+
+  button[role='switch'][aria-checked='false'] > span:last-of-type > span {
+    background: CanvasText;
+  }
+
+  button[role='switch'][aria-checked='true'] > span:last-of-type {
+    background: Highlight;
+    border-color: Highlight;
+  }
+
+  button[role='switch'][aria-checked='true'] > span:last-of-type > span {
+    background: HighlightText;
+  }


Nit pick: css does support nesting now, I do think this could be nested down.

Updated to use CSS nesting in the components. Thanks for the suggestion!'❤️

knowler

Can we colocate any page specific changes with the corresponding page?

knowler · 2026-02-07T15:05:34Z

app/assets/main.css

+  :where([class^='i-'], [class*=' i-']) {
+    forced-color-adjust: none;
+    color: CanvasText;
+  }


@userquin This overrides the effect of forced-color-adjust: preserve-parent-color that is being applied with the UnoConfig. Which do you think is better?

oh, sorry, I didn't see this comment: that's why I use icon class in the selector (check my comment in linked issue), if not present I add the corresponding colors

…ntrast-mode

RYGRIT · 2026-02-08T07:09:55Z

Can we colocate any page specific changes with the corresponding page?

@knowler You are absolutely right! I re-tested the pages used in most scenarios and found that the default preserve-parent-color property handles the icons correctly in most cases.

To keep the code clean, I've temporarily commented out the global override styles in main.css, but kept them as a reference in case we encounter any special situations where masking/inheritance fails (e.g., in certain button states or with transparent backgrounds).

Additionally, as you suggested, I have moved all other specific styles (homepage dots, settings switches) to their respective components.

RYGRIT added 4 commits February 7, 2026 21:49

fix: preserve icon colors in forced-colors mode

a3a5b37

fix: restore settings controls and tag dots in forced-colors mode

8511430

fix: improve forced-colors toggle contrast

794ab2c

Merge remote-tracking branch 'upstream/main' into fix/windows-high-co…

714b511

…ntrast-mode

vercel bot deployed to Preview – npmx.dev February 7, 2026 14:21 View deployment

coderabbitai bot reviewed Feb 7, 2026

View reviewed changes

uno.config.ts Outdated Show resolved Hide resolved

chore: typo

e1d81d5

vercel bot deployed to Preview – npmx.dev February 7, 2026 14:39 View deployment

vercel bot deployed to Preview – npmx.dev February 7, 2026 14:41 View deployment

userquin approved these changes Feb 7, 2026

View reviewed changes

carwack approved these changes Feb 7, 2026

View reviewed changes

knowler reviewed Feb 7, 2026

View reviewed changes

RYGRIT added 2 commits February 8, 2026 15:07

refactor: colocate WHCM styles and disable global icon override

00bbd51

Merge remote-tracking branch 'upstream/main' into fix/windows-high-co…

b562f5b

…ntrast-mode

vercel bot deployed to Preview – docs.npmx.dev February 8, 2026 07:16 View deployment

vercel bot deployed to Preview – npmx.dev February 8, 2026 07:16 View deployment

danielroe approved these changes Feb 8, 2026

View reviewed changes

danielroe added this pull request to the merge queue Feb 8, 2026

Merged via the queue into npmx-dev:main with commit 77a7aa8 Feb 8, 2026
17 checks passed

coderabbitai bot mentioned this pull request Feb 11, 2026

perf: optimize css chunks #1375

Open

Uh oh!

Comments

Conversation

RYGRIT commented Feb 7, 2026

Uh oh!

vercel bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 7, 2026

Codecov Report

Uh oh!

userquin commented Feb 7, 2026

Uh oh!

coderabbitai bot commented Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

userquin left a comment

Choose a reason for hiding this comment

Uh oh!

carwack left a comment

Choose a reason for hiding this comment

Uh oh!

carwack Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

RYGRIT Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

knowler left a comment

Choose a reason for hiding this comment

Uh oh!

knowler Feb 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

userquin Feb 8, 2026

Choose a reason for hiding this comment

Uh oh!

RYGRIT commented Feb 8, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

vercel bot commented Feb 7, 2026 •

edited

Loading

coderabbitai bot commented Feb 7, 2026 •

edited

Loading

knowler Feb 7, 2026 •

edited

Loading