Dark Mode
Modalità scura
La modalità scura cambia superfici, testo, bordi, media e stati per un ambiente scuro.
Un altro esempio
La pagina cambia grafici, blocchi di codice, ombre, anelli di messa a fuoco e colori del browser, non solo lo sfondo.
Parti principali
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
Usalo quando
Offrirlo quando le persone lavorano con luci diverse o scelgono un tema scuro del sistema.
Non usarlo quando
Non invertire mai semplicemente tutti i colori. Controlla il contrasto e assicurati che ogni stato mantenga il suo significato.
Nome usato nel codice
prefers-color-scheme Prima di spedire
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Modalità scura (Dark Mode). User context: La pagina cambia grafici, blocchi di codice, ombre, anelli di messa a fuoco e colori del browser, non solo lo sfondo. Design concept to apply: Modalità scura (Dark Mode). Why it fits: Offrirlo quando le persone lavorano con luci diverse o scelgono un tema scuro del sistema. Do not use it when: Non invertire mai semplicemente tutti i colori. Controlla il contrasto e assicurati che ogni stato mantenga il suo significato. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Nessun singolo standard ufficiale controlla l'intero termine. Il suo significato può cambiare tra team, piattaforme o framework. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how Modalità scura (Dark Mode) is used now. Definition: La modalità scura cambia superfici, testo, bordi, media e stati per un ambiente scuro. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.