自動ダークモード配色切り替え

Discourse サイトを、ユーザーのデバイスがダークモードになっている場合に自動的に色テーマを切り替えるように設定できるようになりました。すぐにプレビューをご覧になりたい場合は、try.discourse.org インスタンスにアクセスし、お使いのデバイスのダークモードをオン/オフして、この新機能を動作確認してください。(この機能は meta では有効になっていません。)

自動ダークモードの有効化

お使いのインスタンスでこの機能を有効にするには、サイト設定でダークモードの色テーマを選択してください。

この設定を適用した後、ダークモードになっているデバイスでサイトを再読み込みすると、ダークカラーテーマが適用されているのが確認できるはずです。

明るいテーマでは問題なくても、ダーク背景ではロゴの表示が適切でない場合、コア機能で利用できるようになった新しい設定から代替ロゴをアップロードできます。

これらの設定でアップロードしたファイルは、a) 自動ダークモード切り替えが有効でユーザーのデバイスがダークモードの場合、または b) ユーザーがダークテーマを使用している場合(ダークモードでなくても可)に、同じ名前の通常の設定を置き換えます。以前 https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502 を使用していたサイトは、コアのサイト設定を使用するように切り替え、そのコンポーネントを削除できます。

ブラウザがダークモードになっている場合に自動的にダークカラーテーマに切り替えたくないユーザーもいるかもしれません。そのような場合は、[環境設定] > [インターフェース] 画面で「自動ダークモードカラーテーマを有効にする」オプションのチェックを外すことで、この機能を無効にできます。


ユーザー選択式カラーテーマピッカー

この機能を使用するには、まずサイトで複数のカラーテーマを作成し、ユーザーが選択可能にマークする必要があります。

設定が完了すると、ユーザーは [環境設定] > [インターフェース] ページに 2 つのドロップダウン表示を確認できます。

詳細については、Update themes and plugins to support automatic dark mode もご覧ください。

「いいね!」 56

ベータチャネルにリリースされれば、テストできるようになります。技術的には、ChromeOS(Android、iOS、macOS などと同様に)が prefer-color-scheme メディアクエリを尊重する限り、動作しない理由はありません。

私はベータチャネルの Chromebook でこれを試してみました。ある程度は機能しますが、まだ未完成です。Discourse サイト(try.discourse.org でテスト)を含むすべてのウェブコンテンツを強制的にダークモードに設定することはできました。しかし、OS のテーマをダークとライトの間で切り替えても、ウェブコンテンツの切り替えには対応していないようです。また、試行錯誤しているうちに、UI の一部はライトモード、他の部分はダークモードという、中途半端な状態に陥ることがよくありました。

これを試してみたい他の人のために、chrome://flags にアクセスし、「Dark」で検索して、「システム UI のダーク/ライトモード」と「ウェブコンテンツの強制ダークモード」を有効にしてください。

「いいね!」 11

ライトテーマとダークテーマの両方をご用意しています。ダークテーマは、タグアイコンやトピックのプレビューを含むすべての要素を、私たちが意図した通りに表示します。しかし、これらのアドオンを使用すると、ダークカラー schemes にはいくつかの不具合が発生します。ここで疑問に思うのですが、デフォルトのカラー schemes ではなく、自動ダークモード用のデフォルトテーマを設定できないのでしょうか?テーマの方が、カラー schemes よりもはるかに柔軟な調整が可能に思えます。

「いいね!」 4

おそらく、トピックプレビュープラグインに関連するダークモードの不具合をおっしゃっているのでしょうか?あなたのユーザープロフィールにあるサイトリンクをクリックすると、ダークモード時にホバー時の色が正しくないことが確認できます。もしそうであれば、トピックプレビュープラグインを少し更新してダークモードへの対応を改善する必要があるかもしれません(プラグイン開発者向けのガイドがあります)。その場合、そのプラグインのトピックで問題提起することをお勧めします。

テーマはページをリロードせずにJavaScriptコードを切り替えることができないため、その場でテーマを切り替えることはできません。テーマにはカスタムJavaScriptコードが含まれている可能性があります。

「いいね!」 11

hm、最新バージョンではそれが見つかりません。

「いいね!」 2

