fluentui-system-icons icon indicating copy to clipboard operation
fluentui-system-icons copied to clipboard

Poor contrast of icons in icons.md when GitHub is in dark mode

Open dziku86 opened this issue 3 years ago • 7 comments

When viewed in dark mode icons in icons.md are barely visible. image

dziku86 avatar Jan 06 '21 14:01 dziku86

If the icons can't be re-coloured to match the theme, then either add a backplate colour to make it contrast, or use a fill colour that works in both Light and Dark modes

mdtauk avatar Jan 06 '21 14:01 mdtauk

Theoretically it could be fixed by setting the fill/border in all SVGs to currentColor, then it matches the text color - that may not be the best idea for usage everywhere else though (probably).

goranalkovic avatar Jan 07 '21 20:01 goranalkovic

Theoretically it could be fixed by setting the fill/border in all SVGs to currentColor, then it matches the text color - that may not be the best idea for usage everywhere else though (probably).

I am not sure if GitHub's Markdown formatting has any special handling for SVG Fill Colours

mdtauk avatar Jan 07 '21 23:01 mdtauk

Yup, don't think that's changeable in markdown, the change would be have to be in the raw SVGs themselves, and the raw SVG code should be pasted into the page, not "importing" SVG as an <img>.

I guess that only leaves an option of making the icons 50% gray, which would be (mostly) readable in both modes.

goranalkovic avatar Jan 08 '21 18:01 goranalkovic

Yup, don't think that's changeable in markdown, the change would be have to be in the raw SVGs themselves, and the raw SVG code should be pasted into the page, not "importing" SVG as an <img>.

I guess that only leaves an option of making the icons 50% gray, which would be (mostly) readable in both modes.

Or in the Default Blue Accent #0078D4

mdtauk avatar Jan 08 '21 18:01 mdtauk

If you'd like to create a PR to fix the way this file is generated, feel welcome. It is handled in the generate_icons_md.py script. If not, we'll put it in our queue to fix when we get the time.

spencer-nelson avatar Jan 08 '21 18:01 spencer-nelson

On a related note (lack of browsing interface): https://github.com/microsoft/fluentui-system-icons/issues/194#issuecomment-801879278

danielweck avatar Mar 18 '21 12:03 danielweck

I have created a simple web page that loads up the markdown files from this repository. It's filterable and has light/dark themes. Switches based on user OS/browser settings.

https://dfkeenan.github.io/fluent-system-icons-search/

dfkeenan avatar Oct 09 '22 15:10 dfkeenan