Blog Mind
  • How To
  • Vita da corsista
  • Inspiration
  • Work Tips
  • Corsi
Home  /  How To • Linguaggi di programmazione  /  Come implementare la Dark Mode con i CSS
How To

Come implementare la Dark Mode con i CSS

Devis Dainese Progettazione siti web
Implementare la Dark Mode con i CSS

La Dark Mode è la funzionalità dei sistemi operativi Android e iOS che consente di avere un’interfaccia scura per le app più usate, come WhatsApp, Instagram e Facebook e il browser Google Chrome. La modalità scura permette di risparmiare la batteria del cellulare o del PC portatile e di affaticare meno gli occhi, soprattutto nelle ore serali.

Se sei uno sviluppatore web, puoi implementare la Dark Mode all’interno di un sito web per consentire all’utente di impostarla dal suo cellulare o computer. In questo articolo vedremo come realizzarla step by step, utilizzando uno dei linguaggi più usati, i CSS.

Per iniziare, crea le cartelle e i file utili alla realizzazione del tuo progetto web: la cartella CSS, img, i file style.css e index.html. Poi scarica da Internet due immagini di larghezza 400 pixel e altezza 330 pixel.

A questo punto, inserisci il seguente codice nel file index.html:

L'HTML per la Dark Mode

Come puoi vedere, hai appena inserito dei font Google e il codice che permette di utilizzare le icone di Font Awesome nel tuo progetto web. All’interno del body, hai creato un tag input che consente di passare dalla Light Mode alla Dark Mode, e viceversa. Subito dopo trovi il tag main che conterrà tutto il codice della pagina. Apri ora il file style.css e scrivi questo codice:

CSS di base per la Dark Mode

Se apri il documento index.html sul browser dovresti vedere un risultato simile a questo:

Formattazione di base per l'esercizio della Dark Mode

Ora che hai impostato la formattazione di base del progetto, attraverso il CSS puoi inserire una media query in grado di rilevare se la modalità scura è attiva nel dispositivo dell’utente, aggiungendo questo codice:

Media query per la Dark Mode

Sela Dark Mode è attiva, la media query attiverà tutte le regole CSS inserite al suo interno, mostrando automaticamente la pagina con i colori scuri. Se invece tale modalità è disattivata, la media query non verrà abilitata.

Adesso inserisci all’interno delle parentesi graffe il codice che desideri venga attivato dal browser quando è in funzione la modalità notturna:

Codice dentro alla Media Query per la Dark Mode

Queste poche e semplici regole faranno in modo che la pagina web cambi completamente aspetto se la Dark Mode è attiva nel PC o nel cellulare dell’utente.

Dark Mode attivata

Impostazione del bottone per attivare la Dark Mode

Ora andrai a formattare il tag input e il tag label presenti all’interno del file index.html, per permettere agli utenti di passare con un semplice clic dalla Dark Mode alla Light Mode e viceversa. Scrivi il codice evidenziato in rosso nell’immagine seguente subito prima della media query appena inserita:

Codice CSS per il pulsante che attiva la Dark Mode

Adesso aggiungi il codice evidenziato qui sotto nella media query che attiva la Dark Mode:

Codice CSS per il pulsante che attiva la Light Mode

Il pulsante che hai creato permetterà agli utenti di selezionare la modalità chiara o scura ogni volta che lo desiderano, proprio come in questo esempio. Missione compiuta!

Related Posts

  • Numerazione delle pagine con InDesign

    Come inserire la numerazione delle pagine con InDesign

  • Promuovere una pagina Facebook

    Come promuovere una pagina Facebook: alcuni consigli utili

  • Progetti di grafica: come realizzarli in 8 step

  • La creazione di un database con MySQL

Newsletter

Iscriviti alla nostra newsletter!



Post recenti

  • Mattia Malengo
    Intervista a Mattia Malengo: vi racconto la mia esperienza di TikToker Work Tips
  • Numerazione delle pagine con InDesign
    Come inserire la numerazione delle pagine con InDesign Graphic Design, How To
  • Promuovere una pagina Facebook
    Come promuovere una pagina Facebook: alcuni consigli utili How To, Social Media Marketing
  • Implementare la Dark Mode con i CSS
    Come implementare la Dark Mode con i CSS How To, Linguaggi di programmazione
  • Font tipografici e Poster on Type Vita da corsista

Tendenze

Come fare copywriting Come gestire i social media Come progettare un sito web Consigli seo Corso Graphic Design Creare un brand di successo Gestione clienti Idee grafica Idee per siti web Ispirazione design Ispirazione grafica Lavoro freelance Mobile working Normative per il web Passione fotografia Passione grafica Personal branding Professione fumettista Progettazione siti web Social media marketing idee Strategie di marketing e comunicazione Strumenti per web designer Trend design

Contatti

Dove siamo

Sede
Via Venezia, 90/A
35129 Padova, Italia

Come contattarci

Telefono
049 7449220
Email
info@creativemind.academy

Newsletter

Iscriviti alla nostra newsletter!

Lasciaci la tua email
Riceverai in anteprima i nostri articoli



Post popolari

  • Brand book per l'immagine aziendale
    Guida alla creazione di un brand book Mind
Blog Mind

© MIND srl 2019 - Tutti i diritti riservati

MIND srl P.IVA e Codice Fiscale 05079870282 - Rea PD - 441420 - Reg Imprese 11/08/2017 - Marchio registrato/depositato presso Camera di Commercio codice 302016000074765