Is there a way to have two community Logos, one for dark mode and one for light mode?
A Wiki I run, based on a game has two logos that would match for light/dark but the theme designer only has one option for both themes.
You could use CSS, but it is always messy and could be desynced across browsers.
You could use JS, but I don't really use JS
I'm open to options, anything would be helpful.
https://css-tricks.com/replace-the-image-in-an-img-with-css/
https://css-tricks.com/css-image-replacement/ (older)
Thanks, I will have a look into it.
A simple solution to it would be the following CSS, replacing image URL with the full URL to desired logo image in dark mode:
.theme-fandomdesktop-dark .fandom-community-header__image img { content: url("image URL"); }
That's super helpful! Thanks so much.
Setting the content of an image only works on chrome, for firefox you'll need to set it on the parent element (I think it's an `a` element or something?) and then use content + some other CSS to make it work
Huh, I wasn't aware of that. Thank you for pointing it out. I think this'll work fine then:
.theme-fandomdesktop-dark .fandom-community-header__image { content: url("image URL"); max-height: 100px; max-width: 250px; }
Thanks for information this is very helpful.
Is the content property officially supported aside from pseudo-elements (::before and ::after)? I couldn't find any source for that.
What do you think?