Change logo on dark mode toggle.

wylzn

Anomalum I've just been reading your forum before you posted that (I found you cause of the like!)

Anomalum

wylzn Did you see the automated dark/light mode code concept?

It's currently being tested right now (since this morning), and I should be able to ascertain by tomorrow whether it functions as intended. If it does, we could probably figure out how to integrate your dynamic logo switching with it too. If you wanted if course. There's a bunch of other very similar ideas I'm intending to test asap.

wylzn

A few things; like the id:forum-logo does not exist in the vanilla flarum. I'm also using the fof/nightmode extension which has it's own weird parameters (i think)

Anomalum

wylzn Yeah, I think it's possibly meant to be Header-logo instead of forum-logo.

What's the fof/nightmode extension all about?
I'm loosely guessing that it maybe enables frontend/user dark/light mode toggling or something?

wylzn

Anomalum it adds a button to toggle light and dark mode, but as an extension

hf06

wylzn Here's a simpler way to do this. You can achieve it with CSS.

All you need to do is add the dark logo using CSS and hide it in day mode. Additionally, hide the regular logo in night mode.

If you tell this request to an AI, it will give you the necessary CSS code. If you encounter any issues, let me know, and I'll prepare the CSS code for you.

Anomalum

hf06 😎👍Nice!

hf06

/* Dark mode active */
body when (@config-dark-mode = true) {
    .Header-title .Header-logo {
        display: none; /* Hide default logo */
    }

    .Header-title::before {
        content: url('https://www.domain.com/assets/dark-logo.png'); /* Change dark mode logo url !!! */
        display: inline-block;
        float: left;
        vertical-align: top;
        font-size: 18px;
        font-weight: normal;
        margin: 0 15px 0 0;
        line-height: 34px;
    }
}

/* Day/Light Mode */
body when (@config-dark-mode = false) {
    .Header-title::before {
        display: none; /* Hide dark mode logo */
    }

    .Header-title .Header-logo {
        display: inline-block; /* Show default logo */
    }
}

wylzn Add the following code to the custom CSS section in the admin panel, and remember to update the URL for dark-logo.png. Let me know if you run into any issues.

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.

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

hf06

/* Dark mode active (invert logo) */
body when (@config-dark-mode = true) {
    .Header-logo {
        filter: invert(1); /* Change logo color */
    }
}

After preparing the previous CSS code, I re-read your first message and noticed:

wylzn The logo for my forum has black text

If your logo is text-only, this CSS will work for you.

With this simple CSS, you can invert the colors in your logo, turning black to white. If you're using a single-color logo, this should be sufficient.

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 😄