はじめに
このガイドでは、ダークモードについて、その選択方法と有効化方法を解説します。
ダークモードとは?
Forbes は次のように説明しています。
ダークモードの背景にある考え方は、画面から放出される光を減らしつつ、可読性に必要な最小限の色コントラスト比を維持することです。
ダークモードとは、基本的にデバイス上で暗いテーマ(通常は黒またはグレー)を適用し、対比のために明るいテキストを表示するものです。Discourse には、明るい色調と暗い色調の両方を持つテーマが多数用意されています。
ダークモードを選択するには?
Discourse フォーラムでは、まず管理者がテーマをインストールする必要があります。admin/customize/themes の下で、人気テーマ一覧から「Dark」を選択できます。
その後、my/preferences/interface に移動してテーマを変更します。以下のような画面が表示されるはずです。
(モバイル版)
次に、現在表示されているテーマのプルダウン、または「テーマ」プルダウンから選択します。私の場合は「Meta Branded」です。
その後、プルダウンから「Dark」、または暗い色調を持つテーマを選択します(どのように確認するかは後ほど解説します)。
選択したテーマを適用したら、「通常」プルダウンをクリックします。そこに「Dark」という単語が含まれる色調を選択してください。一般的なものには「Dark」「WCAG Dark」「Solarized Dark」などがあります。
このガイドに従う場合、明るいモード用の色調を選択しても望ましい結果は得られません。本ガイドでは「Dark」を選択することを推奨します。
これらの手順を完了したら、ページ下部の変更を保存ボタンをクリックします。これにより、Discourse がダークモード(正確には暗い色調)に切り替わります。
ダークモードプルダウンの役割は?
おそらく、その点について疑問に思われているでしょう。
簡単に言うと、そこで設定した色調は、デバイスがダークモードのときに有効になります。デバイスがダークモードのとき、ここで選択した色調は「通常」プルダウンで選択された色調を上書きします。
通常、この設定を変更する必要はありません。ただし、「通常」で選択した色調を「ダークモード」でも同じものに保ちたい場合、色調を変更するたびに切り替える手間を省くために、「ダークモード」プルダウンを「通常と同じ」に設定できます。そうすると、Discourse は「通常」で選択された色調に従います。
デバイスが明るいモードのときは、「ダークモード」プルダウンの設定は影響しません。
それでは、テーマに暗い色調が含まれているかどうかにて確認するには?
はい、その通りです。基本的には、テーマを選択し、サポートされている色調を一覧表示して、暗い色調が含まれているか確認します。目安として「WCAG Dark」を探すのがおすすめです。これはアクセシビリティガイドラインに準拠した色調です。
ダーク/ライト切り替え
このコンポーネント がコアにマージされたため、インストールの必要はありません。
切り替え機能の詳細については、以下のトピックをご覧ください:
まとめ
以上です!テーマをダークモードに変更する場所を見つけて、さまざまな色調を試すことができましたね!
出典と引用
Forbes: https://www.forbes.com/uk/advisor/mobile-phones/what-is-dark-mode-and-should-you-be-using-it/
管理者向けダークモードの追加: Looking for default dark theme - #2 by JammyDodger
このガイドの情報は、画像のキャプションを除き、すべて AI によって生成されたものではありません。その他の情報は独自のものであり、出典がある場合は上記にリンクされています。