はい、利用可能なダークテーマが 1 つしかない場合、チェックボックスが表示されます。最近、WCAG 互換のテーマを導入したため、ご提示いただいたスクリーンショットの「Color Schemes」セクションに表示されている 2 つのドロップダウンにインターフェースが変更されました。

自動ダークモードを無効にしたいユーザーは、「Dark Mode」ドロップダウンをクリックし、「Same as Regular」に設定してください。

「いいね!」 9

このボックスがデフォルトでチェックを外されているようにすることは可能でしょうか?コミュニティの多くのメンバーは、ダークモードでサイトを閲覧することに慣れていません。自動ダークモードオプションを希望するユーザーも一部います。

「いいね!」 7

この機能をテストする最適な方法は、今でもこれでしょうか?Chromebook でアクセスしてダークモードをオン・オフにしても、try 上のテーマに変更が見られません。ページをリフレッシュしても何も変わりません。私は最新の ChromeOS を使用しています。テストアカウントを作成して同じ操作を試みましたが、やはり変化はありませんでした。

また、セルフホスト型や Teams などの他のサイトでも確認しましたが、デバイスのダークモード設定に基づいて自動的に切り替わることはありませんでした。

追伸:ChromeOS のスクリーンキャスト機能、最高ですね!とても素敵です!:heart_eyes:

「いいね!」 4

Windows と iOS では動作しますが、ChromeOS では動作しないのでしょうか?テスト結果はそれを示しているのですか?それだと、ChromeOS は何らかの更新が必要か、他と少し異なる動作をしているのかもしれませんね。ご意見をお聞かせください、@pmusaraj さん。

「いいね!」 7

はい、これは ChromeOS に特有の問題です。ダークモードに対応している macOS、Windows、iOS、Android、およびいくつかの Linux ディストリビューションでは正常に動作します。こちらで対応できることは何もありません。

「いいね!」 11

今なら有効化できるでしょうか?

「いいね!」 3

なるほど、良い点ですね。@pmusaraj さん、メタではこれをどうテストすればよいでしょうか?Windows 10 でアプリの「ダークモード」を有効にしたところ、Twitter(Web/Chrome)は暗色モードになりましたが、メタは変わりません。

「いいね!」 2

はい、Meta ではまだ有効になっていません。ここでは、それぞれ特定のカラーテーマ用に設計された多数のテーマが有効になっているためです。さらに、ハンバーガーメニューにあるテーマ切り替え機能は、カラーテーマとうまく連携しません。

「いいね!」 5

ああ、なるほど。Discourse のデフォルトインストールでも動作しますか?https://discourse.codinghorror.com/ で動作させることはできますか?

「いいね!」 4

はい、デフォルトのインストールでも動作します。例えば、https://try.discourse.org/ でも動作します。

https://discourse.codinghorror.com/ では、設定を切り替える必要があるかもしれません(デフォルトでは「なし」に設定されています):

「いいね!」 2

ああ、なるほど。私のインストールは非常に古く、テーマはライトのみの1種類しかありませんでした。デフォルトのダークテーマを基に新しいテーマを追加したところ、うまくいきました。これで、Windows の設定でダークモードとライトモードを切り替えると、Discourse も自動的に切り替わることを確認できました!:tada:

ただし、新しい Discourse のインストールでも、これが出-of-the-box(設定不要)で動作するでしょうか?おそらくはいですよね?

「いいね!」 4

はい、デフォルトでいくつかのカラーテーマ(Light、Dark、WCAG Light、WCAG Dark)が追加されています。ただし、この設定はデフォルトでオフになっており、新しい管理者が有効化するために見つける必要があります。

「いいね!」 4

今回のリリースでは、デフォルトでその設定をオンにするという目標を設定するのはどうでしょうか?ダークバージョンにデフォルトのロゴを同梱する限り、問題ないはずです。

「いいね!」 6

この機能は非常に便利で、コアに組み込んでいただきありがとうございます。

Windows での動作を示す GIF を作成しました。Discourse の切り替えは瞬時で、OS そのものよりも速いです :+1:

興味があれば、私の インスタンス にて追加の詳細をご覧いただけます。

https://forums.chalk.sg/t/prefer-a-dark-theme-try-out-dark-mode/110/2

「いいね!」 9

:clap: これで読める量が倍になりました。:laughing:

「いいね!」 7