due chiacchiere

Che ne pensi dei siti in modalità scura?

Era da un po’ che l’omino talebano sulla mia spalla non mi stuzzicava con una delle sue idee malsane su come migliorare l’aspetto grafico di questo angolino sperduto nella rete. Sembravamo aver raggiunto una tregua duratura, ed io usavo lo stratagemma di accontentare le sue piccole richieste per tenermelo buono. Ma si deve essere accorto che con l’arrivo dell’estate e la scarsità di impegni (attività sportive delle figlie, inviti di amici e parenti, ecc), ho più tempo a disposizione. Così, complice un articolo sull’uso delle variabili in CSS che stavo leggendo durante un momento di relax, gli è venuto in mente di farmi notare che sarebbe bello se questo blog avesse una modalità scura, attivata automaticamente in base alle impostazioni del browser. “Visto che ti vanti tanto di avere un blog ecologico…”, ha aggiunto sornione quasi con tono di scherno. Secondo te potevo far finta di nulla?

A dire il vero, ho impostato la modalità dark su qualsiasi dispositivo e software che la renda disponibile. Dovendo io fissare uno schermo per molte ore al giorno per motivi di lavoro, trovo i colori scuri meno faticosi per gli occhi, specialmente durante quelle intense sessioni in cui trasformo le mie pazze idee in pezzi di codice. Per cui era solo questione di tempo prima che mi decidessi a mettere mano al mio tema per aggiungere questa funzionalità. Così ho intrapreso questo lungo cammino che porterà, a lavori ultimati, al rilascio della versione 4.9, sperabilmente la prossima settimana. Questo aggiornamento non introdurrà nessun cambiamento all’impaginazione (almeno su quello l’omino ed io siamo d’accordo), ma sotto il cofano il codice dei fogli di stile sarà riorganizzato, specialmente nel passaggio da SASS alle variabili CSS. E finalmente potrò avere la modalità scura anche nella mia bacheca di WordPress. Certo che di strada, da quel lontano 2006, questo tema ne ha fatta!

Per fortuna la struttura modulare, che avevo implementato già un paio d’anni fa, sta rendendo il lavoro meno tedioso. L’unica cosa che mi preoccupa un po’ è la scelta degli abbinamenti di colori, essendo io daltonico 😅 Ma per questo so di poter fare affidamento sui miei lettori: se noterai stonature estetiche evidenti, non esitare a farmelo presente nei commenti. Comunque, la verità è che da tempo volevo far pratica sull’uso delle custom properties nei fogli di stile, e quindi ho colto l’occasione per far diventare queste pagine il mio laboratorio creativo, invece che usare un plugin pronto all’uso. D’altro canto, come ho sempre sostenuto, se vuoi imparare a fare una cosa, devi sporcarti le mani. Ti lascio con un’anteprima di come cambierà l’aspetto del blog a partire (spero) dalla prossima settimana, se il tuo browser è impostato per la modalità scura. Cosa ne pensi?

Uno screenshot del sito in modalità scura

P.S.: mi pare di capire che Safari e gli altri browser su MacOS non si adattino automaticamente, in base alle impostazioni del sistema operativo, confermi? Ho visto che alcuni implementano un pulsantino per lasciar scegliere ai visitatori quale modalità usare, ma se possibile, eviterei di aggiungere ulteriori orpelli. A meno che non sia una funzione richiesta a furor di popolo 🙂

Commenti

  1. Paolo ha scritto:

    P.S.: mi pare di capire che Safari e gli altri browser su MacOS non si adattino automaticamente, in base alle impostazioni del sistema operativo, confermi?

    Non confermo. Safari lo fa automaticamente e pure a pagina già caricata

    Risposte al commento di Paolo

    1. camu ha scritto:

      Ottimo allora, grazie 🙂 Io avevo fatto delle prove con un emulatore, LambdaTest, e non cambiava. Deve essere un settaggio nella loro piattaforma…

  2. paolo ha scritto:

    ciao!
    tutto in modo automatico si fa davvero con un paio di righe in css:

    :root {
     color-scheme: light dark;
     --main-color: light-dark(red, white);
     --background-color: light-dark(white, red);
    }

    body {
     background: var(--background-color);
    }

    p {
     color: var(--main-color);
    }

    Risposte al commento di paolo

    1. camu ha scritto:

      Si, esatto. Io ho preferito usare la media query prefers-color-scheme, visto che light-dark è ancora considerato sperimentale ed è stato aggiunto ai vari browser solo di recente, stando a quello che riporta can i use. Comunque, quando andrà in onda, se hai altri suggerimenti, sono bene accetti 🙂

  3. Katrina Uragano ha scritto:

    Io però la terrò chiara, ho notato che fatico di più a leggere sul nero.
    Buona giornata.

    Risposte al commento di Katrina Uragano

    1. camu ha scritto:

      Come dicevano gli antichi romani, de gustibus non est disputandum. Grazie, questo è esattamente il tipo di feedback di cui ho bisogno. Ma tu nel tuo computer quindi non hai impostato la modalità scura nel sistema operativo, vero?

      Risposte al commento di camu

      1. Katrina Uragano ha scritto:

        No, no. Nè sul pc nè sul telefono. Sul serio fatico di più.

        Risposte al commento di Katrina Uragano
        1. camu ha scritto:

          Perfetto 🙂 Allora per te non dovrebbe cambiare nulla nelle prossime ore.

Lascia un commento

Torna in cima alla pagina