En el vasto universo de la programación Swift, la interfaz de usuario es el puente entre tu lógica y el usuario final. No importa cuán complejo sea tu backend o cuán eficientes sean tus algoritmos; si la presentación visual no es clara y atractiva, la experiencia de usuario sufrirá. Para un iOS Developer que está transicionando de UIKit a SwiftUI, o para aquellos que están empezando desde cero, una de las tareas más fundamentales pero matizadas es manipular la tipografía. Hoy, vamos a profundizar en un aspecto esencial: cambiar el color del texto en SwiftUI.
A simple vista, parece trivial. ¿Qué tan difícil puede ser pintar una palabra de azul? Sin embargo, en el desarrollo profesional de aplicaciones para iOS, macOS y watchOS usando Xcode, el color no es solo estética; es semántica, accesibilidad y estado. En este tutorial exploraremos desde lo básico hasta técnicas avanzadas como gradientes, adaptabilidad al Modo Oscuro y `AttributedString`.
1. La evolución: De .foregroundColor a .foregroundStyle
Si llevas un tiempo en el mundo de SwiftUI, es probable que tu memoria muscular te lleve a escribir .foregroundColor(). Durante años, esta fue la norma estándar. Sin embargo, como buen iOS Developer, debes estar al tanto de las evoluciones del framework.
Desde iOS 15, Apple introdujo un modificador más potente y genérico: .foregroundStyle(). ¿Por qué el cambio? Porque foregroundColor limitaba el contenido a un color sólido simple. foregroundStyle, en cambio, acepta cualquier tipo que conforme al protocolo `ShapeStyle`. Esto significa que puedes pintar tu texto no solo con colores planos, sino con patrones, degradados (gradients) y materiales.
Veamos la implementación básica y moderna en Xcode:
import SwiftUI
struct EjemploBasicoView: View {
var body: some View {
VStack(spacing: 20) {
// Enfoque Clásico (Aún funciona, pero menos flexible)
Text("Hola, Swift clásico")
.foregroundColor(.blue)
.font(.title)
// Enfoque Moderno (Recomendado para iOS 15+)
Text("Hola, SwiftUI Moderno")
.foregroundStyle(.indigo)
.font(.largeTitle)
.fontWeight(.bold)
}
}
}
Nota: Aunque .foregroundColor no está estrictamente obsoleto (deprecated) al momento de escribir esto, Apple empuja fuertemente hacia .foregroundStyle por su versatilidad en la jerarquía de vistas.
2. Colores Semánticos y Adaptabilidad (Dark Mode)
Uno de los errores más comunes de un programador principiante en Swift es “hardcodear” colores (ej. .black o .white). Si defines un texto como .black, se verá perfecto en el Modo Claro, pero desaparecerá completamente en el fondo negro del Modo Oscuro.
Para desarrollar aplicaciones profesionales en iOS, debes usar Colores Semánticos. Estos son colores que describen su propósito en lugar de su valor absoluto. SwiftUI (y UIKit bajo el capó) se encarga de cambiar el valor RGB dependiendo del entorno del sistema.
Colores Primarios y Secundarios
En lugar de negro o blanco, utiliza .primary, .secondary, etc.
struct ColoresSemanticosView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Título Principal")
.font(.title)
// .primary se ve negro en Light Mode y blanco en Dark Mode
.foregroundStyle(.primary)
Text("Subtítulo descriptivo")
.font(.subheadline)
// .secondary es un gris semitransparente automático
// Aporta jerarquía visual sin esfuerzo
.foregroundStyle(.secondary)
Text("Información terciaria")
.font(.caption)
.foregroundStyle(.tertiary)
}
.padding()
}
}
El uso de .secondary y .tertiary es vital para crear profundidad en tu interfaz sin necesidad de diseñar paletas de grises personalizadas.
3. Uso de Assets: Colores Personalizados en Xcode
Rara vez una aplicación se construye solo con los colores del sistema. Tu marca tiene una identidad. Para gestionar esto correctamente en Xcode, debes usar el catálogo de activos (Assets.xcassets).
El proceso es el siguiente:
- Abre
Assets.xcassets. - Clic derecho > New Color Set.
- Nómbralo (ej. “BrandColor”).
- En el inspector de atributos, define el color para “Any Appearance” (Light Mode) y “Dark Appearance” (Dark Mode).
Una vez configurado, usarlo para cambiar el color del texto en SwiftUI es seguro y limpio:
Text("Texto corporativo")
.foregroundStyle(Color("BrandColor"))
4. Llevando el diseño al siguiente nivel: Gradientes en Texto
Aquí es donde .foregroundStyle() brilla con luz propia y justifica por qué un iOS Developer debe modernizar su código. Antes, poner un gradiente sobre texto requería máscaras complejas. Ahora, es nativo.
Podemos aplicar LinearGradient, RadialGradient o AngularGradient directamente sobre el texto.
struct TextoGradienteView: View {
var body: some View {
Text("SwiftUI es Mágico")
.font(.system(size: 50, weight: .black))
.foregroundStyle(
LinearGradient(
colors: [.blue, .purple, .pink],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
// Añadimos una sombra para mejorar el contraste
.shadow(color: .black.opacity(0.3), radius: 5, x: 0, y: 5)
}
}
Este código genera un texto visualmente impactante, ideal para cabeceras o logotipos dentro de la app, funcionando perfectamente tanto en iOS como en macOS.
5. Coloreando partes específicas del texto
Una pregunta recurrente en foros de programación Swift es: “¿Cómo pongo una palabra en negrita y roja dentro de una frase normal?”. Históricamente, esto requería NSAttributedString de UIKit, lo cual era verboso y doloroso de integrar en SwiftUI.
Hoy tenemos dos formas elegantes de hacerlo:
A. Concatenación de Vistas de Texto
SwiftUI permite sumar vistas Text como si fueran cadenas.
struct ConcatenacionView: View {
var body: some View {
// El operador + combina los textos manteniendo sus modificadores individuales
(Text("Acepto los ")
.foregroundStyle(.primary) +
Text("Términos y Condiciones")
.foregroundStyle(.blue)
.underline() +
Text(" de la aplicación."))
.foregroundStyle(.primary)
}
}
B. Markdown y AttributedString (La forma moderna)
SwiftUI ahora soporta Markdown básico de forma nativa. Pero para colores específicos dentro de una cadena, `AttributedString` es la herramienta definitiva para el desarrollador experto.
struct AttributedTextView: View {
var body: some View {
Text(crearTextoAtribuido())
}
func crearTextoAtribuido() -> AttributedString {
var string = AttributedString("Aprende Swift hoy mismo")
// Buscamos el rango de la palabra "Swift"
if let range = string.range(of: "Swift") {
// Aplicamos color naranja y estilo negrita solo a ese rango
string[range].foregroundColor = .orange
string[range].font = .body.bold()
}
return string
}
}
6. Cambios de color condicionales y reactivos
La magia de SwiftUI reside en su naturaleza declarativa basada en estados. Cambiar el color del texto en SwiftUI dinámicamente en respuesta a una acción del usuario es trivial gracias al wrapper @State.
Imaginemos un formulario de validación donde el color del texto cambia si hay un error.
struct ValidacionPasswordView: View {
@State private var password = ""
// Propiedad calculada para determinar si es válido
var esSegura: Bool {
password.count >= 8
}
var body: some View {
VStack {
SecureField("Contraseña", text: $password)
.textFieldStyle(.roundedBorder)
.padding()
Text(esSegura ? "Contraseña Segura" : "Mínimo 8 caracteres")
// Operador ternario para cambiar el color reactivamente
.foregroundStyle(esSegura ? .green : .red)
.animation(.easeInOut, value: esSegura) // Animamos el cambio de color
}
}
}
En este ejemplo, el color transiciona suavemente entre rojo y verde gracias al modificador .animation, ofreciendo una experiencia de usuario pulida.
7. Consideraciones para watchOS y Widgets
Aunque SwiftUI es un framework unificado, el contexto importa. Cuando desarrollas para watchOS, el fondo es casi siempre negro puro para ahorrar batería en pantallas OLED. Aquí, el contraste es rey. Evita usar colores oscuros como .blue estándar para textos largos; prefiere variantes más brillantes o el uso de .tint.
En los Widgets de iOS, el sistema puede tintar tu contenido automáticamente dependiendo del modo de configuración del usuario (especialmente en iOS 18+). Asegúrate de usar WidgetRenderingMode en tus vistas previas para probar cómo reaccionan tus colores de texto cuando el sistema los desatura o los colorea.
8. Creando un ViewModifier personalizado
Para mantener tu código limpio y reutilizable (DRY – Don’t Repeat Yourself), un buen iOS Developer crea sus propios modificadores. Si tu app tiene un estilo específico para los títulos de error, no repitas el código de color y fuente en cada vista.
struct ErrorTextStyle: ViewModifier {
func body(content: Content) -> some View {
content
.foregroundStyle(.red)
.font(.system(size: 14, weight: .semibold, design: .rounded))
.opacity(0.9)
}
}
// Extensión para uso fácil
extension View {
func estiloError() -> some View {
modifier(ErrorTextStyle())
}
}
// Uso
Text("Error de conexión")
.estiloError()
Conclusión
Saber cambiar el color del texto en SwiftUI es mucho más que elegir un tono de la paleta. Implica comprender la jerarquía visual mediante colores semánticos (.primary, .secondary), dominar la modernidad de .foregroundStyle para aplicar gradientes, y garantizar la accesibilidad y adaptabilidad mediante Assets en Xcode.
Como desarrollador trabajando con Swift en el ecosistema Apple, estos detalles marcan la diferencia entre una aplicación amateur y una profesional. Ya sea que estés construyendo para el iPhone, el Mac o el Apple Watch, el color es tu herramienta de comunicación más potente.
Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 
. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram
