Change logo on dark mode toggle.

wylzn

hf06 this seems to be the closest im getting however, the new dark logo is larger than the default logo, altho being the same size as eachother

hf06

wylzn

hf06 Note: Make sure the dark mode logo has the exact same dimensions as the default logo. For example, 134x30px should work, with a height of 30px likely being sufficient

I mentioned that the height of the dark mode logo should be set to 30px or according to the height of the default logo

wylzn

hf06 by editing line-height: or height (none of these worked)

hf06

wylzn Yes, I know. What I'm trying to say is that the actual image size should be something like 134x30px. The height of 30px will be enough.

Since English is not my native language, I’m just trying to make sure I'm expressing it correctly. You should set the image at its actual resolution with a height of 30px

wylzn

hf06 it works, ish, but the new darkmode icon is a few pixels higher than the light mode one, is that fixable?

wylzn

hf06 i found a shorter way to do this!

body when (@config-dark-mode = true) {
    .Header-title .Header-logo {
        content: url('https://www.domain.com/assets/dark-logo.png');
    }

does the trick perfectly

wylzn

ah! my bad, i'll work on it now and let you know

hf06

wylzn makes a lot of sense; i guess i was too focused on hiding the default logo 😂

We ended up finding at least five different ways to do it

wylzn it works, ish, but the new darkmode icon is a few pixels higher than the light mode one, is that fixable?

I want to mention this method in case someone else can apply it. I used Flarum's own logo as an example because it has a height of 30px. However, the aspect ratio of your logo may differ. You can check the displayed height of your default logo in the developer console.

wylzn

hf06 i was searching for ways to do this thinking it was a bunch of code, not realising it was something i could have figuired out myself.. haha! good job guys!

wylzn

hf06 I know this thread is LONG dead however, I still can’t wrap my head around why the old logo was a pixels higher than the old one with the original css, the logo was the exact same no dimensions changed at all

Anomalum

😃Far out! I am genuinely impressed!
Well done @wylzn & @hf06

hf06

wylzn to be honest, I haven't tested the css code I gave. If you want, I can test it and review it sometime 😄

wylzn

hf06 it’s upto you honestly! I tested it and it sort of worked and I couldn’t find an issue but I may be completely dense… If you wanna check it out though I’d be glad to try my best in supporting (mostly morally)

« Previous Page