Icons disappear in Windows High Contrast Mode

[knowler]

Currently when viewing with Windows High Contrast Mode (WHCM) enabled almost none of the icons show up. This is because WHCM overrides the colours.

npmx.dev running in Microsoft Edge with Windows High Contrast Mode enabled.

The icon classes all seem to use color: inherit, so we can use forced-color-adjust: preserve-parent-color. We can provide this to the extraProperties option for the icons preset in the UnoCSS config:

npmx.dev/uno.config.ts

Lines 24 to 26 in 3cf7fef

	extraProperties: {
	display: 'inline-block',
	},

If you don’t have Windows, you can emulate forced colors in Chromium-browsers.

[userquin]

I use this rules:

@media (forced-colors: active) {
    .icon[class*="i-"], .icon[class^="i-"] {

        color: CanvasText !important;

        /* background-color: ButtonText; */
    }
    .button-active [class*="i-"],
    .button-active [class^="i-"] {
        background-color: Highlight !important;
    }
}

[RYGRIT]

I use this rules:

 @media (forced-colors: active) {
    .icon[class*="i-"], .icon[class^="i-"] {

        color: CanvasText !important;

        /* background-color: ButtonText; */
    }
    .button-active [class*="i-"],
    .button-active [class^="i-"] {
        background-color: Highlight !important;
    }
}```

Yeah, that's the rule I'm using, but I found a problem with the switch and color selection in the settings page, so I fixed it.