Désactiver le thème sombre dans Ionic

Question

Je conçois une application Ionic et j'aimerais qu'elle ait des arrière-plans blancs et des textes noirs, que l'utilisateur ait activé le thème sombre ou non .

C'est ce que je veux:

Cependant, lorsque j'active le thème sombre sur un téléphone Android, il est automatiquement converti en ceci:

Je veux éviter que cela ne se produise. J'ai cherché en ligne et trouvé de nombreux articles décrivant comment appliquer le thème sombre , mais je n'ai rien trouvé sur sa désactivation.

Une solution à laquelle j'ai pensé consiste à activer explicitement le thème sombre, puis à définir les mêmes couleurs pour le thème sombre que pour le thème clair. Cependant, je pense que cette approche pourrait être indésirable, car elle implique l'écriture de beaucoup de code redondant.

Pouvez-vous penser à une ou plusieurs solutions alternatives?

Answer 1

Une façon de supprimer le thème sombre serait de modifier le variables.scssfichier et de supprimer cette règle de style:

@media (prefers-color-scheme: dark) {
  ...
}

Cette requête multimédia est celle qui modifie toutes les couleurs des propriétés personnalisées CSS lorsque les utilisateurs sélectionnent le thème sombre sur l'appareil.

Veuillez également jeter un œil à la color-schemebalise meta du index.htmlfichier:

<meta name="color-scheme" content="light dark" />

Vous pouvez trouver plus d'informations à ce sujet dans la documentation Ionic