Dark mode logo doesn't work

Product Support

AI-generated summary

A user, tknospdr, reports that their dark mode logo disappears after the site switches to dark mode, despite uploading matching PNG logos for both modes under ‘APPEARANCE > Logo & fonts’. The issue occurs on desktop with a brand new install, no mods or themes. Heliosurge asks if they’re using the core Light/Dark toggle or an older theme component, and clarifies that separate logos exist for desktop and mobile. tknospdr confirms they’re using the default settings and that the issue is time-of-day triggered. Heliosurge notes the behavior is unusual and asks whether the browser/OS is in dark or light mode, suggesting past issues arose when manually forcing dark mode while the system was in light mode. tknospdr clarifies their browser/OS auto-switches based on time, and that the logo works during the day but breaks at night. Heliosurge explains the auto-switch should follow browser preference, and notes the default install is Test-Passed. Finally, tknospdr discovers via ‘inspect element’ that the missing logo was due to mixed content (HTTP resources on HTTPS pages) — enabling ‘force https’ resolves the issue. The root cause was a mixed-content security block, not a theme or toggle bug.

1

I uploaded logos for both light and dark mode. When the site toggles to dark I get what you see at the top of the pic.
Both logos are PNG files. They’re actually the same base SVG file. I just changed the colors and exported as PNGs.

The image shows a user interface for customizing logos and fonts on the Checkln website, indicating the checkmark image size should be 600 x 80 pixels with options to change or delete the logos and different colors. (Captioned by AI)
The image shows a user interface for customizing logos and fonts on the Checkln website, indicating the checkmark image size should be 600 x 80 pixels with options to change or delete the logos and different colors. (Captioned by AI)1358×1432 166 KB

3

Just to confirm are you using the Light/Dark toggle in core or the old Customization > Theme component?

Additionally there is light and Dark logos for Desktop and mobile.

If your on mobile you may need to upload the 2 logos in the mobile logo on that page in your pic. if not mistaken; if no logo uploaded it will use the main logo(the first one in your pic) for logos not uploaded.

4

This is a brand new install. No mods, themes, or anything installed.
I uploaded the logos under ‘APPEARANCE > Logo & fonts’.
This is happening on desktop.

5

Hmm.. this does seem unusual. We did have this kind of problem with the Light/Dark toggle before. Though in my XP it seemed to have been fixed.

Are you running Stable or Test-Passed? Is your Browser in dark mode or light mode? In the past when I experienced something similar it was due to manually choosing Dark Mode while the browser and OS was in light mode.

6

I used the official install instructions, so whatever that installs.

It changes automatically from light to dark based on time of day.
The logo works right during the day and then you see the missing logo when it changes.

7

That is odd. It is supposed to change automatically if set to auto based on your Browser if it is Light Mode or Dark

Unless you mean your browser/OS is setup to automatically switch based on time of day.

You can set it though to use a toggle in the Admin menu to have a switch in the sidebar or site header.

The Standard install installs Tests-Passed which is recommended version.

8

I did an ‘inspect element’ on the missing logo and found a bunch of lines referring to trying to serve http content from https pages, so I turned on the ‘force https’ setting and my logo showed up.