このガイドでは、Discourseサイトのテーマでライトモードとダークモードのカラーパレットを設定する方法を説明します。テーマごとの設定、パレットの割り当て、ユーザーインターフェイスに関する考慮事項について説明します。
必要なユーザーレベル: 管理者
個別のライトモードとダークモードのカラーパレットを設定できるようにすることで、Discourseコミュニティをブランドに合わせて表示し、アクセシビリティを向上させ、ユーザーに表示体験を制御する機能を提供できます。Discourseのテーマ設定における最近の改善により、各テーマに優先するライトおよびダークパレットを割り当て、ユーザーが希望する外観を選択できるようになりました。
概要
このガイドでは以下の項目を扱います。
- ライトモードとダークモードのパレットの割り当てを理解する
- テーマにライトおよびダークのカラーパレットを割り当てる
- サイトのカラーパレットを管理する
- ユーザー向けのカラーモードセレクターを有効にする
- ユーザー向けのオプションを理解する
- パレットの使用とアクセシビリティに関するベストプラクティス
ライトモードとダークモードのパレットの割り当てを理解する
Discourseのテーマは、「ライト」と「ダーク」のカラーパレットの明示的な割り当てをサポートしています。これにより、ユーザーのシステム設定に基づいてテーマが自動的に切り替わるようにしたり、ユーザーが好みのモードを選択できるようにしたりしながら、好みのブランドカラーを維持できます。
テーマへのライトおよびダークパレットの割り当て
テーマのカラーパレットを設定するには、次の手順に従います。
-
管理者 > 外観 > テーマとコンポーネントへ移動します (
/admin/config/customize/themes) -
編集したいテーマをクリックします。
-
テーマ設定で、カラーパレットセクションを見つけます。
-
カラーパレットとダークカラーパレットの両方について、使用したいパレットを選択します。
-
テーマ設定ページの最下部にある保存をクリックします。
これにより、サイトのテーマがライトモードとダークモードのユーザーに対して正しいパレットを使用するようになります。他のユーザー選択可能なパレットは引き続きメンバーによって選択できますが、ここで設定したものがデフォルト値になります。
カラーパレットの管理
利用可能なすべてのカラーパレット（およびそれらにリンクされた割り当て）は一元的に管理できます。
-
管理者 > 外観 > カラーパレットへ移動します (
/admin/config/colors) -
ここで、パレットを編集、追加、または削除したり、ユーザー選択可能としてマークしたり、テーマのデフォルトのライトおよびダークパレットとして割り当てたりできます。
カラーモードセレクターの有効化
ユーザーがサイトでライトモードとダークモードを切り替えることができるようにするには、サイト設定の interface_color_selector を有効にする必要があります。デフォルトではこれは無効に設定されています。
有効にするには:
- 管理者 > 設定へ移動し、
interface color selectorを検索します。 - 次のいずれかに設定します。
- サイドバーフッターに表示 — サイドバーの下部にライト/ダーク/自動の切り替えを追加します
- ヘッダーに表示 — 切り替えをサイトヘッダーに追加します
この設定を有効にしないと、ユーザーはサイトでカラーモードの切り替えを表示できず、サイトは各ユーザーのシステム設定に自動的に従います。
ユーザー向けのオプション
ユーザー設定
ユーザーはサイトを表示するための希望のモードを選択できます。
-
ユーザー設定 > インターフェイスへ移動します
-
「カラーパレット」セクションで、メンバーは希望のライトおよびダークパレット、および使用したいモード（ライト、ダーク、自動）を選択できます。
「自動」が選択された場合、Discourseはユーザーのシステムカラー設定の好みに適応します。
ベストプラクティス
- ブランドの一貫性: 各モードに合わせてパレットをカスタマイズします。コアカラーは一貫性を保ちつつ、コントラストと可読性のために調整します。
- アクセシビリティ: 特にダークモードでは一部の色が薄く見えることがあるため、色のコントラスト比がWCAGガイドラインを満たしていることを確認します（このツールが役立つ場合があります）。
- 複数のデバイスでのテスト: 両方のモードで、デバイスやブラウザをまたいで外観を確認します。
- ロゴアセット: 管理者 > 外観 > サイトロゴ (
/admin/config/logo) で、ライトモードとダークモードの別々のロゴをアップロードできます。 - パレット数の管理: ユーザーが必要とするか、妥当だと感じるパレットのみを提供します。
よくある質問 (FAQ)
複数のダークまたはライトパレットを持つことはできますか？
はい、可能ですが、混乱を避けるために各モードに1つのメインパレットを保持することが推奨されます。ユーザー選択のためにテーマに割り当てるのは、主要なパレットのみにしてください。
全員にライト（またはダーク）モードのみを使用するように強制できますか？
デフォルトのライトおよびダークパレットに同じパレットを設定し、他のパレットがユーザー選択可能でないことを確認することで、これが可能です。
カスタムテーマコンポーネントは自動的に色を調整しますか？
DiscourseのCSSカラー変数（例：--primary、--secondary）を使用している場合、パレットを継承します。カスタムCSSでのハードコードされた色の使用は避けるのが最善です。
パレットの切り替えはテーマ全体を変更しますか、それとも色だけを変更しますか？
色変数のみが変更されます。カラーパレットを変更しても、構造、フォント、レイアウトは同じままです。