Consulta CSS Media para uma IU escura ou clara

O modo escuro tem vindo a ganhar muito terreno recentemente. É por isso que adicionámos apoio ao mesmo em 4D v19, e mencionámos algumas formas de o ajustar às suas necessidades no respectivo anúncio.

Neste post do blog, vamos focar-nos no CSS e explicar em detalhe como definir estilos CSS para os modos claro e escuro usando consultas de meios CSS.

O que é uma consulta de meios de comunicação social?

Em CSS, as consultas de meios de comunicação são úteis quando se pretende modificar o aspecto da sua aplicação dependendo das características específicas. 4D suporta a característica de meios de impressão de pré-cor, para que possa definir o comportamento de um diálogo nos modos claro e escuro.

TEMPO DEMO

Vejamos um exemplo. Na aplicação Contactos, eis como é o aspecto da luz no MacOS:

Passo 1

Para alterar o design desta aplicação, escolhemos:

• quatro cores para texto e linhas
• três cores para o fundo

Definimos estas cores num ficheiro CSS chamado “styleSheets.css”. Aqui está o seu conteúdo:

	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}

Cada cor tem uma classe correspondente chamada “accentColorX” ou accentBackColorX”.

Depois, dentro da lista de propriedades, atribuímos uma classe CSS a cada objecto de formulário:

Passo 2

Ligámos o Modo Negro no MacOS. Aqui está o resultado:

Os objectos do formulário mudaram automaticamente para o Modo Escuro. No entanto, a cor da etiqueta do Nome não combina bem com o fundo escuro, e a moldura cinza claro também não encaixa bem.

Precisamos de mudar o conjunto de cores. Após alguns testes, temos finalmente as nossas quatro cores de texto e as nossas três cores de fundo.

Passo 3

É tempo de definir estas cores para que:

• se a interface estiver em modo de luz, 4D usa um certo conjunto de cores
• se a interface estiver em modo escuro, 4D usa outro conjunto de cores

As consultas dos meios de comunicação são úteis quando se precisa de aplicar condicionalmente estilos aos formulários. Pode envolver as classes CSS de tema claro dentro de uma consulta de meios de comunicação com um valor definido para claro, e as classes CSS de tema escuro dentro de uma consulta de meios de comunicação com um valor definido para escuro:

@media (prefers-color-scheme: light){
	.accentColor1 {
		stroke: #8594B2;
	}

	.accentColor2 {
		stroke: #DDDDDD;
	}

	.accentColor3 {
		stroke: #EEEEEE;
	}

	.accentColor4 {
		stroke: #C0C0C0;
	}

	.accentBackColor1 {
		fill: #AAAAAA;
	}

	.accentBackColor2 {
		fill: #EEEEEE;
	}

	.accentBackColor3 {
		fill: #444444;
	}
}

@media (prefers-color-scheme: dark){
	.accentColor1 {
		stroke: #A1BFFC;
	}

	.accentColor2 {
		stroke: #4C4C4D;
	}

	.accentColor3 {
		stroke: #4D4D4D;
	}

	.accentColor4 {
		stroke: #46484A
	}

	.accentBackColor1 {
		fill: #7F7E7F;
	}

	.accentBackColor2 {
		fill: #444444;
	}

	.accentBackColor3 {
		fill: #CBCACB;
	}
}

E isto é o que obtemos:

O que se segue?

Se precisar de ajuda com CSS em 4D, aconselhamo-lo a ler este post no blog ou a ver este vídeo de 30 minutos 4D Summit.

E, como sempre, pode juntar-se à discussão nofórum 4D .