ダーク/ライトモード切り替え

OK、問題は、各カラー スキームで「ユーザーはこれを選択できます…」またはそれに類するものがチェックされていなかったことだと思います。これで動作します。

「いいね!」 2

2つのカテゴリにのみ影響しているように見える問題があります。

ダークモードでリフレッシュすると、マイトサイトのロゴが表示されます。ライトモードに切り替えてからダークモードに戻すと、問題は解決します。しかし、リフレッシュすると再び発生します。

リフレッシュ後

より具体的に言うと、ロゴのトピックだけのようです。このカテゴリの他のトピックは問題ありません。このカテゴリの他のトピックは影響を受けていません。このトピックに2つのロゴがアップロードされていることに関連している可能性がありますか?

「いいね!」 1

修正すると、ページが最初に読み込まれたときにも問題が発生しているようです。では、Discourse のブラウザ検出ダークモードに問題があるのでしょうか?

「いいね!」 2

この問題を再現できません。どのような手順、ブラウザ、デバイスを使用していたか詳しく教えていただけますか?

「いいね!」 2

ユーザーから、ダークモードを手動で切り替えた後、デバイスがライトモードに戻るとフォーラムが自動的にライトモードに戻ってしまうという報告がありました。

再現手順:

  1. デバイス設定をライトモードに設定します。
  2. サイドバーのトグルボタンを有効にします。
  3. デバイスでダークモードを有効にします。
  4. デバイスでダークモードを無効にします。

→ ディスコースインスタンスがライトモードに切り替わります。期待される動作は、ユーザーが手動で切り替えたため、フォーラムがダークモードのままになることです。

基本的に、ダークモード、ライトモード、自動切り替えのオン/オフを切り替える古い動作のオプションがあれば素晴らしいです。

「いいね!」 3

LG G8X ThinQでAndroid 10を実行していると思います。デュアルスクリーンケース付きのものです。

アプリを切り替えてから戻ると、ダークテーマに切り替わる前に、一時的にライトテーマが読み込まれるようです。ウィンドウのスキンに似ています。ライトロゴ(モバイルロゴ)が残ったままになります。

@jrgong 再現方法と原因の疑いについての説明は、私も同じです。

ブラウザはライトモードで、トグルはダークモードに切り替わっています/強制しています。その後、Discourseは部分的にライトモードに切り替わっています。

「いいね!」 1

リフレッシュ時や新しいタブでリンクを開いたときに、反対の配色が一瞬表示されます。また、何らかの理由で新しい返信を投稿した後にも同様のフラッシュが見られます。

ライトテーマが有効になっており、OSはダークモードに設定されています。そのため、ライトに戻ったときに違いがわかります。

クライアント側で色が切り替わっているのだと思いますが、ユーザー設定はそのままになっているようです。トグル時にユーザーの「配色」設定を更新して、これを回避することは可能でしょうか?クライアント側での切り替えでシームレスな移行が可能になり、ユーザー設定を変更することで、リフレッシュ時の反対の配色の一瞬のフラッシュを回避できるのではないでしょうか。

「いいね!」 5

@jordan.vidrine 再度提起したかっただけです。 :slight_smile:

「いいね!」 2

新しいヘッダーのドロップダウンに表示されるはずです。(「サイドバー」ですが、ドロップダウン形式のものです)

「いいね!」 1

@awesomerobot および @jrgong 更新情報です。調査いたします :+1:

「いいね!」 2

残念ながら表示されませんでした。しかし、その理由がわかりました。

navigation_menu は Header-Drop-Down に設定されていますが、オプションが見つかりませんでした。しかし、add_color_scheme_toggle_to_header をオフにすると、ドロップダウンに表示されました。したがって、一度に1つの場所にしか表示されないようです。

ありがとうございます! :slight_smile:

「いいね!」 2

このコンポーネントは、「ライト」と「ダーク」のカラースキームを選択できますが、ライトモードとダークモードを切り替えるわけではありません。つまり、@media (prefers-color-scheme) は尊重されません。

以下のようなテーマコンポーネントの場合:

CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

および HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Dark</span><span class="lightonly">Light</span>
</script>

ダークモードが有効になっていても、「light」と表示されます(あるいは、オペレーティングシステムのダークモードに応じて「dark」または「light」と表示され、選択されたカラースキームに関係なく表示されます)。

これに対する解決策はありますか?これらのメディアクエリに依存するものがかなり多くあります。

「いいね!」 3

DiscourseがWindows XPに似ている場合、ブラウザ/OSをライトモードにし、Discourseをダークモードにしてみてください。Windows XPでは、配色が常にデフォルトの上に重ねて表示されます。

ユーザーが選択できるダークカラーテーマが複数ある場合、2つのドロップダウンが表示され、トグルアイコンが表示されます。

image

ユーザーが選択できるダークカラーテーマが1つしかない場合、「ダーク」ドロップダウンは消え、代わりに「自動ダークモード」チェックボックスが表示されます。

ユーザーが「自動ではなくトグルを使いたい」と考えて「自動」チェックボックスの選択を解除すると、トグルは消えます。

そのため、手動トグルを使用するには、自動切り替えを有効にする必要があります。:thinking:

「いいね!」 5

つまり、iPhone のノッチの色は、ヘッダー HTML に挿入される <meta name="theme-color" media="(prefers-color-scheme: ...)" content="#..."> タグを使用して取得されます。これは、デバイスがダークモードでトグルがライトカラースキームを選択している場合、またはデバイスがライトモードでトグルがダークカラースキームを選択している場合に、iPhone のノッチの色がずれることを意味します。

「いいね!」 1

この動作は意図されていないと思われます。

現在、システムカラーはダークモードに設定されています。ライト/ダークテーマ用に白黒のロゴを使用しています。

  1. インスタンスで、テーマをライトに設定します。
  2. トピックページにアクセスします。
  3. 最初は正しいロゴが読み込まれますが、次のようになります。
  4. 下にスクロールしてから上にスクロールします(ヘッダーはフルロゴ > トピックタイトル > フルロゴに切り替わるはずです)。
  5. 上にスクロールすると(例えば、トピックタイトルが再びフルロゴになる場所)、間違ったロゴ(白地に白)が表示されます。
「いいね!」 2

ローカルでこれを再現しようとしていますが、ダークカラースキームが1つしか選択できない場合でも、自動モードの代わりにドロップダウンが表示されます。(管理者設定で)

再現手順:

  • 今朝の時点での、まっさらなDiscourseのインストール

  • プロファイル → インターフェースでこれを確認

  • dracula、solarized dark、WCAG darkのカラースキームを削除

  • プロファイルに戻る

  • ドロップダウンが消え、「ダークモード」の見出しとチェックボックスが表示されることを確認

interface.hbsshowDarkColorSchemeSelectorshowDarkModeToggle によって制御されています。 interface.hbs も参照してください。また、interface.js のコメントも参照してください。

  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // デフォルトのダークスキームが設定されている場合
    // ドロップダウンには2つの項目(無効 / サイトデフォルトを使用)があります
    // しかし、その場合はチェックボックスを表示します
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },

「いいね!」 2

:star_struck: 詳細なご回答ありがとうございます。「ダークテーマ」の選択を許可しないようにしていただけですが、これからはこれらのテーマを完全に削除してテストを行います。

「いいね!」 1

はい、これは良いエッジケースを見つけました。このトグルは、ユーザーがこの discourse-core の個人設定も有効にしている場合にのみ、このシナリオで機能します。

このインスタンスでも機能するように取り組みます。

「いいね!」 4