Come posso applicare un effetto di attenuazione o riduzione della luminosità alle immagini quando la modalità scura è attiva?

Per applicare un effetto di attenuazione o riduzione della luminosità alle immagini quando la modalità scura è attiva, puoi utilizzare la proprietà CSS filter abbinata al selettore della modalità scura ([data-theme="dark"]).

1.Apri l'editor HTML del tema:Accesso al codice.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Verifica: L'editor del codice sorgente del blog risulta aperto.

2.Aggiungi il filtro per le immagini:Modifica CSS.

All'interno del blocco <style> precedentemente creato per la modalità scura, aggiungi la regola per applicare il filtro di luminosità e contrasto alle immagini:

CSS

[data-theme="dark"] img {
  filter: brightness(0.85) contrast(0.9);
  transition: filter 0.3s ease;
}

Nota: Puoi modificare i valori di brightness (es. 0.8 per scurire di più, 0.9 per una riduzione più leggera) in base alle tue preferenze estetiche.

Verifica: La regola CSS viene inserita correttamente subito dopo le dichiarazioni della modalità scura.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche, quindi apri il blog e attiva la modalità scura tramite il pulsante.

Verifica: Le immagini all'interno dei post risultano visibilmente attenuate e meno abbaglianti su sfondo scuro.