Desativar tema escuro no Ionic

Question

Estou projetando um aplicativo Ionic e gostaria que tivesse fundos brancos e textos pretos, quer o usuário tenha habilitado o tema escuro ou não .

É isso que eu quero:

No entanto, quando habilito o tema escuro em um telefone Android, ele é convertido automaticamente para o seguinte:

Eu quero evitar que isso aconteça. Pesquisei online e encontrei muitos artigos que descrevem como aplicar o tema escuro , mas não encontrei nada sobre desativá-lo.

Uma solução em que pensei é ativar explicitamente o tema escuro e, em seguida, definir as mesmas cores para o tema escuro e claro. No entanto, acho que essa abordagem pode ser indesejável, pois envolve escrever muito código redundante.

Você consegue pensar em alguma solução alternativa?

Answer 1

Uma maneira de remover o tema escuro seria editando o variables.scssarquivo e removendo esta regra de estilo:

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

Essa consulta de mídia é aquela que altera todas as cores das propriedades personalizadas do CSS quando o usuário seleciona o tema escuro no dispositivo.

Observe também a color-schememetatag do index.htmlarquivo:

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

Você pode encontrar mais informações sobre isso no Ionic Docs