# 用户前端更优的主题设置

**URL:** https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477
**Category:** UX
**Created:** [2018年一月19日 14:12 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477 "2018-01-19T14:12:01Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2018年一月19日 14:12 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/1 "2018-01-19T14:12:01Z")

</div>

Continuing the discussion from [We need a "large fonts" and "small fonts" theme to ship with Discourse](https://meta.discourse.org/t/we-need-a-large-fonts-and-small-fonts-theme-to-ship-with-discourse/60879/35):

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

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

 ![11](https://global.discourse-cdn.com/meta/original/3X/4/3/43674e7602082ffba87f1689004f0a94bc1902b8.png)

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

 ![53](https://global.discourse-cdn.com/meta/original/3X/5/6/56f0485030b7f4a4bee2a2e96b6cb0302591df95.png)

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

 ![untitled1](https://global.discourse-cdn.com/meta/original/3X/a/9/a962ca8ca4c27473508e82b5fdf3030000bfdfcf.png)

---

<div class="post-metadata">

### Author: ![notriddle](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/notriddle/32/133055_2.png) [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [2018年一月19日 16:23 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/2 "2018-01-19T16:23:46Z")

</div>

I think the [`<big>` fix](https://meta.discourse.org/t/topic-nuking-a-serious-glitch/78455) ruined it…

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2018年一月19日 16:35 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/3 "2018-01-19T16:35:06Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/big). `<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.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年一月22日 02:43 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/4 "2018-01-22T02:43:21Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/c/1/c169f13c6701650690933315051bdd7fc8e0fdd7.png)

> [@erlend\_sh](#):
>
> But user interface for changing these settings is currently very basic:

Note, that screen shot is a “theme”, not default behaviour. My [user selectable theme hamburger thingy ™](https://meta.discourse.org/t/hamburger-theme-selector/61210) would have to be expanded to support this.

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [2018年一月22日 11:41 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/5 "2018-01-22T11:41:19Z")

</div>

> [@sam](#):
>
> The plan has always been to add “user selectable theme components”

I suspected that might be a prerequisite for this feature.

> [@sam](#):
>
> My user selectable theme hamburger thingy ™ would have to be expanded to support this.

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.

---

<div class="post-metadata">

### Author: ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### Post date: [2018年二月3日 04:18 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/6 "2018-02-03T04:18:14Z")

</div>

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:

 ![54%20PM](https://global.discourse-cdn.com/meta/original/3X/3/a/3afc5955f5be49146dc647e8354c5165e1943973.png)

Can’t wait for this feature!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2019年一月14日 18:58 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/7 "2019-01-14T18:58:55Z")

</div>

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

> [@We need a "large fonts" and "small fonts" theme to ship with Discourse](https://meta.discourse.org/t/we-need-a-large-fonts-and-small-fonts-theme-to-ship-with-discourse/60879/37):
>
> Per-user font size selection is now part of Discourse. You’ll find the setting under your interface preferences.

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [2019年十二月12日 12:53 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/8 "2019-12-12T12:53:58Z")

</div>

> [@david](#):
>
> 我们仍计划在未来提供用户可选的主题偏好设置。

这已经实现了吗？具体来说，我需要一个用于主题组件的用户设置。

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [2019年十二月12日 12:57 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/9 "2019-12-12T12:57:00Z")

</div>

为了保持简洁，我们已将其从短期路线图移除。不过，未来仍有可能实施。

根据您的使用场景，您可以使用 Cookie 或 localStorage 来保存每个设备的数据。以下是示例：[https://github.com/discourse/discourse-defer/blob/master/common/head\_tag.html](https://github.com/discourse/discourse-defer/blob/master/common/head_tag.html)

---

<div class="post-metadata">

### Author: ![danekhollas](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danekhollas/32/79637_2.png) [@danekhollas](https://meta.discourse.org/u/danekhollas)
#### Post date: [2019年十二月12日 13:18 UTC](https://meta.discourse.org/t/better-theme-settings-on-user-front-end/78477/10 "2019-12-12T13:18:00Z")

</div>

太棒了，谢谢！我知道有这个示例，但一时没找到。我需要的是一个文本输入框（不是复选框），希望我能搞定。
