Chegou o suporte do Modo Escuro no MacOS.

Dark Mode é espectacular e cria uma experiência de utilizador excitante. É por isso que, começando com 4D v19, 4D suporta agora o Modo Escuro, que se activa automaticamente se o Modo Escuro for ligado ao nível macOS.

Isto é apenas o começo, e há mais para vir em versões futuras, tais como o suporte do Modo Escuro para todos os componentes (por exemplo, o widget 4D Write Pro) e o Modo de Desenho.

Queres ver como o Dark Mode transforma o aspecto dos elementos 4D? Continue a ler!

Os formulários adaptam-se automaticamente

Se a fonte, borda, e cor de fundo dos seus objectos de formulário já estiverem definidos para “automático”, não precisa de alterar nada, os seus formulários adaptar-se-ão automaticamente para corresponder ao tema do SO.

Também actualizámos os objectos da biblioteca para suportar os modos Luz e Escuro, excepto os objectos “Área de texto rico” e “Interface 4D Write Pro”, que serão adaptados numa versão futura.

CSS para as aparências claras e escuras

Se tiver definido cores personalizadas para seguir a carta gráfica de uma empresa, pode definir um estilo CSS tanto para o Modo Claro como para o Modo Escuro. Desta forma, a sua aplicação irá adaptar-se completamente às definições do SO.

Basta enquadrar as classes CSS com uma consulta multimédia definida para o valor claro, e fazer o mesmo com o valor escuro.

O exemplo abaixo define texto preto sobre um fundo branco para o Modo Claro, e texto branco sobre um fundo preto para o Modo Escuro.

@media (prefers-color-scheme: light) {
 .textTheme {
    fill: MidnightBlue;
    stroke: black;
  }
}

@media (prefers-color-scheme: dark) {
  .textTheme {
    fill: MidnightBlue;
    stroke: LightGrey;
  }
}

Se não estiver familiarizado com CSS em 4D, aconselhamos que leia este post no blog ou veja este vídeo de 30 minutos 4D Summit.

Imagens E ícones

Poderá ter necessidade de criar novas imagens para o aspecto sombrio da sua candidatura. Estas novas imagens têm o mesmo nome que as imagens da versão clara, seguidas de “_escuro”, e são colocadas ao seu lado:

Não é necessário modificar nada em 4D. A imagem certa será carregada dependendo da aparência do formulário.

MODE PARCIAL ESCURO e mais

Se não estiver pronto, tiver dúvidas, ou quiser forçar um tema para um componente, pode optar por não aplicar as alterações a toda a aplicação, e aplicá-las apenas a um formulário. Também pode fazer com que o seu tema siga o tema da base de dados anfitriã ou as suas preferências de SO.

A nível de aplicação

Pode definir o valor do esquema de cores no diálogo de definições ou através de código com o novo SET APPLICATION COLOR SCHEME comando. Os valores possíveis são:

• escuro
• luz
• herdado

O valor herdado significa o seguinte:

• se estiver num componente, siga a cor da base de dados do hospedeiro
• se estiver numa base anfitriã, siga a cor do sistema operativo

Nível de forma

Na sua candidatura, alguns diálogos não estão prontos para uma aparência escura. O esquema de cores é uma nova propriedade do formulário que lhe permite forçar um formulário a adoptar uma aparência clara ou escura.

O que se segue?

Fez uma longa viagem para a escuridão. Se tiver quaisquer perguntas ou comentários, por favor junte-se à discussão no Fórum 4D!