La maggior parte dei browser Web moderni supporta la possibilità di eseguire siti Web in modalità scura o chiara. Blocs ha una gamma di funzionalità integrate progettate per aiutare il processo di aggiunta del supporto per temi scuri e chiari ai siti che crei.
Come funziona
Quando Blocs il sito viene visualizzato su un dispositivo che esegue il sistema operativo in modalità oscura, la classe tema scuro verrà aggiunto al tag body della pagina. Questo è utile in quanto semplifica lo stile di qualsiasi elemento utilizzando una classe, in particolare in modalità oscura.
Ad esempio, se hai un pulsante con una classe applicata .mio-pulsante, per dare al pulsante un aspetto diverso in modalità oscura, tutto ciò che devi fare è aggiungere una nuova classe usando il Gestore di classe e nominalo .tema-scuro .mio-pulsante. Eventuali valori di stile aggiunti a questa variazione speciale della classe avranno effetto solo quando il sito viene visualizzato su un dispositivo in esecuzione in modalità oscura.
Classi a tema scuro
Per creare una versione a tema scuro di qualsiasi classe, fai semplicemente clic con il pulsante destro del mouse sulla classe nel Gestore di classe e dal menu contestuale selezionare Crea versione a tema scuro. Questo creerà una classe con il nome corretto in modo che i suoi valori di stile abbiano effetto solo quando il sito viene visualizzato in modalità oscura.
Anteprima modalità scura
Se desideri visualizzare l'anteprima dello stile del tema scuro del tuo sito, puoi simulare la modalità scura del sistema operativo utilizzando l'opzione della modalità del sito scuro che si trova nel impostazioni della tela.
Tieni presente che l'opzione canvas della modalità sito scuro influisce anche sulla modalità di anteprima in-app e sulla tela di progettazione principale.
Esempio rapido
Di seguito è riportato un rapido esempio che copre il processo di impostazione del colore di sfondo di a Bloc specificamente per la modalità oscura, utilizzando tutte le tecniche menzionate in questo post.
