Better theme settings on user front-end

AI-generated summary

The discussion revolves around improving theme settings on the user front-end in Discourse. erlend_sh initiated the conversation, suggesting a more user-friendly interface for changing theme settings, such as dark/light mode and font sizes, citing an example from GitBook.

awesomerobot noted that the <big> fix might have caused issues, but sam explained that the plan is to add “user selectable theme components,” which would allow users to customize their theme preferences.

erlend_sh suggested that the font sizer, a key accessibility feature, should be a default feature for every theme, either bundled into core or made a default theme component.

tshenry proposed a drop-down menu for each set of selectable theme components, making it a cleaner presentation for users.

david mentioned that per-user font size selection is now part of core, but user-selectable theme preferences are still planned for the future.

danekhollas inquired about the status of user-selectable theme preferences and was informed by david that it has been taken off the short-term roadmap. However, david provided an example of using cookies or localStorage to save per-device data.

Continuing the discussion from We need a "large fonts" and "small fonts" theme to ship with Discourse:

Our themes now support dark/light/{any-color-scheme} toggles as well as variable font sizes :tada:

But user interface for changing these settings is currently very basic:

We should have something closer to this (from GitBook):

I don’t have access to my usual image editor so here’s a cruder mockup than usual:

16 Likes

I think the <big> fix ruined it…

2 Likes

It shouldn’t have ruined anything except scaling for <big> and <small> tags, which should be avoided because they’re obsolete specifications that can be removed at any moment. <big> specifically is very bad because it will nest and scale infinitely if defined with ems.

I can probably change the <big> definition to a rem unit to prevent the exploit and allow at least some scaling based on the root font-size, but it still should be considered as relevant as the <blink> tag.

11 Likes

The plan has always been to add “user selectable theme components”

That means you can also flag “components” as selectable by end users. This would be done here:

Note, that screen shot is a “theme”, not default behaviour. My user selectable theme hamburger thingy ™ would have to be expanded to support this.

9 Likes

I suspected that might be a prerequisite for this feature.

Wouldn’t we want this front end widget (in particular the font sizer, which is a key accessibility feature) to be a default feature for every theme? So either (a) it should be bundled into core somehow, or (b) that theme component would be a default for all themes somehow, but the former sounds a lot easier to me.

9 Likes

I like this so much it hurts. Having a drop-down for each set of selectable theme components would make it a much cleaner presentation for the user. This is extreme granted, but instead of having a single dropdown with:

Standard Theme (Light w/ Normal Font)
Standard Theme (Light w/ Large Font)
Standard Theme (Dark w/ Normal Font)
Standard Theme (Dark w/ Large Font)
Standard Theme (Other Color Scheme w/ Normal Font)
Standard Theme (Other Color Scheme w/ Large Font)
Sam’s Simple Theme (Light w/ Normal Font)
Sam’s Simple Theme (Light w/ Large Font)
Sam’s Simple Theme (Dark w/ Normal Font)
Sam’s Simple Theme (Dark w/ Large Font)
Sam’s Simple Theme (Other Color Scheme w/ Normal Font)
Sam’s Simple Theme (Other Color Scheme w/ Large Font)
Material Design Theme (Light w/ Normal Font)
Material Design Theme (Light w/ Large Font)
Material Design Theme (Dark w/ Normal Font)
Material Design Theme (Dark w/ Large Font)
Material Design Theme (Other Color Scheme w/ Normal Font)
Material Design Theme (Other Color Scheme w/ Large Font)
Vincent Theme (Light w/ Normal Font)
Vincent Theme (Light w/ Large Font)
Vincent Theme (Dark w/ Normal Font)
Vincent Theme (Dark w/ Large Font)
Vincent Theme (Other Color Scheme w/ Normal Font)
Vincent Theme (Other Color Scheme w/ Large Font)
etc…

You’d be able to have something like:

Can’t wait for this feature!

15 Likes

We’re still planning user-selectable theme preferences for the future, but per-user font size selection is now part of core:

5 Likes

Has this been done? Specifically, I need an user setting for a theme component.

We have taken it off the short-term roadmap in the interest of keeping things simpler. It may still happen in the future though.

Depending on your use case, you might be able to use cookies or localStorage to save per-device data. Here’s an example of that: https://github.com/discourse/discourse-defer/blob/master/common/head_tag.html

6 Likes

Awesome, thanks! I knew there was an example of this but couldn’t find it. I’m gonna need a text input (not a checkbox), hopefully I’ll figure it out.

2 Likes