Allow wizard themes to support default dark mode variables

Here are the CSS variables on the homepage of my test instance, when ‘dark’ mode has been enabled under user preferences.

image

Here are the CSS variables on the homepage of my instance, when a ‘dark’ theme has been specified for the forum.

image

Here are the CSS variables on a new wizard I have created with no theme set (this is the same regardless of the theme selected for the whole forum, or the user’s dark mode preference):

image

Reproduction Steps:

  1. Enable ‘dark’ mode under user preferences or pick a dark color scheme for the discourse instance
  2. Create a new wizard
  3. Go to that wizard, observe the CSS variables
1 Like

Thanks for this report. Discourse dark mode has changed considerably recently.

How critical is this to your use? If it’s a blocker, I’ll prioritise it.

Thanks Angus,

This is not a blocker for a first iteration, but is something our users, who often use dark mode, would value.

1 Like

Ok, I’ll follow up about this one next week.

1 Like

Hi @angus - have you had an opportunity to look into this yet?

Hi @angus - happy new year! Just checking in on this one to see if it is on your radar.

.

This one too :wink:

1 Like

Hi @angus, hope you are well. Checking in again on this one.

@othomson Ok, I took a close look at this.

Firstly, this one is not a bug as there is a seperation between wizard and discourse themes, and the Custom Wizard Plugin has never supported theme swtiching (I’ve recategorised it). The CSS of wizards is different from the main Discourse app (indeed the wizard is an entirely seperate Ember app). When a user is selecting the “Dark” theme (or any other theme, theme swtiching is not just for light / dark) in their preferences, they are selecting a different theme for the Discourse client, with all the different assets of that theme color scheme, css, javascripts, theme components etc, not for the wizard client.

That said, I understand why this feels “unexpected”, and it’s something that I’ve considered off and on for some time for this reason. I took another dive into the discourse theming system and there is now a more straightforward way to seperate out the “color schemes” of different themes for the discourse client. I’ve tweaked the handling of wizard themes to use the color scheme associated with different themes selected for the discourse client as a base. Happily, a simple update.

This means that if a user selects a different theme in their user preferences, the color scheme associated with that theme (and nothing else in the theme) will be applied to the wizard via the :root variables. I think this is the expected outcome you’re pointing at in this report. And this will probably align with others’ expectations.

Let me know if you have any issues with it.

Thanks @angus! This sounds like the behavior I was expecting. I’ll dig into this soon and let you know if I run into any issues.

1 Like