Topic on Skin talk:Citizen

Target the .skin-citizen-dark class for specific darkmode styles.

First of all I love this skin, it's great for me. However, on my website there are darker icons on my site and on dark theme it is very hard to see them. I have lighter versions of the icons, so I was wondering if there's a way to use those icons instead when dark theme is enabled.

You can create specific CSS rules in MediaWiki:Citizen.css

For the dark theme use html.skin-citizen-dark The selector for light mode html.skin-citizen-light

A "hacky" version would be to do something like

.skin-citizen-dark .icon-class {
filter: invert(1) hue-rotate(180deg);
}

This would invert the color from light to dark or vice versa

^ the hacky version is basically what is used for icons in the skin currently. Most of the time it works well enough.

You can also use the background-image rule to override the default icons if you wanted to