fluentui-system-icons
fluentui-system-icons copied to clipboard
Poor contrast of icons in icons.md when GitHub is in dark mode
When viewed in dark mode icons in icons.md are barely visible.
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
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).
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
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.
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
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.
On a related note (lack of browsing interface): https://github.com/microsoft/fluentui-system-icons/issues/194#issuecomment-801879278
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/