Discourse Free Plan setup - options are hard to read

In the setup page of the Discourse Free Plan, the options are quite hard to read:

6 Likes

@derek Tried to find this page, but you’ll be faster no doubt

2 Likes

Hey @NateDhaliwal! I couldn’t reproduce this in Chrome, Safari, and FF on MacOS in dark mode:

However, I did find a missing CSS variable on the dark mode background for those toggles that might be the culprit. Just pushed a fix:

4 Likes

Hi @derek , I’m still repo-ing this on Chrome, Windows 10.

Are you sure this isn’t a cache problem? Have you tried a hard (Ctrl+Shift+R) reload? Do you have dark reader installed?

Yup, just tried that, no change. No errors in the browser console (though I doubt it would appear there).

I just checked on my phone (iOS/Orion) and it looks as intended. Try going to /wizard on the site with a different browser, preferably one that hasn’t visited it before

1 Like

@NateDhaliwal I just tried this in Chrome on Windows 10 no luck reproducing it. Are you seeing this locally or on a hosted instance?

Could you inspect the toggle element in DevTools(Right click → Inspect) and share what you see in the styles pane?

1 Like

I’ve looked through the styles and this seems like the key part:

The --1e94960e-csstools-light-dark-toggle--2 variable is controlling the background color here.

From what I can tell, the --wizard-primary-900 variable is undefined, and the --csstools-color-scheme--light variable definition looks like this:

image

If one changes the background-color, or adding the variables and putting random colors like green or yellow, then things look more “correct” (though frankly, I have no idea why green or yellow don’t show up: I suspect it’s an incorrect syntax?):

3 Likes

Thanks for the details @NateDhaliwal. My hunch is that it’s related to that missing CSS var when light/dark mode is involved, and how it’s compiled via PostCSS. It looks like the browser may be falling back to the light mode background color, which is odd since I can’t reproduce this.

Judging by the screenshots, my fix hadn’t been deployed to your instance yet. It should be deployed there now, so give it another try and let me know if you still notice anything off.

1 Like