Twitterのように、複数のカラースキーム（ライト、ダーク、ディムなど）の色定義を設定する方法を知りたいです。
現在の問題：
デフォルトのライトとダークの色（primary-lowなど、リストにないもの）はカスタムテーマコンポーネントでスタイル設定できますが、このカスタムカラーモードを別のカラースキームに追加する方法がわかりません。
$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;
$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
--primary-100:#{$ins};
--primary-low:#{$ins};
}
こんにちは 
Discourse はライトとダークの 2 つのカラースキームを処理できます。そのため、デバイスをダークモードに切り替えると、デフォルトで default dark mode color scheme id サイト設定が使用されます。
Discourse には、さらにカスタムカラーパレットを設定できます。
新しいカラーパレットは /admin/customize/colors ページで設定できます。
または
たとえば、カスタムテーマを使用している場合は、about.json ファイルでこれらを設定できます。
FKB Pro テーマなどで使用しているように。
この場合、これらのカラーパレットが /admin/customize/colors に追加されます。
これらのカラーパレットが追加されると、ユーザーはユーザー設定インターフェイスページで選択できます。有効にした場合。
dark-light-choose()
dark-light-choose() は、ライト/ダークの 2 つのカラースキームしか処理できません。カラーパレットは、デフォルトのものをオーバーライドするのではなく、カスタムカラー変数を設定するためだけに使うことをお勧めします。デフォルトのカラー変数をオーバーライドするには、上記の方法で行うことができます。
ユーザーがサイトのデフォルトのライト/ダークとは異なるカラーパレットをユーザー設定インターフェイスページで設定した場合、カラーパレットのライトまたはダークのすべてのカラー変数に対して、dark-light-choose() で作成したカラー変数が使用されます。
これが、私が次の Theme component を作成した理由の 1 つです。
このテーマコンポーネントでは、color-scheme="id" を個別にターゲットできます。
したがって、できることは次のとおりです
カラーパレット（ライト、ディム、ダーク）を作成する
上記のコンポーネントを使用して、必要に応じてディム
color-scheme="id"の色などを変更します。
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
