Dark Mode
Modo oscuro
El Modo oscuro cambia superficies, texto, bordes, medios y estados para un entorno oscuro.
Otro ejemplo
La página cambia gráficos, bloques de código, sombras, anillos de enfoque y colores del navegador, no solo su fondo.
Partes principales
- 01Foundation or token
- 02Applied component
- 03Visible state and rule
Úsalo cuando
Ofrecerla cuando las personas trabajen bajo diferente iluminación o elijan un tema oscuro del sistema.
No lo uses cuando
Nunca simplemente inviertas todos los colores. Verifica el contraste y asegúrate de que cada estado mantenga su significado.
Nombre usado en código
prefers-color-scheme Antes de lanzarlo
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 Modo oscuro (Dark Mode). User context: La página cambia gráficos, bloques de código, sombras, anillos de enfoque y colores del navegador, no solo su fondo. Design concept to apply: Modo oscuro (Dark Mode). Why it fits: Ofrecerla cuando las personas trabajen bajo diferente iluminación o elijan un tema oscuro del sistema. Do not use it when: Nunca simplemente inviertas todos los colores. Verifica el contraste y asegúrate de que cada estado mantenga su significado. 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): Ningún estándar oficial único controla todo el término. Su significado puede cambiar según equipos, plataformas o marcos. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Modo oscuro (Dark Mode) is used now. Definition: El Modo oscuro cambia superficies, texto, bordes, medios y estados para un entorno oscuro. 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.