La modalità oscura è diventata una preferenza popolare, quindi dovresti cercare di supportarla sui tuoi siti e nelle tue app web.
Negli ultimi anni, la modalità oscura ha guadagnato una notevole popolarità come opzione dell’interfaccia utente. Offre uno sfondo più scuro accompagnato da un testo più chiaro, che non solo riduce l'affaticamento degli occhi ma preserva anche la durata della batteria, soprattutto sugli schermi OLED.
Scopri come aggiungere un'opzione di modalità oscura ai tuoi siti Web e alle tue app Web, utilizzando una combinazione di CSS e JavaScript.
Comprendere la modalità oscura
La modalità oscura è una combinazione di colori alternativa per il tuo sito web che sostituisce il tradizionale sfondo chiaro con uno scuro. Rende le tue pagine più piacevoli alla vista, soprattutto in condizioni di scarsa illuminazione. La modalità oscura è diventata una funzionalità standard su molti siti Web e applicazioni grazie alla sua natura intuitiva.
Impostazione del tuo progetto
Prima di implementarlo, assicurati di avere un progetto impostato e pronto su cui lavorare. Dovresti avere i tuoi file HTML, CSS e JavaScript organizzati in modo strutturato.
Il codice HTML
Inizia con il seguente markup per il contenuto della tua pagina. Un visitatore sarà in grado di utilizzare il file tema__switcher elemento per alternare tra la modalità scura e quella chiara.
<body>
<navclass="navbar">
<spanclass="logo">Company Logospan><ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul><divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav><main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.
main>
<scriptsrc="./script.js">script>
body>
Il codice CSS
Aggiungi il seguente CSS per dare stile all'esempio. Questa fungerà da modalità luce predefinita che in seguito migliorerai con nuovi stili per una visualizzazione in modalità oscura.
@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}
.navbarspan { margin-right: auto; }
.logo { font-weight: 700; }
.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}
#theme__switcher { cursor: pointer; }
main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}
Al momento, la tua interfaccia dovrebbe assomigliare a questa:
Implementazione della modalità oscura utilizzando CSS e JavaScript
Per implementare la modalità oscura, ne definirai l'aspetto utilizzando i CSS. Utilizzerai quindi JavaScript per gestire il passaggio dalla modalità scura a quella chiara.
Creazione delle lezioni a tema
Utilizza una classe per ciascun tema in modo da poter passare facilmente da una modalità all'altra. Per un progetto più completo, dovresti considerare come la modalità oscura può influenzare ogni aspetto del tuo progetto.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Selezione degli elementi interattivi
Aggiungi il seguente JavaScript al tuo file script.js file. Il primo bit di codice seleziona semplicemente gli elementi che utilizzerai per gestire l'interruttore.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Aggiunta della funzionalità di attivazione/disattivazione
Successivamente, utilizza il seguente JavaScript per alternare tra la modalità luce (leggero) e modalità oscura (buio) classi. Tieni presente che è anche una buona idea modificare l'interruttore a levetta per indicare la modalità corrente. Questo codice lo fa con un filtro CSS.
// Function to set the themefunctionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
bodyEl.classList.toggle("dark", theme "dark");
// If the theme is "light," add the "light" class, remove "dark" class,
bodyEl.classList.toggle("light", theme !== "dark");
// adjust filter of the toggle switch
themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}
// Function to toggle the theme between light and dark
functiontoggleTheme() {
setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}
themeToggle.addEventListener("click", toggleTheme);
Ciò fa sì che la tua pagina cambi tema con un clic sul contenitore di attivazione/disattivazione.
Migliorare la modalità oscura con JavaScript
Considera i seguenti due miglioramenti che possono rendere i tuoi siti in modalità oscura più piacevoli da utilizzare per i tuoi visitatori.
Rilevamento delle preferenze dell'utente
Ciò comporta il controllo del tema di sistema dell’utente prima che il sito Web venga caricato e la regolazione del sito in modo che corrisponda. Ecco come puoi farlo utilizzando il matchMedia funzione:
// Function to detect user's preferred themefunctiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
// Run the function to detect the user's preferred theme
detectPreferredTheme();
Ora, qualsiasi utente che visita il tuo sito vedrà un design che corrisponde al tema attuale del proprio dispositivo.
Persistenza delle preferenze dell'utente con l'archiviazione locale
Per migliorare ulteriormente l'esperienza dell'utente, utilizzare l'archiviazione locale per ricordare la modalità scelta dall'utente tra le sessioni. Ciò garantisce che non debbano selezionare ripetutamente la modalità preferita.
functionsetTheme(theme) {
bodyEl.classList.toggle("dark", theme "dark");
bodyEl.classList.toggle("light", theme !== "dark");themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
// Setting the theme in local storage
localStorage.setItem("theme", theme);
}// Check if the theme is stored in local storage
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}
Abbracciare il design incentrato sull'utente
La modalità oscura va oltre l'apparenza; si tratta di mettere al primo posto il comfort e le preferenze dell'utente. Seguendo questo approccio, puoi creare interfacce user-friendly e incoraggiare visite ripetute. Mentre codifichi e progetti, dai priorità al benessere degli utenti e offri un'esperienza digitale migliore ai tuoi lettori.
