[{"data":1,"prerenderedAt":164},["ShallowReactive",2],{"post-dark-mode-is-a-second-design-it":3,"related-posts-dark-mode-is-a-second-design-it":128,"related-categories-dark-mode-is-a-second-design-it":152},{"id":4,"title":5,"author":6,"authorImageUrl":7,"authorUrl":8,"body":9,"categorySlug":103,"categoryText":104,"dateModified":105,"datePublished":106,"description":107,"extension":108,"faqs":109,"image":116,"language":117,"meta":118,"navigation":119,"path":120,"seo":121,"stem":122,"tags":123,"__hash__":127},"blog\u002Fit\u002Fblog\u002Fdark-mode-is-a-second-design.md","La modalità scura è un secondo design, non un filtro","Bruma","\u002Fimages\u002Fauthors\u002Fbruma.jpg","https:\u002F\u002Fbrumaombra.com",{"type":10,"value":11,"toc":93},"minimark",[12,17,21,24,28,60,66,73,78,81,86,90],[13,14,16],"h2",{"id":15},"il-tema-che-sembra-quasi-giusto","Il tema che sembra quasi giusto",[18,19,20],"p",{},"Il modo più rapido per avere una modalità scura è scambiare il bianco con il nero e il nero con il bianco. Funziona, nel senso che il testo resta leggibile. Ma sembra anche leggermente sbagliato, in un modo difficile da descrivere: le ombre spariscono, il colore d'accento abbaglia e ogni bordo sembra troppo marcato o del tutto assente.",[18,22,23],{},"Questo perché un tema scuro non è il tema chiaro a luci spente. I colori si comportano diversamente su uno sfondo scuro, e alcuni hanno bisogno di decisioni proprie.",[13,25,27],{"id":26},"dai-un-nome-ai-colori-in-base-al-ruolo-non-alla-tonalità","Dai un nome ai colori in base al ruolo, non alla tonalità",[18,29,30,31,35,36,39,40,43,44,35,47,35,50,35,53,35,56,59],{},"La correzione che fa gran parte del lavoro è un cambio di vocabolario. Invece di usare ",[32,33,34],"code",{},"white",", ",[32,37,38],{},"gray-100"," o ",[32,41,42],{},"#1b222d",", i componenti usano nomi che descrivono un ruolo: ",[32,45,46],{},"background",[32,48,49],{},"card",[32,51,52],{},"surface",[32,54,55],{},"border",[32,57,58],{},"muted-foreground",". Ogni tema decide poi che aspetto hanno quei ruoli.",[61,62],"flow",{":items":63,"orientation":64,"title":65},"[\"Un componente chiede bg-card\",\"Il token punta a --card\",\"Il tema chiaro o scuro definisce --card\",\"Tutte le card si aggiornano insieme\"]","vertical","Come un token diventa un colore",[18,67,68,69,72],{},"In pratica, un componente scritto una volta non ha mai bisogno di una variante ",[32,70,71],{},"dark:"," per i suoi colori. Quando il tema cambia, ogni superficie cambia con lui.",[74,75,77],"h3",{"id":76},"tre-cose-che-i-token-non-risolvono","Tre cose che i token non risolvono",[18,79,80],{},"Sembra tutto il lavoro, ma alcuni dettagli richiedono ancora un occhio umano:",[82,83],"blog-list",{":items":84,"variant":85},"[\"I colori d'accento hanno bisogno di un valore più chiaro e un po' più caldo in modalità scura, altrimenti abbagliano sullo sfondo\",\"Le ombre richiedono un'opacità molto più alta, perché un'ombra morbida sparisce su una superficie scura\",\"Immagini e illustrazioni possono richiedere versioni scure dedicate, perché i token non possono ricolorare una foto\"]","numbered",[13,87,89],{"id":88},"due-design-un-solo-vocabolario","Due design, un solo vocabolario",[18,91,92],{},"Il punto non è che la modalità scura richieda il doppio del lavoro. Con i token semantici, gran parte è davvero automatica. È che la parte restante, gli accenti, la profondità, le immagini, merita la stessa attenzione del tema chiaro. Chi sceglie la modalità scura spesso la usa tutto il giorno, e si accorge quando è stata un ripensamento.",{"title":94,"searchDepth":95,"depth":95,"links":96},"",2,[97,98,102],{"id":15,"depth":95,"text":16},{"id":26,"depth":95,"text":27,"children":99},[100],{"id":76,"depth":101,"text":77},3,{"id":88,"depth":95,"text":89},"design-systems","Sistemi di design","2026-09-10T00:00:00Z","2026-09-08T00:00:00Z","Invertire i colori produce un tema scuro che funziona ma sembra leggermente sbagliato ovunque. I token semantici risolvono quasi tutto. Ombre e accenti richiedono più attenzione.","md",[110,113],{"question":111,"answer":112},"La modalità scura dovrebbe seguire il sistema operativo?","Come impostazione predefinita, sì. Il selettore del tema di UI Vintage parte in modalità automatica e segue il sistema, ma permette di scegliere esplicitamente chiaro o scuro e ricorda la scelta.",{"question":114,"answer":115},"Perché le ombre scure sono molto più marcate?","Perché un'ombra ha bisogno di contrasto con la superficie dietro. Su uno sfondo scuro un'ombra morbida è quasi invisibile, quindi il tema scuro usa valori più profondi e opachi per creare la stessa sensazione di profondità.","\u002Fimages\u002Fblog\u002Fdark-mode-is-a-second-design\u002Fcover.jpg","it",{},true,"\u002Fit\u002Fblog\u002Fdark-mode-is-a-second-design",{"title":5,"description":107},"it\u002Fblog\u002Fdark-mode-is-a-second-design",[124,125,126],"Design Systems","Theming","CSS","ZxJFvSjmlPc5bZ1ADksg-uvcOZXbq7CzNCPEqKq4_JE",[129,134,140,146],{"title":130,"description":131,"image":132,"categoryText":104,"path":133},"Progettare un sistema editoriale riutilizzabile","Come abbiamo trasformato un'interfaccia blog usata una sola volta in una superficie editoriale riutilizzabile, capace di mantenere la propria identità anche fuori dal prodotto originale.","\u002Fimages\u002Fblog\u002Fdesigning-a-reusable-editorial-system\u002Fcover.jpg","\u002Fit\u002Fblog\u002Fdesigning-a-reusable-editorial-system",{"title":135,"description":136,"image":137,"categoryText":138,"path":139},"Perché le animazioni a molla sembrano più veloci di quanto siano","Una molla che supera di poco il bersaglio può durare più di una semplice dissolvenza e sembrare comunque più rapida. Ecco perché, e dove il trucco smette di funzionare.","\u002Fimages\u002Fblog\u002Fwhy-spring-animations-feel-faster\u002Fcover.jpg","Motion design","\u002Fit\u002Fblog\u002Fwhy-spring-animations-feel-faster",{"title":141,"description":142,"image":143,"categoryText":144,"path":145},"Pubblicare la migrazione del blog nella libreria","Una sintesi pratica di ciò che è cambiato quando l'implementazione originale del blog è stata spostata in una libreria di componenti compatibile con Nuxt.","\u002Fimages\u002Fblog\u002Fshipping-the-blog-migration\u002Fcover.jpg","Aggiornamenti prodotto","\u002Fit\u002Fblog\u002Fshipping-the-blog-migration",{"title":147,"description":148,"image":149,"categoryText":150,"path":151},"Pubblicare una libreria Vue senza passaggio di build","UI Vintage pubblica il proprio codice sorgente e lascia che ogni app Nuxt lo compili. Questa scelta elimina un'intera categoria di problemi e ne introduce un paio di nuovi.","\u002Fimages\u002Fblog\u002Fsource-published-packages\u002Fcover.jpg","Sviluppo","\u002Fit\u002Fblog\u002Fsource-published-packages",[153,156,158,162],{"name":150,"slug":154,"count":155,"image":149},"engineering",1,{"name":144,"slug":157,"count":155,"image":143},"product-updates",{"name":159,"slug":160,"count":155,"image":161},"Accessibilità","accessibility","\u002Fimages\u002Fblog\u002Ffocus-states-people-notice\u002Fcover.jpg",{"name":138,"slug":163,"count":155,"image":137},"motion-design",1792259222347]