Desactivar el tema oscuro en Ionic

Question

Estoy diseñando una aplicación Ionic y me gustaría que tuviera fondos blancos y textos negros, ya sea que el usuario haya habilitado el tema oscuro o no .

Esto es lo que quiero:

Sin embargo, cuando habilito el tema oscuro en un teléfono Android, se convierte automáticamente a esto:

Quiero evitar que esto suceda. Busqué en línea y encontré muchos artículos que describen cómo aplicar el tema oscuro , pero no he encontrado nada sobre cómo deshabilitarlo.

Una solución en la que he pensado es habilitar explícitamente el tema oscuro y luego configurar los mismos colores para el tema oscuro que para el tema claro. Sin embargo, creo que ese enfoque puede ser indeseable, ya que implica escribir mucho código redundante.

¿Puede pensar en alguna solución alternativa?

Answer 1

Una forma de eliminar el tema oscuro sería editando el variables.scssarchivo y eliminando esta regla de estilo:

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

Esa consulta de medios es la que cambia todos los colores de las propiedades personalizadas de CSS cuando los usuarios seleccionan el tema oscuro en el dispositivo.

También eche un vistazo a la color-schememetaetiqueta del index.htmlarchivo:

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

Puede encontrar más información al respecto en Ionic Docs