Metaのテーマカラーが現在のカラースキームを尊重していません

バグ
1

こんにちは。以下の2つのトピックで説明されている問題が、まだ発生しています。

（最新/トライアル版のホスト型Discourseでテスト中）

3

@mk0r ここMetaではこの問題を再現できません。私はここでデフォルトのテーマではないGrey Amberテーマ/カラースキームを使用しています。

image
image911×433 19.1 KB

そして、theme-colorメタタグは私にとっては正しい色になっています。

<meta name="theme-color" content="#36393e">

#36393eはGrey Amberスキームのヘッダー背景色です。ログインせずにシークレットウィンドウでMetaを開くと、theme-colorメタタグはデフォルトのカラースキーム（Lightスキーム）のヘッダー背景色になります。

<meta name="theme-color" content="#ffffff">

サイトのブラウザキャッシュ/Cookieをクリアしてみましたか？それでも解決しない場合は、ここでこの問題を再現できるかどうかを確認し、再現手順を共有していただけますか？

「いいね！」 2
4

確認いただきありがとうございます。再現できました。具体的にはダークモードに関連しています。

theme-color は、少なくとも私の場合、メタと私のインストール環境では、デフォルト/ライトモードと同じままです。

head に以下を追加してみました。

<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />

ソースには表示されますが、何も影響していません。おそらく最初のメタタグで prefers-color-scheme: light が指定されていないためでしょうか？

私にとっての主な問題は、モバイルでダークページと明るいステータスバーがひどくぶつかることと、スクロールしてリフレッシュする際に明るい白色になることです。

5

コメントするために登録したばかりです。これは私が抱えている問題と同じだと思います。\n\nプログレッシブウェブアプリ（Android 13で、ChromeでDiscourseフォーラムを表示したときに表示されるインストールアプリのオプション、この場合はhttps://llllllll.co/）を使用していますが、アプリはシステムのダークモード設定を正しく反映していますが、ステータスバーはライトモードのままです。この問題はChromeでは発生しません。下の写真を参照してください：左がアプリ、右がChromeブラウザです。\n![4d1b715ac6945d3190ffe61ff299afc879207759|690x423](upload://b07yMZVCJ9LpLyPWE9pKsAUTmfn.jpeg)

「いいね！」 2
6

残念ながら、この件は注目されていません :frowning: プルリクエストを作成するほどの技術力はありませんが、これはかなり簡単な修正のように思えます。些細なことのように思えるかもしれませんが、修正を希望する審美的および機能的な理由があります :folded_hands:t4:

7

先週、この問題を再度調査し、以下の手順でこのバグを再現することができました。

  1. OSをダークモードで使用するように設定します（Windows 11では、設定 → 個人用設定 → 色 → モードを選択 で行います）。

  2. Discourseの設定で、通常モードとダークモードで異なる配色を選択し、ページを再読み込みします。

  3. これで、UIにはダークモード用に選択した配色が適用されているのが見えるはずですが（予想通り）、theme-colorメタタグには、本来ダークモードのものになるべきところ、ライトモード用に選択した配色のheader_background色の値が含まれてしまいます。

これは修正が少し難しいです。なぜなら、サーバーサイド（メタタグがすべてレンダリングされる場所）では、クライアント/ブラウザがライトモードまたはダークモードの配色を使用するかどうかのコンテキストがないからです。私たちは単にライトモードとダークモードの両方の配色定義を含めるだけで、クライアント/ブラウザはprefers-color-schemeメディアクエリに従ってユーザーの設定に一致するものを選びます。

しかし、theme-colorメタタグはmedia属性を受け付けるようなので（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color）、ダークモード用の別のtheme-colorメタタグをmediaを(prefers-color-scheme: dark)に設定して含めることができるはずです。今週中にこれを完了するようにします。

「いいね！」 5
9

最初のメタタグでライトモードまたはダークモードを指定せず、2番目のメタタグでダークモードを指定した場合、ダークモードは依然として最初のタグから取得される可能性があります。そのため、ライトモードとダークモードの両方のタグを指定する必要があると思います。

「いいね！」 2
10

はい、私の変更により、ライトスキームのメタタグには media="(prefers-color-scheme: light)" が、ダークスキームのメタタグには media="(prefers-color-scheme: dark)" が設定され、ブラウザがユーザーの好みに一致するものを選択できるようになると思います。

「いいね！」 3
11

FYI @mk0r 2日前にこの問題を修正しました。

「いいね！」 3
12

:slightly_smiling_face:ありがとうございます。それは本当に素晴らしいようですが、残念ながら私には機能しません。media="all" がダークモードでも media="(prefers-color-scheme: dark") を上書きしているのではないでしょうか？

「いいね！」 1
13

どのようにテストしていて、どのブラウザを使用しているか教えていただけますか？

「いいね！」 1
14

はい、承知いたしました。申し訳ありません、忘れていました。

以下で試しました。

Android 12
Chrome 106.0.5249.126 PWA

MacOS 12.4
Chrome 105.0.5195.125 PWA

「いいね！」 1
17

GitHubで「いいね」された修正を確認しましたが、問題は前のメッセージで説明されたものと同じだと思います。

18

技術的な知識を超えているかもしれませんが、これらの行を見ていました。

    it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
       expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
         <meta name="theme-color" media="all" content="#abcdef">
         <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
       HTML

ユーザーがダークモードの場合でも、meta name="theme-color" media="all" は meta name="theme-color" media="(prefers-color-scheme: dark)" よりも優先されると考えています。

こちらをご覧ください。
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
と
https://web.dev/learn/design/theming/

正しく機能するためには、最終的にレンダリングされるページに次の行が必要だと思います。


<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">

ここで、16進数の値は、選択されたカラースキームの値に置き換えられます。

インストール/テーマに別のダークモードカラースキームがない場合、値は同じになります。

これは少し細かい点であることは承知していますが、実際に違いを生むため、この修正は非常に感謝されます。代替案としては、ユーザー管理インターフェースを介して all またはダーク/ライトモードの両方に対して theme-color を選択できるようにすることだと思います。または、theme-color をまったく設定しないことで、デバイスがブラウザUIの色を設定し、ユーザーのダーク/ライト設定を尊重するようにします。

お役に立てば幸いです :folded_hands:

「いいね！」 2
19

FYI @Don と @mk0r、これは本物で修正されたはずです：

（Meta の kaden-stytch が誰かはわかりませんが、どなたであってもありがとうございます！ :meow_heart:）

「いいね！」 4
20

はい、ありがとうございます:slightly_smiling_face:これで完璧に動作します！:heart:

「いいね！」 3
21

このトピックは2日後に自動的に閉じられました。返信はもう受け付けられません。