I’m experimenting with color schemes that have a dark header background, but a light site background. Is there a way I can mark these color schemes so they pick up the dark mode logo anyways? (since it has light text)

Hi @FroggyC :wave: perhaps these may help: [image] Automatic Dark Mode color scheme switching megaphoneAnnouncements You can now set up your Discourse site to automatically switch color schemes when the user’s device is in dark mode. For a quick preview, head over to the try.discourse.org instance and toggle your device’s dark mode on and off to see this new feature in action. (This feature not enabled on meta.) Enabling automatic dark mode To enable this feature on your instance, you can pick the dark mode color scheme in your site settings: [image] Once that setting is set, you can reload your site with … [image] Is it possible to set logo image per theme? Support The logo, that is black color in a light theme, becomes invisible when switching to a (material design) dark theme. So, it’d be convenient to set a logo per a theme. [image] Force Dark Mode Logo Support Sorry but I don’t think I understand what you want to accomplish. Please correct me if I’m wrong: You have two logos: one blue and one white. The blue logo is for your theme in a color palette with white background. And you want the white logo to show up with a different theme that has a color palette with a black header, correct? For the dark mode logo to show up, you have to create the color palette from one of the dark base palettes (like Dark and WCAG Dark) then adjust the colors to your … [image] Logo-related features Feature Could we get a “logo dark” option? And maybe even a “Use default site logos” checkbox?! (I hope to contribute to this kind of thing soon, but above my coding pay grade at the moment. Thank you for a wonderful component!)

[image] FroggyC: Is there a way I can mark these color schemes so they pick up the dark mode logo anyways? (since it has light text) Hmm, not easily. Our calculation for dark mode logos is based on whether the whole color scheme is considered dark, and for that we compare the brightness of the primary and the secondary color. That calculation happens here in the code. Your use case doesn’t quite match that scenario, though. You could write a theme override of the logo that defaults to the dark one, but then you’d need users to switch themes as well as color schemes… tricky. I’m guessing you want to allow users to select multiple color schemes, right?

Yes, I’m running a single theme instance and I’d like to keep it that way. It’s much simpler for the users. I’d be happy with some hacky solution, like being able to inject custom CSS/JS based on the color scheme. But ideally, each color scheme should have an option—in my opinion—to determine whether it picks up the dark or the light logo. Deciding automatically based on the base background color doesn’t work, exactly because the header background could be completely different.

[image] FroggyC: But ideally, each color scheme should have an option—in my opinion—to determine whether it picks up the dark or the light logo. That may be desirable, I’m not entirely sure really, but even if it is, it’s a tricky thing for a color scheme to control. In a sense, having a color scheme pick its logo would mean the color scheme would reach out too much outside of its own scope. This complicates any possible hacks too. We don’t currently have a way to add CSS or JS based on a color scheme’s name or id.

[image] FroggyC: I’m experimenting with color schemes that have a dark header background, but a light site background. Is there a way I can mark these color schemes so they pick up the dark mode logo anyways? (since it has light text) hmmm what about specific color in the theme palette? like a conditional CSS for the logo based on the header color?

[image] FroggyC: But ideally, each color scheme should have an option—in my opinion—to determine whether it picks up the dark or the light logo. I really agree with that. On my forum we have a pink colorscheme. It has a pink title bar and a light secondary color. In the Light colorsheme, the title bar looks like this: [image] In the pink colorshceme, we expect the logo to look like this, just like the dark mode logo: [image] But what we actually get is this, Because discourse simply regards it as adapting the light mode logo: [image] In the end, we used some less elegant theme components to make the logo influenced by the header color. We are slightly distressed by the automatic determination of how dark and light color modes affect the logo.

I mean, it doesn’t seem to me like that’d be reaching outside of the scope of a color scheme. I’m not talking about custom per-color-scheme logos, I’m just asking for a setting to determine whether the color scheme should summon the light mode or dark mode logo, instead of it being automatically determined. Automatic detection can still be the default behavior. I’m imagining a dropdown called Logo Detection with options Automatic, Light, and Dark. Then whatever code you have that makes the determination, can see that checkbox and check the background color if it’s automatic, or just pick the specified logo. That seems to me like information that’s semantically relevant to a color scheme, and not at all a major feature.

I’d love if you could share your solution, @Lhc_fl. It’d at least be a temporary workaround for me.

If you can explain more how that’d work, @Lilly, I’m all ears.

We made each colorscheme into a theme separately…

How to control if a color scheme gets the dark or the light logo?

Product Support

FroggyC August 25, 2023, 12:29pm 12

Ah, too bad. Thanks.

Topic		Replies	Views
Force Dark Mode Logo Product Support	3	873	April 18, 2021
Automatic dark/light theme logo switching Product Support auto-dark	13	1185	September 5, 2023
Automatic dark mode picks wrong logo unless correct colour palette is selected manually Bug	7	1433	June 22, 2022
How to make the automatic dark theme the same as the selected dark theme? Product Support dark-theme , dark-mode-toggle	10	826	December 14, 2024
Logo not changing automatically on changing dark/light scheme UX fixed	8	859	July 21, 2024

How to control if a color scheme gets the dark or the light logo?

Related topics