Solo una breve nota per informarvi che oggi abbiamo aggiunto una modalità scura personalizzata con un selettore di temi a destra del menu superiore.
L'implementazione automatica(prefers-color-scheme) è stata sostituita da una gestione basata sul selettore [data-theme="dark"] che permetteva di visualizzare il tema scuro quando l'utente lo selezionava nel proprio browser. Alcuni, come Opera, hanno un'opzione"forza modalità scura" che crea una versione scura abbastanza decente, ma con alcuni bug come l'inversione delle immagini che vengono mostrate in negativo e non permettono di configurare nulla.
Ho scelto di utilizzare HTML e JS inseriti con elementi di GeneratePress e CSS in un lungo snippet con tutte le annotazioni per avere un elenco completo di ciò che è stato regolato nel caso volessi migliorarlo o cambiarlo un giorno, oltre ad avere un controllo totale sul caricamento degli stili e una coerenza visiva assoluta in tutto il sito.
Questi sono i principali miglioramenti rispetto alla versione automatica:
- Ottimizzazione del rendering: eliminazione di sfarfallii e conflitti grazie a una gerarchia di stili CSS unificata che garantisce il caricamento immediato del tema scuro.
- Coerenza visiva: regolazione precisa dei colori e dei filtri sugli elementi dinamici (GenerateBlocks, Query Loops, schede e accordion) per evitare problemi di leggibilità (colori grigi su sfondo bianco).
- Controllo degli elementi dinamici: correzione dei filtri di fusione
(mix-blend-mode) e delle opacità nelle immagini e nei menu, assicurando che elementi come l'icona Polylang o le schede della pagina del documentario mantengano il loro corretto contrasto in qualsiasi condizione. - Pulizia tecnica: eliminazione dei selettori ridondanti e unificazione delle regole CSS per facilitare la manutenzione futura senza impatto sulle prestazioni e sul CLS.
Questo, che può essere fatto anche con un plugin, con le logiche limitazioni, ho deciso di farlo con il codice, non solo per risparmiarmi un plugin, ma anche per avere un controllo granulare e una regolazione fine per ogni piccolo dettaglio e poter agire sull'eventuale impatto che può avere sulla velocità di caricamento.
Se qualcuno è interessato al codice, che non è nemmeno un grosso problema, faccia un fischio e lo pubblicherò qui. Se siete tra coloro che si divertono a navigare nel dark web e trovate qualcosa che potrebbe essere migliorato, sentitevi liberi di lasciare un commento o di cliccare con forza sul pulsante giallo "Segnala bug" in fondo a ogni post.
Vorrei anche ricordarvi che svolgo lavori di ottimizzazione di WordPress e, occasionalmente, migrazioni e adattamenti a template GeneratePress con blocchi GenerateBlocks.
