Changer la couleur de la barre inférieure mobile

Je suis censé mettre le site en ligne correctement aujourd’hui, envoyer des e-mails et faire en sorte que les gens installent la PWA :rofl::rofl::rofl:

Je comprends votre frustration, mais ce n’est pas une réponse très utile.

Tout ce que je peux dire pour le moment, c’est qu’il semble que quelque chose modifie le comportement normal.

Pouvez-vous vérifier quels plugins ou composants de thème vous avez installés ? Avez-vous ajouté d’autres personnalisations ?

Ce n’est pas seulement mon site. C’est n’importe quel site de discourse ???

J’ai déjà expliqué pourquoi c’est le cas sur Discourse mais pas sur d’autres sites.

Puisque vous êtes un client, nous pouvons déjà voir à quel site vous êtes associé. Les couleurs des boutons sont exactement les mêmes que dans la capture d’écran que j’ai partagée plus tôt. Elles ne sont pas aussi claires que les vôtres.

C’est la même chose sur le thème par défaut sans personnalisation ni composants

1 « J'aime »

Le problème des boutons apparaissant très clairs sur la barre inférieure blanche est spécifique à votre appareil/système d’exploitation. Sur d’autres appareils que j’ai testés, la barre inférieure est effectivement blanche lorsque le système d’exploitation est en mode clair, mais les boutons sont gris et restent visibles. Le comportement que vous observez n’est donc pas typique et n’affecte pas les autres utilisateurs.

S ultra 22

Huawei mate20 pro

Cela dit, nous comprenons que l’expérience n’est pas idéale lors de l’utilisation de la PWA avec un thème Discourse sombre alors que le système d’exploitation Android est en mode clair. Comme je l’ai dit, nous ouvrirons une discussion interne avec nos développeurs et designers pour explorer comment nous pourrions améliorer ce scénario dans les futures mises à jour.

1 « J'aime »

C’est étrange et contredit ce que vous avez dit. C’est un peu aléatoire haha.

Voici un Samsung S24 en mode clair

Voici un Google Pixel en mode clair

Un iPhone n’a pas du tout chargé la barre, similaire au problème de @chapoi.

Un ancien Samsung S22 s’est chargé correctement avec une barre inférieure blanche et des icônes plus sombres. J’ai encore 10 personnes qui font un test plus tard et je mettrai à jour davantage.

1 « J'aime »

Je pense que le navigateur Chrome peut le gérer dans certains cas, en fonction de la version d’Android, de l’appareil, etc.

Dans une PWA, la balise <meta name="theme-color"> modifie de manière fiable la couleur de la barre d’adresse supérieure dans Chrome sur Android. La theme_color dans manifest.json affecte la barre d’état et parfois d’autres parties de l’interface utilisateur, mais le comportement varie selon l’appareil, le navigateur et la version d’Android.

La barre de navigation inférieure native ne peut généralement pas être contrôlée depuis une application web. Certains navigateurs peuvent appliquer la couleur du thème, mais ce n’est pas garanti.

:up_arrow: C’est l’une des raisons pour lesquelles j’ai converti mon site en TWA, en utilisant Bubblewrap, qui peut également gérer les couleurs de la barre de navigation inférieure.

Donc, avec une PWA, vous pouvez styliser la barre supérieure, mais le contrôle de la barre de navigation inférieure est incohérent.


L’iPhone ne chargera pas cette barre de navigation car il s’agit d’un élément natif du système d’exploitation Android.

2 « J'aime »

C’est juste bizarre, je n’ai jamais rencontré ce problème auparavant. J’ai utilisé le super PWA de WordPress sur 9 sites et je n’ai jamais eu de problème. Juste celui de Discourse. Comme vous l’indiquez, vous avez rencontré le même problème d’incohérence, j’espère qu’ils pourront faire en sorte que la barre inférieure ait le même style que la barre supérieure, car cela fonctionne comme prévu sur tous les appareils.

@dax @chapoi encore plus bizarre. Si j’installe la PWA sur mon téléphone via Firefox, cela fonctionne parfaitement. Au moins, je peux voir les boutons du bas maintenant.

Ceci est en mode clair

1 « J'aime »

La raison pour laquelle cela fonctionne sur Firefox mais pas sur Chrome tient à la manière dont chaque navigateur gère les PWA sur Android : Chrome ne regarde que la theme_color dans le Web App Manifest pour colorer la barre système. Si le manifeste n’est pas servi depuis le domaine racine du site ou n’a pas la bonne couleur, Chrome se rabat sur le blanc. Firefox est plus flexible et prend les couleurs de la page elle-même, de sorte que la barre s’affiche correctement même sans manifeste personnalisé.

Ainsi, pour l’avenir, j’ai un site Discourse hébergé qui a une palette sombre, nous avons toutes les autres palettes désactivées afin que les utilisateurs ne puissent pas choisir, ce qui correspond à notre marque. Nous avons un thème activé que les utilisateurs ne peuvent pas modifier.

Comment pouvons-nous rendre la barre inférieure #121212 dans le PWA sur Chrome, car avoir une application installable est important pour nous ?

Le site sombre et une barre inférieure claire sont si distrayants et ont l’air horribles.

Comme je l’ai dit précédemment, j’ai ouvert une discussion interne pour explorer les améliorations possibles pour ce scénario. Cependant, avec la rencontre mondiale de Discourse qui approche à grands pas, l’équipe ne sera pas en mesure d’apporter des modifications à court terme, et malheureusement, il n’existe pas de solution de contournement qui puisse garantir que la barre inférieure apparaisse toujours en sombre pour le moment.

Suivi rapide. Ceci a maintenant été assigné à un ingénieur pour examen. Cependant, gardez à l’esprit que la rencontre annuelle de Discourse approche à grands pas, donc je ne pense pas qu’il y aura de mises à jour à court terme (par court terme, j’entends « jours »).

5 « J'aime »