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:

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๊ฐœ์˜ ์ข‹์•„์š”

I think the <big> fix ruined itโ€ฆ

2๊ฐœ์˜ ์ข‹์•„์š”

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๊ฐœ์˜ ์ข‹์•„์š”

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๊ฐœ์˜ ์ข‹์•„์š”

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๊ฐœ์˜ ์ข‹์•„์š”

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๊ฐœ์˜ ์ข‹์•„์š”

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

5๊ฐœ์˜ ์ข‹์•„์š”

์ด ๊ธฐ๋Šฅ์ด ์ด๋ฏธ ๊ตฌํ˜„๋˜์—ˆ๋‚˜์š”? ๊ตฌ์ฒด์ ์œผ๋กœ, ํ…Œ๋งˆ ์ปดํฌ๋„ŒํŠธ์— ๋Œ€ํ•œ ์‚ฌ์šฉ์ž ์„ค์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‹จ์ˆœํ•จ์„ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๋‹จ๊ธฐ ๋กœ๋“œ๋งต์—์„œ ์ œ์™ธํ–ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค๋งŒ, ํ–ฅํ›„์—๋„ ๊ตฌํ˜„๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์‚ฌ์šฉ ์‚ฌ๋ก€์— ๋”ฐ๋ผ ์ฟ ํ‚ค๋‚˜ localStorage๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋””๋ฐ”์ด์Šค๋ณ„ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ํ•ด๋‹น ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค: https://github.com/discourse/discourse-defer/blob/master/common/head_tag.html

6๊ฐœ์˜ ์ข‹์•„์š”

์™„๋ฒฝํ•˜๋„ค์š”, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ์ด๋Ÿฐ ์˜ˆ์‹œ๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฑด ์•Œ์•˜๋Š”๋ฐ ์ฐพ์ง€ ๋ชปํ–ˆ๊ฑฐ๋“ ์š”. ์ฒดํฌ๋ฐ•์Šค ๋Œ€์‹  ํ…์ŠคํŠธ ์ž…๋ ฅ ํ•„๋“œ๊ฐ€ ํ•„์š”ํ•  ๊ฒƒ ๊ฐ™์•„์š”. Hopefully ์•Œ์•„๋‚ผ ์ˆ˜ ์žˆ๊ฒ ์ฃ .

2๊ฐœ์˜ ์ข‹์•„์š”