ユーザーフロントエンドでのテーマ設定の改善

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

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:

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

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

素晴らしい、ありがとう!これの例があることは知っていたけど、見つけられなかったんだ。テキスト入力(チェックボックスじゃなくて)が必要になると思うけど、なんとかしてみせるよ。

「いいね!」 2