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

カスタマイズ テーマコンポーネント
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

I just pushed a small update to this theme component to make it compatible with iOS 13 (which will ship with Dark Mode as well as an option to automatically enable it in the evenings).

「いいね！」 9
4

Thanks for this awesome component, I’ve been looking for this! Unfortunately I can’t seem to get it to work. Perhaps something trivial but where do I find the dark theme id? Is that just the name of the theme?

「いいね！」 1
5

Thanks!

The ID is the number of the theme in the URL when you’ve selected it in the admin. In this URL: /admin/customize/themes/39 for example, it’s 39.

「いいね！」 1
6

Awesome, works like a charm, thanks! Really hope this becomes part of the standard discourse install.

「いいね！」 2
7

Google Chrome now supports dark mode on iOS 13 and iPadOS 13. I’m not too sure about dark mode support for Google Chrome on MacOS Mojave or MacOS Catalina though.

When will support for Google Chrome arrive?

8

it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use... Support tables for HTML5, CSS3, etc

9

Oh, that’s good to hear! :grinning:

Yeah, I also really hope that this becomes part of the standard Discourse install. Some people only like to update their forums and don’t really go beyond that.

「いいね！」 1
10

@pmusaraj one thing I noticed is that the switching only works for logged in users, is there a way to also have it automatically set for anonymous users that haven’t created an account yet (e.g. switch to dark theme while using a private browser window)?

「いいね！」 1
11

Doesn’t work for me :-/

Just for future updates: It would be great, if there is some dropdown menu for choosing the right one.

12

The “prefers-color-scheme” feature is also supported by windows. The newest Chrome Beta and newest Firefox Version supports this media query.

「いいね！」 5
13

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

14

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

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

「いいね！」 4
15

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

「いいね！」 4