Better theme settings on user front-end

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:

11

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

53

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

untitled1

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:

image

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