Creare un sito web con Dark Mode utilizzando HTML CSS e Javascript
-
11 Gennaio, 2023
Per creare un sito con modalità scura (dark mode) e modalità chiara (light mode) ci sono diverse opzioni. Ecco alcune linee guida per iniziare:
- Utilizzare CSS per definire i vari stili per la modalità scura e quella chiara. È possibile utilizzare le proprietà di CSS come ‘color’ e ‘background-color’ per definire i colori dei vari elementi del sito.
- Utilizzare JavaScript per gestire il cambio tra modalità scura e modalità chiara. Ad esempio, è possibile utilizzare un cookie o un’altra soluzione per memorizzare la preferenza dell’utente e cambiare i CSS di conseguenza.
- Utilizzare un framework CSS come Bootstrap o Foundation, che già dispongono di una funzionalità di modalità scura/chiara incorporata
- Utilizzare librerie CSS come dark-mode-switch o use-dark-mode
- Utilizzare una libreria JavaScript/CSS come “Simple-Dark-Mode”
Questi sono solo alcuni esempi di come è possibile implementare la modalità scura e quella chiara in un sito web. Ci sono molte altre librerie e strumenti disponibili che è possibile utilizzare per creare un sito con queste funzionalità.
Proprietà CSS color-scheme cos’è e come funziona
La proprietà CSS color-scheme è una proprietà prospettiva che ti permette di definire un insieme di regole per la modalità scura (dark) e quella chiara (light) del tuo sito.
Il valore “dark” per la proprietà color-scheme indica che si vuole che il sito utilizzi la modalità scura. Con questo valore, i browser potrebbero cambiare automaticamente i colori e l’illuminazione di alcuni elementi del sito, come i link, per adattarsi meglio all’ambiente scuro.
Per utilizzare la modalità scura, bisogna specificare che color-scheme deve essere impostato su “dark” nel tag <html> del tuo documento HTML e utilizzare le regole CSS specifiche per quella modalità utilizzando la pseudo-classe :root[color-scheme='dark'].
Ad esempio:
<html color-scheme="dark">
<head>
<style>
:root[color-scheme='dark'] {
/* definizione dei propri stili per modalità scura */
background-color: black;
color: white;
}
</style>
</head>
<body>
<!-- il contenuto del tuo sito qui -->
</body>
</html>
Tenere a mente che la proprietà color-scheme è ancora una proprietà prospettica ed è supportato solo in alcuni browser come Safari Technology Preview, Chrome Canary e Firefox Nightly .
