ダークモード対応の自動テーマ切り替え機能

カスタマイズ テーマコンポーネント
1

:warning: Discourse は現在、コア機能として Automatic Dark Mode color scheme switching をサポートしています。このコンポーネントは非推奨となり、もはや使用すべきではありません。

リポジトリ:

https://github.com/pmusaraj/discourse-dark-mode

インストール手順: Installing a theme or theme component

機能概要

このコンポーネントは、ブラウザがダークモードに設定されている場合に、自動的にダークテーマへ切り替えることを可能にします。これは、prefers-color-scheme メディアクエリをサポートするすべてのブラウザにおいて、ログイン中のユーザーのみで機能します。

デフォルトではこのコンポーネントは有効になっており、個々のユーザーは「設定」>「インターフェース」画面で無効にできます。また、管理者はこのコンポーネントをデフォルトで無効に設定することも可能です。その場合、ユーザーはインターフェースの設定画面で自動切り替えを有効にするボタンを確認できます。

動作原理

ブラウザがダークモードの場合、このコンポーネントはダークテーマを有効にして Discourse を再読み込みします。ブラウザがライトモードに戻った場合、デフォルトのテーマを有効にして再読み込みします。

また、ユーザーがサイト上にいる間にダークモードが切り替えられた場合も再読み込みされます（上記の動画で確認できます）。

（2 つ以上のテーマが有効で、ユーザーがデフォルトまたはダーク以外のテーマを選択している場合、このコンポーネントは何も実行しません。つまり、ユーザーの選択を尊重します。）

設定

  • ダークテーマがインストールされており、ユーザーが選択可能であることを確認してください。
  • このコンポーネントをデフォルトのテーマとダークテーマの両方に追加してください（非常に重要です。両方に追加しないと、ユーザーはデフォルトのテーマに戻すことができません）。
  • コンポーネントの設定画面で、dark theme id にダークテーマの ID を入力してください。
「いいね！」 28
Automatic Night Mode Plugin
Theme idea: Toggle selector for light or dark theme in header row
Support `prefers-color-scheme` CSS media query
2

Awesome, although flux is overkill just to toggle dark mode on the mac. Night Owl will do the same thing without interfering with anything else.

「いいね！」 4
3

このテーマコンポーネントに、iOS 13 に対応するよう小さなアップデートを適用しました。iOS 13 にはダークモードが搭載され、夕方には自動的に有効化するオプションも用意されます。

「いいね！」 9
4

素晴らしいコンポーネントをありがとうございます！ずっと探していたんです。ただ、どうやらうまく動作しないようです。些細なことかもしれませんが、ダークテーマのIDはどこで見つかりますか？それは単にテーマの名前でしょうか？

「いいね！」 1
5

ありがとうございます！

ID は、管理画面でテーマを選択した際の URL に含まれるテーマの番号です。例えば、この URL /admin/customize/themes/39 の場合、ID は 39 です。

「いいね！」 1
6

素晴らしい、完璧に動きます。ありがとうございます！これが標準の discourse インストールの一部になることを本当に願っています。

「いいね！」 2
7

Google Chrome は、iOS 13 および iPadOS 13 でダークモードをサポートするようになりました。ただし、MacOS Mojave や MacOS Catalina における Google Chrome のダークモードサポートについては、まだ確信が持てません。

Google Chrome でのサポートはいつ開始されるのでしょうか？

8

すでに Chrome でも動作するはずです。内部では prefers-color-scheme メディアクエリを使用しており、現在はそのブラウザ対応状況は非常に良好です: Can I use... Support tables for HTML5, CSS3, etc

9

それは素晴らしいですね！:grinning:

はい、私も同様に、これが標準の Discourse インストールに含まれることを強く願っています。フォーラムの更新だけを行って、それ以上手を広げないという人もいますから。

「いいね！」 1
10

@pmusaraj 一つ気づいたのですが、切り替えはログインしているユーザーに対してのみ機能しているようです。アカウントをまだ作成していない匿名ユーザー（例えば、プライベートブラウザウィンドウを使用している間）に対しても、自動的に設定できるようにする方法はありますか？

「いいね！」 1
11

私の環境では動作しません :-/

今後の更新について：正しいテーマを選択できるドロップダウンメニューがあると大変助かります。

12

「prefers-color-scheme」機能は Windows でもサポートされています。最新の Chrome Beta および最新の Firefox バージョンはこのメディアクエリをサポートしています。

「いいね！」 5
13

このコンポーネントは、2.4.0.beta11+39 で問題を引き起こすようです。登録ユーザー限定のコミュニティでは、https://mydomain/login のログイン画面が空白になります。このコンポーネントを無効にすると、通常通り動作します。

14

Discourse の最新バージョンとコンポーネントの最新バージョンでは、ローカルでこの問題を再現できません。ログイン画面が空白の場合、ブラウザのコンソールにエラーは表示されますか？

更新：Thomas が直面していた問題は、コンポーネントで現在修正されています。ご報告ありがとうございます！

「いいね！」 4
15

Discourse Core の一部にしていただき、+1 です

「いいね！」 4