PricingLoginStart free
SwiftUI Academy · Lección

Adaptarse a los modos claro y oscuro

Utilice colores semánticos para ambas apariencias.

Lección 4 de 413 pasos

Adaptarse a los modos claro y oscuro es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Two Appearances

iOS offers Light and Dark Mode, and users switch any time. A polished app looks great in both without extra effort.

Use Semantic Colors

Reach for semantic colors like Color.primary or Color(.systemBackground). They flip automatically between appearances.

Text("Title")
    .foregroundStyle(.primary)
    .background(Color(.systemBackground))

Avoid Hardcoded Colors

A fixed Color.black background stays black in Dark Mode and can vanish into it. Semantic colors adapt; raw ones do not.

Text("Hi")
    .background(.black)

Asset Catalog Colors

Define a color in the asset catalog with separate Any and Dark values. Reference it by name and it switches for you.

Color("Brand")

Primary and Secondary

Use .secondary for less important text. It dims appropriately in each mode while staying readable.

Text("Subtitle")
    .foregroundStyle(.secondary)

Materials for Depth

System materials like .ultraThinMaterial blur the background and adapt to the mode, giving cards a native feel.

VStack { }
    .background(.ultraThinMaterial)

Detecting the Mode

Read the current appearance with @Environment(\.colorScheme) when you truly need different content per mode.

@Environment(\.colorScheme) var scheme

Branch on Scheme

With colorScheme in hand, you can choose an asset, like swapping a logo, only where a semantic color can't do the job.

Image(scheme == .dark ? "logoDark" : "logoLight")

Preview Both Modes

Add .preferredColorScheme(.dark) to a preview to check Dark Mode without leaving Xcode.

#Preview {
    ContentView()
        .preferredColorScheme(.dark)
}

Forcing a Mode

You can lock a screen with preferredColorScheme, but prefer respecting the user's system choice whenever you can.

ContentView()
    .preferredColorScheme(.dark)

Check Contrast

Verify text stays readable in both modes. Good contrast is part of accessibility, not just style.

Quick Check

Which color choice automatically adapts between Light and Dark Mode?

Responde en la lección interactiva

Recap

Your app now looks right in any appearance: lean on semantic colors, asset colors, and materials, and preview both modes. 🌓

Gratis para empezar

Aprende Swift con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
30
Lecciones
120
Empezar a aprender gratisVer el curso completo

Preguntas frecuentes

¿La lección «Adaptarse a los modos claro y oscuro» es gratis?

Sí — el texto completo de «Adaptarse a los modos claro y oscuro» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Adaptarse a los modos claro y oscuro»?

Utilice colores semánticos para ambas apariencias. Practicas SwiftUI Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar SwiftUI Academy?

No se requiere experiencia previa. SwiftUI Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Adaptarse a los modos claro y oscuro»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de SwiftUI Academy?

Sí. Cada lección de SwiftUI Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. VoiceOver y etiquetas de accesibilidad
  2. Dynamic Type y fuentes escaladas
  3. Localizar cadenas y String Catalogs
  4. Adaptarse a los modos claro y oscuro
← Volver a SwiftUI Academy