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