|||
|-|-|-|
| 概要 | ダーク/ライトモードトグルは、ハンバーガーメニューにクリック可能なトグルカラースキームボタンを追加します。このトグルは、1つのテーマのライトまたはダークカラースキームを切り替えます。
| リポジトリリンク | https://github.com/discourse/discourse-color-scheme-toggle
| Discourseテーマを初めて使用しますか？ | Discourseテーマの使用に関する初心者ガイド
機能
このコンポーネントを使用すると、Discourseフォーラムにダーク/ライトモードトグルアイコンが表示されます。また、システムOSを現在のカラースキーム以外のモードに変更した場合も自動的に切り替わります。
トグルを新しいDiscourseサイドバーまたはヘッダーの他のアイコンの横に表示するように選択できます。
サイドバー
ヘッダー
重要な手順
これを正しく機能させるには、/admin/customize/colorsエリアで少なくとも2つのカラースキームを選択できるようにする必要があります。少なくとも2つのカラースキームでcolor scheme can be selected by usersを有効にする必要があります。
ダークモードのデフォルトカラースキームを設定する必要があります: /admin/site_settings/category/basic?filter=dark
これが完了すると、ユーザーはユーザー設定インターフェイスメニューでlightとdarkの選択肢として2つのカラースキームを選択できるようになります。
設定
| 名前 |
説明 |
| svg icons |
|
| add color scheme toggle to header |
ヘッダーにカラースキームトグルボタンを追加する |
| 翻訳 |
デフォルト |
| toggle_button_title |
カラースキームを切り替える |
弊社でホストしていますか？ テーマコンポーネントは、Standard、Business、Enterpriseプランで利用できます。
「いいね！」 45
これは、ユーザーが設定に移動して有効にする以外に、ユーザー入力で機能するだけですか？ユーザーごとにではなく、サイト全体で実装できる方がはるかに良いでしょう。
管理者がサイト全体でこのコンポーネントを有効にします。
そこから、コンポーネントを設定した管理者が設定した内容に応じて、トグルはユーザーのハンバーガーメニューまたはフォーラムのヘッダーに表示されます。管理者が有効にすれば、すべてのユーザーがこれを使用できます。
「いいね！」 1
申し訳ありません、質問が不明瞭だったようです。インストールチュートリアルを見ると、管理画面で有効にした後（ハンバーガーメニューまたはヘッダー）、個々のユーザーが自分の設定に移動してライト/ダークカラースキームを有効/追加する必要があるようです。そうしないと、新規ユーザーやログインしていないユーザーでは機能しません。そこで質問ですが：
カラースキームをユーザーごとではなく、サイト全体で実装することは可能でしょうか。
参考までに、あなたの写真は以下にあります。
管理者が有効にすると、ライトスキームとダークスキームが自動的に割り当てられると信じています。そこから、ユーザーは個人の好みに応じて使用されるダークカラーとライトカラーのスキームを編集できます。
/admin/site_settings/category/basic?filter=dark にも選択項目を追加する必要がある場合があります。
この追加を反映するように手順を更新しました。混乱させて申し訳ありません！
「いいね！」 3
デフォルトのカラースキームがダークの場合、正しく機能しないようです。これをどのように適応させることができますか？
デフォルトのカラースキームがダークの場合、ユーザーがインターフェース設定でライトカラースキームを選択しない限り、トグルは機能しません。
「いいね！」 2
おそらく、ブラウザとシステムの設定に基づいて prefers-dark ユーザー スキーム設定をチェックしているため、これが起きているのだと思います。
トグルを試しているときに、インスペクター コンソールに何か表示されるか確認していただけますか？
これについて調べる必要があるかもしれません。
「いいね！」 1
domain.com/logs で警告を確認してください。
Dark-Light Toggle テーマ/コンポーネントでエラーが発生しています
initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73
initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855
https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273
each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458
walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478
each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828
topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874
_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501
runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222
_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462
didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791
invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024
flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018
flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946
_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401
end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081
_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937
u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509
https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807
「いいね！」 1
私もです。ダークライトコンポーネントでエラーが発生しています。
Arta_S
(Arta)
21
こんにちは。
問題が発生しました。テーマを追加した後、ハンバーガーメニューにトグルアイコンが追加されません。ベアコードにも存在しません。また、デモはこちらでボタンが機能しません。つまり、ライトテーマとダークテーマが切り替わりません。
他に同じ問題を抱えている方はいらっしゃいますか？
開発者ツールのコンソールを確認して、これに関連するものが表示されるか確認していただけますか？デモサイトではアイコンが正常に機能しているようです。
Arta_S
(Arta)
23
ビデオはこちらです。
主な問題は、フォーラムでハンバーガーメニューにこれらのオプションが表示されないことです。
スクリーンキャストで console タブが開かれていないため、エラーが発生しているかどうかを確認するのが困難です。\n\nこのトピックの元の投稿にある各ステップに従っていることを確認しましたか？\n\n /admin/customize/colors で少なくとも 2 つのカラー スキームの選択肢を有効にする必要があります\n /admin/site_settings/category/basic?filter=dark でダーク テーマを有効にする必要があります\n\nそして、ユーザーとして、ユーザー設定でライト用とダーク用の 2 つのカラー スキームを選択していますか？
「いいね！」 1
Arta_S
(Arta)
27
こんにちは。
はい、正しく実行されました。本日、すべて正しく表示されています。これはCookieが原因でした。他のブラウザ（フォーラムにアクセスしたことがないブラウザ）でも表示されなかったのは奇妙でした。現在、すべて正しくなっています。ご迷惑をおかけして申し訳ありませんでした。
一点だけ、ゲストを含むすべてのユーザーはヘッダーのトグルを見ることができます。しかし、管理者としてログインしているときは、トグルが見えません。これは意図的なものでしょうか？サーバーキャッシュなどの問題でしょうか？
「いいね！」 1
それは興味深いですね。ユーザー設定でダークとライトの配色を選択していますか？
また、コンポーネントがインストールされているテーマを使用していますか？
「いいね！」 2
Arta_S
(Arta)
29
ヘッダーに表示されるように、プロフィールに移動してこのオプション（自動ダークモードカラースキームを有効にする）を有効にする必要がありました。おそらく、いじくり回しているうちにそのチェックボックスを見逃していたのでしょう。
「いいね！」 2
このコンポーネントは大好きです！
ただ、少し問題が発生しています。
「ダークモードカラースキームを自動的に有効にする」オプションが有効な場合にのみ、コンポーネントが機能するように見えます。私の問題は、このオプションが有効で、システム設定がダークモードに設定されている場合（つまり、preferred color scheme: dark）に発生します。
このシナリオでは、[Preferences > Interface > Theme] からライトテーマに切り替えようとしても何も起こりません。これは私にとっては問題ありません。おそらく、システム設定がすでにダークモードに設定されているため、Discourseでライトモードに切り替えても上書きされないのでしょう。
Dark / Light Mode Toggle コンポーネントで同じことを行うと、Discourse のテーマ設定がダークモードに設定されていても、トグルはライトモードに切り替えることができます（これは私の見解ではさらに良いことです）。ただし、ヘッダーのサイトロゴはダークモードのままで、ライトモードでは見えにくくなります。インスペクターを見ると、要素は次のようになっていることがわかります。
<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>
現在ライトモードに切り替えているにもかかわらず、media=“(prefers-color-scheme: dark)” の部分があることに気づきました。
「ダークモードカラースキームを自動的に有効にする」オプションがチェックされていない場合、サイトロゴは通常、ライトモードとダークモードの間で正常に切り替わることを付け加えておくべきです。しかし、これにより Dark / Light Mode Toggle が表示されなくなります🤷🏻♂️
また、Discourse の [Preferences > Interface > Theme] でテーマ設定がダークモードに設定されており、システム設定もダークモードの場合、トグルはライトモードとダークモードの間で切り替わりません。常にダークテーマのままです。
理想的には、Dark / Light Mode Toggle コンポーネントが現在のように機能し、ヘッダーのサイトロゴがユーザーのシステム設定ではなく、現在アクティブなライト/ダーク設定に従うようにしたいと考えています。
「いいね！」 1
MattiaB
(Mattia)
31
私も同じです！解決策は見つかりましたか？
私はフロントエンド開発者ではありませんが、デバッグを行いました。
ダークモード（私のコンピューターが設定されているように）の場合、ロゴのHTMLは次のようになります。
そして、ロゴは問題なく、ダークモードは完全に機能しています。ライトモードに切り替えると、テーマはライトになりますが、ロゴは消えます（ダークロゴのままです）。
これはHTMLの外観です。
\u003csource srcset=\"https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png\" media=\"(prefers-color-scheme: dark)\"\u003e という追加の行があり、これが正しいロゴの読み込みを「ブロック」しています。Inspect Element でその行を削除し、\u003cimg src=\"https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png\" alt=\"RadixTalk\" id=\"site-logo\" class=\"logo-small\" width=\"36\"\u003e のみ残すと、正しいロゴが表示されます。
この情報がお役に立てば幸いです。
「いいね！」 1
残念ながら見つかりませんでした。結局、ヘッダーの背景色を変更したため、ロゴをライトモードとダークモードで切り替える必要がなくなりました🤷🏻♂️
| 概要 | ダーク/ライトモードトグルは、ハンバーガーメニューにクリック可能なトグルカラースキームボタンを追加します。このトグルは、1つのテーマのライトまたはダークカラースキームを切り替えます。
