Icons that automatically change background color based on the user's theme

Icinga Web
1

Hi,

I’m using IcingaWeb’s default themes (dark and light) and trying to create icons (for hosts, services, and other module assets) that automatically change their background color based on the user’s theme.

Could anyone tell me if this is possible?

I tried using SVG icons (rendered with the <svg> tag and fill="currentColor") in my personal module, and it works fine. Unfortunately, that doesn’t work for SVG or PNG icons rendered using the <img> tag.

Has anyone else tried something like this?

  • Icinga Web 2 version: 2.12.4
  • Icinga DB version: v1.4.0
  • Icinga DB Web version: 1.2.0
  • Icinga Redis version: 7.2.9
  • Web browser: Google Chrome 137.0.7151.120
  • Icinga 2 version: r2.15.0-1
  • PHP version: 8.3.6
  • Server operating system and version: Ubuntu Server 24.04.2 LTS
2

I just got the new theme from the @linuxfabrik and somehow they did it.

image
image294×231 11.9 KB

image
image328×250 17 KB

1 Like
3

Hi,

yes, we implemented that in our Linuxfabrik’s IcingaWeb2 Theme. We provide transparent SVGs with the icon itself in black (e.g. global icons as well as for each check individually, e.g. apache-httpd-status), and then invert them based on the theme via css: icingaweb2-theme-linuxfabrik/public/css/themes/linuxfabrik.less at 7a9b7bbc5f0d573949c455df3fd7345d8aa000f3 · Linuxfabrik/icingaweb2-theme-linuxfabrik · GitHub

You can test the effect on our Icinga demo instance.

Hope this helps :slight_smile:

2 Likes
4

Hi,

Thanks, Dominik and Linuxfabrik! That was really helpful. I followed your tips and it’s working now.

1 Like