È arrivato il supporto alla modalità scura su macOS.

La Modalità scura è fantastica e crea un’esperienza d’uso entusiasmante. Per questo motivo, a partire da 4D v19, 4D supporta ora la Modalità scura, che si attiva automaticamente se la Modalità scura è attivata a livello di macOS.

Questo è solo l’inizio e nelle versioni future sono previste altre novità, come il supporto della Modalità scura per tutti i componenti (ad esempio il widget 4D Write Pro) e la Modalità design.

Volete vedere come la Modalità scura trasforma l’aspetto degli elementi di 4D? Continuate a leggere!

I moduli si adattano automaticamente

Se il carattere, il bordo e il colore di sfondo degli oggetti del modulo sono già impostati su “automatico”, non è necessario modificare nulla: i moduli si adatteranno automaticamente al tema del sistema operativo.

Abbiamo anche aggiornato gli oggetti della libreria per supportare la modalità chiara e scura, ad eccezione degli oggetti “Rich text area” e “4D Write Pro Interface” che saranno adattati in una versione futura.

CSS per l’aspetto chiaro e scuro

Se avete definito dei colori personalizzati per seguire la carta grafica di un’azienda, potete definire uno stile CSS sia per la modalità chiara che per quella scura. In questo modo, la vostra applicazione si adatterà completamente alle impostazioni del sistema operativo.

È sufficiente inquadrare le classi CSS con una media query impostata sul valore chiaro e fare lo stesso con il valore scuro.

L’esempio seguente imposta il testo nero su sfondo bianco per la modalità chiara e il testo bianco su sfondo nero per la modalità scura.

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

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

Se non avete familiarità con i CSS in 4D, vi consigliamo di leggere questo post del blog o di guardare questo video di 30 minuti del 4D Summit.

Immagini e icone

Potrebbe essere necessario creare nuove immagini per l’aspetto scuro della vostra applicazione. Queste nuove immagini hanno lo stesso nome di quelle della versione chiara, seguito da “_dark”, e sono posizionate accanto ad esse:

Non è necessario modificare nulla in 4D. Verrà caricata l’immagine giusta a seconda dell’aspetto del modulo.

MODALITÀ PARZIALE SCURO e altro ancora

Se non siete pronti, avete dei dubbi o volete forzare un tema per un componente, potete scegliere di non applicare le modifiche all’intera applicazione e di applicarle solo a un modulo. È anche possibile far sì che il tema segua il tema del database host o le preferenze del sistema operativo.

A livello di applicazione

È possibile impostare il valore della combinazione di colori nella finestra di dialogo delle impostazioni o tramite codice con il nuovo comando SET APPLICATION COLOR SCHEME . I valori possibili sono:

• scuro
• chiaro
• ereditato

Il valore ereditato significa quanto segue:

• se ci si trova in un componente, si segue il colore del database dell’host
• se ci si trova in una base host, si segue il colore del sistema operativo

Livello del modulo

Nella vostra applicazione, alcune finestre di dialogo non sono pronte per un aspetto scuro. Color Scheme è una nuova proprietà del modulo che consente di forzare un modulo ad adottare un aspetto chiaro o scuro.

Cosa succede ora?

Avete intrapreso un lungo viaggio nell’oscurità. Se avete domande o commenti, partecipate alla discussione sul Forum 4D!