@Volker_E seems like a quick win ?

To fix this, I believe we need to add media queries for high contrast mode to resources/skins.vector.styles/CSSCustomProperties.less, which sets up dark mode tokens in Vector.

@TheDJ I think this should be done at library level. Team discussion result pending.

I want to work on this issue. Can you provide me with its github link?

In T381642#10473776, @RJ2904 wrote:

I want to work on this issue. Can you provide me with its github link?

You can find all relevant information about codex at https://doc.wikimedia.org/codex/main/

@Volker_E I see above that you said this was pending team discussion -- is this ticket available to be claimed?

@Millipede88 @RJ2904 Thanks for your interest in this issue. May I ask upfront what would be your approach on fixing this issue? (Also, are you Windows users?)

Codex Icons are not visible in Windows high contrast mode + Wikipédia day mode. OOUI icons were fixed in T180890 to work with high contrast mode.

@Escargot_rouge just wanted to confirm the issue is with Windows high contrast mode and dark mode, right?

On digging further, the examples given are not (directly) affecting Codex, but the .vector-icon mashup of Codex icons. Which in turn could be a possibility to clean the code duplication up. cc: @Jdlrobson for visibility

In T381642#10530777, @CCiufo-WMF wrote:

Codex Icons are not visible in Windows high contrast mode + Wikipédia day mode. OOUI icons were fixed in T180890 to work with high contrast mode.

@Escargot_rouge just wanted to confirm the issue is with Windows high contrast mode and dark mode, right?

No. I tested again, and no matter if it is dark mode, light mode or automatic mode, codex icons (on Wikipedia) are never visible with any of the four windows high contrast mode.
I copied the task title from the previous task about OOUI, where dark mode referred to high contrast mode with light-colored text on a dark background.

In T381642#10530644, @Volker_E wrote:

@Millipede88 @RJ2904 Thanks for your interest in this issue. May I ask upfront what would be your approach on fixing this issue? (Also, are you Windows users?)

@Volker_E I think we should first update the CSS of the icons to make them compatible with Windows high contrast mode. This can be achieved by adding @media queries specifically for forced-colors: active to define fallback styles, such as border, color, and outline, using currentColor or system-defined colors like ButtonText. Additionally, the Vue icon component should be updated to include semantic attributes, such as role="img", and to ensure it supports high contrast mode through inherited styles (e.g., by using fill="currentColor" for SVGs).

I also have both Windows and Linux operating systems available.

@RJ2904 is correct. I see there is also an issue with the logo in light mode with high contrast enabled which is also a SVG image so I think this is more than just Codex - it's also any SVG image (see signature of https://en.wikipedia.org/wiki/Rihanna with light mode on).

I think what's happening here is an issue with "bring your own mask images". .vector-icon defines a base64 encoded mask image. Codex applications built in JavaScript use inline SVGs which set fill: currentColor. This doesn't apply to the base64 encoded mask images as they are treated as images not inline SVGs.

So some media queries should fix this. Something like:

@media ( forced-colors: active } { .vector-icon, .skin-invert { filter: invert(1) !important; } }

(but I couldn't get that working.. not 100% sure what media query targets high contrast mode)

I imagine there is additional work for Codex itself per @RJ2904 but this would at least get icons visible.

Actually, when I try to run Codex in my development environment on Windows to see the effects of high contrast mode, I get a lot of errors. However, when I do the same on Linux, it doesn't give any errors. Please help me with this.

@Volker_E do you have any documentation that can help me understand how to set up Codex on Windows?

@RJ2904 do you face issues working on this task?