Adaptando-se aos Modos Claro e Escuro
Use cores semânticas para ambas as aparências.
Adaptando-se aos Modos Claro e Escuro é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em 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 schemeBranch 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?
Recap
Your app now looks right in any appearance: lean on semantic colors, asset colors, and materials, and preview both modes. 🌓
Aprenda Swift com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 30
- Aulas
- 120
Perguntas Frequentes
A aula “Adaptando-se aos Modos Claro e Escuro” é grátis?
Sim — o texto completo de “Adaptando-se aos Modos Claro e Escuro” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.
O que vou aprender em “Adaptando-se aos Modos Claro e Escuro”?
Use cores semânticas para ambas as aparências. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar SwiftUI Academy?
Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Adaptando-se aos Modos Claro e Escuro”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de SwiftUI Academy?
Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- VoiceOver e Rótulos de Acessibilidade
- Tipo Dinâmico e Fontes Dimensionadas
- Localizando Strings e Catálogos de Strings
- Adaptando-se aos Modos Claro e Escuro