Skip to main content
Solved

SVG icons and darkmode Universal GUI

  • May 20, 2025
  • 1 reply
  • 32 views

Forum|alt.badge.img+6

Some time ago (few years now) I replaced all PNG icons by SVG icons because of the future Universal Dark mode that apperently flips the BW colors? At least that is what I was told.

 

During testing of the Universal GUI I notice that when I switch to dark mode some icons are shown white on the dark background, some are partially white and partially black and most of them are just shown black on the almost black dark mode background.

I ran the “Decolorize all SVG icons that contain a black fill color” enrichment but that didn't correct the behaviour.

The first icon I dug into (The globe with KIN in it) was one altered (originally downloaded from icons8.com) in inkscape resulting in quite a lot of metadata.
I used https://jakearchibald.github.io/svgomg/ to clean my svg but the end result is still the same:

 

I couldn’t find a task that showed the icon all white but there is one in the menu:
 

I have attached a selection of icons used in the screenshots.

Best answer by Remco

Hi ​@Alban_T ,

Universal does indeed change the colors of SVG icons depending on whether dark or light mode is active. However, this only works if the SVG icons do not contain embedded styling metadata—which, in your case, they do. As a result, Universal respects the existing styling settings in the icons.

The enrichment does a best-effort attempt to remove such styling, but this is not guaranteed to be fully effective. In your case, the styling metadata needs to be manually removed from the SVG icons to ensure compatibility with Universal's dark and light modes.

Perhaps someone in the community has experience with this and can assist you further.

 

Hope this helps.

Kind regards

Remco

View original
Did this topic help you find an answer to your question?

1 reply

Remco
Moderator
Forum|alt.badge.img+3
  • Moderator
  • 42 replies
  • Answer
  • May 20, 2025

Hi ​@Alban_T ,

Universal does indeed change the colors of SVG icons depending on whether dark or light mode is active. However, this only works if the SVG icons do not contain embedded styling metadata—which, in your case, they do. As a result, Universal respects the existing styling settings in the icons.

The enrichment does a best-effort attempt to remove such styling, but this is not guaranteed to be fully effective. In your case, the styling metadata needs to be manually removed from the SVG icons to ensure compatibility with Universal's dark and light modes.

Perhaps someone in the community has experience with this and can assist you further.

 

Hope this helps.

Kind regards

Remco


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings