> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Logo SVG in modalità scura: scegli chi controlla i colori > Scegli se il logo SVG segue la preferenza utente o il tema della pagina. Confronta CSS inline, file esterno adattivo e grafica fissa in un test browser. Source: https://perfectvector.com/it/blog/dark-mode-svg-logo Language: it Author: Irene Kim Published: 2026-10-22T08:00:00+09:00 Un logo SVG per modalità scura richiede una fonte esplicita dell'informazione sul tema. Il CSS della pagina può stilizzare i tracciati di un SVG inline. Un SVG esterno caricato da un elemento immagine ha il proprio contesto di stile, ma una query interna `prefers-color-scheme` può rispondere allo schema cromatico dell'elemento che lo incorpora. Una classe di tema manuale e la preferenza chiaro/scuro dell'utente sono dati distinti: decidi quale debba controllare la grafica. Conserva varianti approvate per superfici chiare e scure quando esistono. Invertire tutti i colori può cambiare un accento, perdere un contorno intenzionale o produrre un logo non approvato. Il supporto ai temi è una scelta di colorazione e integrazione dopo che la grafica è corretta. ## Separa preferenza utente e tema della pagina La **funzione media CSS `prefers-color-scheme`** rileva una preferenza chiaro/scuro comunicata da browser o sistema. [MDN descrive questi input](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). L'attributo del sito `data-theme="dark"` è soltanto stato dell'applicazione finché CSS o codice non gli dà effetto. Questo spiega una divergenza comune: il browser resta su chiaro mentre il visitatore seleziona una superficie scura sul sito. Un logo che segue soltanto la preferenza può mantenere su quella pagina scura i suoi colori per una superficie chiara. La proprietà **`color-scheme`** è un altro controllo. Comunica quali schemi l'elemento supporta; non ridisegna automaticamente ogni riempimento dell'autore. [Il riferimento MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) distingue il rendering gestito dal browser dagli stili di tema che l'autore deve ancora fornire. | Responsabile previsto | Scelta di integrazione | Cosa verificare | | ------------------------------------ | ----------------------------------------------------------- | --------------------------------------------------- | | Tema manuale dell'app | Tracciati inline stilizzati dai selettori di tema | Entrambi i colori cambiano con il tema | | Schema della superficie incorporante | SVG esterno con regole media proprie e schema host adeguato | Lo stesso file sceglie i colori voluti su ogni host | | Variante fissa fornita del marchio | Selezione della risorsa approvata nell'app | File adatto alla superficie e nome corretto | Non aggiungere tre meccanismi indipendenti sperando che coincidano. Definisci il responsabile prima di correggere il colore visibile. ## Usa selettori pagina per un logo inline a tema manuale L'SVG inline appartiene al documento della pagina, quindi selettori mirati possono raggiungerne i tracciati. Il [confronto SVG inline e immagine](https://perfectvector.com/it/blog/inline-svg-vs-img) spiega il confine di accesso. Abbiamo creato una F con due ruoli di colore: forma principale e accento circolare separato. Questi colori illustrativi sono scelte originali, non uno standard di marca. ```css .ink { fill: #183c35; } .accent { fill: #c58868; } [data-theme="dark"] .ink { fill: #f5f0e7; } [data-theme="dark"] .accent { fill: #ffc34d; } ``` Applica le regole alla grafica voluta, non a ogni tracciato del sito. Un logo può avere più colori intenzionali, maschere o gradienti. La [guida a cambiare colore SVG](https://perfectvector.com/it/blog/how-to-change-svg-color) copre l'ispezione di ciò che colora effettivamente una forma prima di modificarne gli stili. `currentColor` è utile se una forma deve condividere il colore del testo del proprio elemento. Non è obbligatorio per un logo multicolore. Separa l'accento quando il disegno richiede un altro colore e controlla il marchio intero su ogni superficie. ## Lascia al file esterno le regole media interne Un'immagine esterna è un contesto separato. Impostare `color: rebeccapurple` sull'elemento HTML non entra nel file per ricolorare tracciati arbitrari. Nemmeno `currentColor` dentro l'SVG diventa automaticamente il colore di testo della pagina host. Il file può invece contenere regole proprie. Questo è l'SVG adattivo completo del nostro test originale: ```xml ``` Per un'immagine SVG incorporata, la query può riflettere lo schema usato dall'elemento incorporante. [La specifica CSS Color Adjustment](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) descrive la relazione. È un segnale di schema, non il passaggio dei normali selettori della pagina dentro il file. Nel test un host imposta `color-scheme: light`, l'altro `color-scheme: dark`. Caricano lo stesso file. Anche i colori di sfondo e testo sono stati definiti intenzionalmente. La sola proprietà non fornirebbe quegli stili completi. Se l'app gestisce il tema, coordina lo schema host con quella scelta. Fondo scuro e host ancora dichiarato chiaro possono inviare un segnale diverso dal previsto. ## Confronta i tre percorsi nel browser reale La nostra pagina HTML originale di prova ha due elementi host con schema fisso nella parte superiore. Sotto, un pulsante cambia il tema manuale per una forma inline e un'immagine esterna a colore fisso. Il controllo esterno contiene la stessa geometria senza regola media scura. Il browser riportava preferenza chiara. Facendo clic sul pulsante del tema manuale, il riempimento principale inline è cambiato da `rgb(24, 60, 53)` a `rgb(245, 240, 231)` e quello dell'accento è passato da `rgb(197, 136, 104)` a `rgb(255, 195, 77)`. La preferenza è rimasta chiara. Il cambiamento veniva dai selettori della pagina. Le immagini superiori mostravano i colori chiari e scuri scelti dai rispettivi host. Quella fissa ha mantenuto verde e rame anche con superficie scura e `color` calcolato viola sull'elemento HTML. ![Test reale nel browser dello stesso SVG adattivo su host chiaro e scuro, logo inline a tema manuale e controllo esterno fisso che mantiene i colori originali](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp) *Test HTML/CSS originale nel browser integrato Codex. Il tema manuale è scuro mentre la query utente riporta chiaro. Gli schemi degli host superiori sono input espliciti; la preferenza del sistema operativo non è stata cambiata.* Abbiamo ispezionato stili calcolati e rendering. Tutte e tre le immagini esterne sono state caricate alle loro dimensioni naturali di 140 × 105 e visualizzate a 280 × 210. Il test stabilisce il comportamento dei file in quella sessione. Non è un test tra browser diversi, client di posta, esportazioni PDF o cambi della preferenza del sistema operativo. ## Prova l'uso finale, non solo il file isolato Apri separatamente l'SVG originale per controllarne la geometria, poi esaminalo attraverso l'incorporazione nella pagina effettiva. Controlla entrambi i temi, accento, aperture trasparenti e sfondo immediato. Un logo responsive può anche cambiare composizione a piccole dimensioni; la [guida al lockup responsive](https://perfectvector.com/it/blog/responsive-svg-logo-lockup) tratta la scelta distinta. L'immagine SVG esterna ha limiti: [MDN segnala script disabilitati e risorse esterne limitate](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Per questo approccio tieni gli stili nel file e prova il contesto reale. Un risultato nel browser non garantisce lo stesso comportamento in un sistema di rendering delle email o in un importatore di un'applicazione di grafica. Per un logo adatto disponibile solo come PNG o JPEG, [il flusso di vettorializzazione loghi PerfectVector](https://perfectvector.com/it/vectorize-logo) ricostruisce tracciati candidati. Confronta la sagoma, le lettere e i piccoli spazi con la sorgente prima di preparare le varianti per i temi. La vettorizzazione non assegna ruoli semantici ai colori, non aggiunge la logica del tema dell'applicazione e non approva una variante del marchio con colori invertiti. Il nostro segno è nato direttamente come forme vettoriali. ## FAQ **Una pagina scura ricolora automaticamente un SVG esterno?** No. Le regole di colorazione interne all'immagine restano determinanti. Un SVG adattivo può usare la propria query con lo schema dell'elemento incorporante; uno fisso può mantenere i colori originali. **Una classe manuale scura cambia prefers-color-scheme?** Non da sola. Classe e attributo sono stato dell'app. Nel test il tema manuale cambiava mentre la preferenza browser restava chiara. **Devo invertire tutti i colori del logo per il tema scuro?** Usa varianti approvate se disponibili. Controlla colore principale, accento, contorni e aperture sulla superficie reale, senza presumere che l'inversione generale preservi il disegno. ## Fonti 1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Preferenze utente e comportamento SVG incorporato. 2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Supporto agli schemi e responsabilità separata dell'autore per gli stili. 3. [CSS Color Adjustment: Effetti dello schema usato](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Segnale dello schema cromatico fornito al contenuto incorporato. 4. [MDN: SVG come immagine](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Restrizioni di script e risorse nel contesto immagine. *** Servono tracciati modificabili da un logo solo raster? [Crea e controlla un SVG candidato](https://perfectvector.com/it/vectorize-logo), conserva il master accettato e definisci i ruoli di colore, poi prova la pagina con i temi effettivi. ## Explore - [Read the HTML article](https://perfectvector.com/it/blog/dark-mode-svg-logo) - [Evita salti di layout del logo SVG riservando spazio](https://perfectvector.com/it/blog/svg-logo-layout-reservation.md) - [Spazio sotto un SVG inline: correggi il layout CSS](https://perfectvector.com/it/blog/inline-svg-baseline-gap.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)