モバイルのボトムバーの色を変更する

Androidフォンで下のバーの色を簡単に変更する方法はありますか?現在、ダークパレットでは白になっており、コントロールも非常に明るいため見えにくいです。

Chromeでは再現しません。

詳しく教えていただけますでしょうか。具体的には以下の点についてお伺いします。

  • お使いのスマートフォンのモデルは何ですか?
  • Androidのバージョンはいくつですか?
  • サイトにアクセスする際に使用しているブラウザ(およびそのバージョン)は何ですか?
  • PWAを使用していますか、それともDiscourseHubアプリを使用していますか?

PWAの使用

Samsung Galaxy S20 Ultra

こんにちは :waving_hand:

デバイスがダークモードになっていないためだと思います。下部のナビゲーションバーはネイティブのAndroid要素であり、Discourseでは変更されないため、デバイスの設定に合わせて色が表示されます。

「いいね!」 4

他のウェブサイトやアプリにアクセスすると変更されます。Discourseのみです。

Discourseは実際にはChromeブラウザで動作し、パレットの色を使用しています。動作しないのはPWAのみです。

「いいね!」 2

本当ですか?

ライト/ダークテーマを切り替えると、Galaxy S23のナビゲーションバーの色が正しく変更されます。

それは違うよ、テーマの色かウェブサイトが指定した色を使っているんだ。

テストしたところ、パレットの背景色を使用して下部のバーが変更されることがわかりました。PWA は、私が使用するすべての Discourse サイトで問題が発生しています。

Donが言ったように、お使いのデバイスはダークモードではなくライトモードに設定されています。しかし、あなたが報告した問題はPWAを使用している場合にのみ発生するようで、ブラウザ経由でダークモードでフォーラムにアクセスした場合には発生しません。

他のウェブサイトやアプリでライトまたはダークに設定されていても関係ありません。それらは、使用しているウェブサイトまたはアプリで定義された色を使用するためです。

以下にいくつかの例を示します。

この問題はPWAでのみ発生します。これは、AndroidがページのテーマやCSSではなく、サイトのmanifestファイルに基づいてシステムバーの色を決定するためです。

ホストされているビジネスサイトでは、顧客がこれを変更する方法はありません。manifestはサイトのルートドメインから提供される必要があります。カスタムマニフェストを外部ソースから読み込もうとしたり、テーマやJS経由で挿入しようとしたりする試みは、サイトのContent Security Policyによってブロックされるため、機能しません。

PWAのシステムバーの色を変更することは、お客様側でできることではありません。

「いいね!」 2

つまり、PWAは役に立たないということですか?バックボタンや画面下部のボタンが見えないからです。

また、もしそうなら、時計や電波などの表示がある画面上部が適切な色に変わるのはなぜですか?あれが色を変えられるなら、マニフェストでもできるはずですよね?

正直、あなたのボタンがなぜこんなに薄いのか分かりません。私のS Ultra 22ではこの問題はありません。

いずれにしても、現在カラーテーマに取り組んでいるので、この件については内部で議論します。

ここにPWAをインストールしてみてください

Https://www.carptalk.org

興味本位で質問ですが、カラーパレットのどの変数を変更しましたか?

Discourseでのみこのようになります。他のサイトはすべて問題ありません。

興味深いことに、iOSでPWAをインストールすると、ボトムバーが全く表示されません。これは何らかのカスタマイズが行われているのでしょうか?

二次色。バーの色と上の部分の色は簡単に変更できます。