Modo Oscuro — qué es, tema de interfaz oscuro en aplicaciones móviles

¿Qué es el Modo Oscuro y para qué sirve?

Modo Oscuro es un esquema de color donde el fondo de la pantalla es oscuro (generalmente #121212 en Android, #1C1C1E en iOS), mientras que el texto y los elementos de la interfaz son claros. A diferencia de una simple inversión de colores, el Modo Oscuro de calidad utiliza una paleta cuidadosamente seleccionada: fondo gris oscuro en lugar de negro puro (reduce el efecto halo), saturación reducida de colores de acento y sombras suaves. El soporte del sistema para el Modo Oscuro apareció en iOS 13 (septiembre de 2019) y Android 10 (septiembre de 2019).

La razón principal de su adopción es la comodidad del usuario. Con poca luz (por la noche, en la oscuridad), una pantalla blanca brillante causa fatiga visual y puede provocar dolores de cabeza. El Modo Oscuro reduce el brillo de la pantalla sin sacrificar la legibilidad. Para usuarios con fotofobia o sensibilidad a la luz, un tema oscuro no es una opción sino la única forma de usar cómodamente una aplicación. Según Android Developers, más del 30% de los usuarios de Android mantienen el tema oscuro activado todo el tiempo.

El Modo Oscuro ahorra batería en pantallas OLED. A diferencia de LCD, donde la retroiluminación siempre está encendida, los píxeles OLED se iluminan por sí mismos. Un color oscuro significa que el píxel está apagado — el consumo de energía disminuye. Según Google (Android Developers Blog, 2019), en un Pixel con pantalla OLED, el Modo Oscuro al 100% de brillo reduce el consumo de energía en un 60% en comparación con el tema claro. En pantallas LCD, el ahorro es mínimo (alrededor del 3–5%) porque la retroiluminación de la matriz funciona independientemente del color del píxel.

Historia del Modo Oscuro en sistemas operativos móviles

El soporte del sistema para el Modo Oscuro ha pasado por varias etapas. iOS 13 (2019) introdujo un tema oscuro global mediante UIUserInterfaceStyle. Android 10 (2019) agregó Force Dark Mode para aplicaciones sin su propio tema oscuro. Android 12 (2021) con Material You comenzó a generar automáticamente una paleta oscura desde los fondos de pantalla. iOS 15 (2021) amplió la API para Safari y contenido web. Según StatCounter (2026), el 82% de las 100 principales aplicaciones en App Store y Google Play admiten el Modo Oscuro.

Modo Oscuro en iOS: Swift API y soporte UIKit

La API de Modo Oscuro en iOS se basa en el protocolo UITraitEnvironment. Cada UIViewController y UIView tiene la propiedad traitCollection.userInterfaceStyle, que puede ser .unspecified, .light o .dark. Cuando el tema del sistema cambia, iOS llama al método traitCollectionDidChange(_:). El desarrollador debe actualizar los colores en este método, o usar colores dinámicos (UIColor(dynamicProvider:)) que cambian automáticamente entre paletas claras y oscuras.

class ViewController: UIViewController {

    @IBOutlet var titleLabel: UILabel!

    override func traitCollectionDidChange(_: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        if traitCollection.hasDifferentColorAppearance(comparedTo: previousTraitCollection) {
            updateColors()
        }
    }

    func updateColors() {
        let isDark = traitCollection.userInterfaceStyle == .dark
        view.backgroundColor = isDark ? UIColor(named: "darkBackground") : .systemBackground
        titleLabel.textColor = isDark ? .white : .darkText
    }
}

// Forzar activación del Modo Oscuro
window.overrideUserInterfaceStyle = .dark

Los colores dinámicos — la mejor forma de implementar el Modo Oscuro en iOS. UIColor(named:) carga automáticamente diferentes valores del Catálogo de Activos para las apariencias .light y .dark. Simplemente defina un color en Assets.xcassets con dos variantes (Any Appearance + Dark Appearance), y UIKit seleccionará el correcto automáticamente. Los colores dinámicos del sistema (UIColor.systemBackground, .label, .secondaryLabel) ya admiten el Modo Oscuro y cambian automáticamente.

SwiftUI y Modo Oscuro

SwiftUI admite el Modo Oscuro de forma nativa. Todos los colores y modificadores estándar (Color.primary, .background, Color(UIColor.systemBackground)) se adaptan automáticamente. Para colores personalizados, use Color(uiColor:) con un UIColor dinámico o la variable de entorno @Environment(\.colorScheme) para verificar explícitamente el tema. La vista de SwiftUI se redibuja automáticamente al cambiar el tema, sin necesidad de llamar a traitCollectionDidChange.

struct ThemeView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        Text("Modo Oscuro")
            .foregroundColor(colorScheme == .dark ? .white : .black)
            .background(colorScheme == .dark ? Color(.systemGray6) : .white)
    }
}

Modo Oscuro en Android: Kotlin API y AppCompat

El Modo Oscuro en Android se implementa mediante la librería AppCompat y el tema Theme.AppCompat.DayNight. Durante el día se usa un tema claro, por la noche — uno oscuro. La activación forzada se establece mediante AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (oscuro), MODE_NIGHT_NO (claro), MODE_NIGHT_FOLLOW_SYSTEM (sistema). Los recursos se separan en claros (res/values/styles.xml) y oscuros (res/values-night/styles.xml).

// Forzar activación del tema oscuro
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Establecer antes de super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    // Determinar tema actual
    private val isDarkMode: Boolean
        get() = (resources.configuration.uiMode and
            Configuration.UI_MODE_NIGHT_MASK) ==
            Configuration.UI_MODE_NIGHT_YES
}

// Registrar modo nocturno en AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode es una función del sistema en Android 10+ que invierte automáticamente los colores de aplicaciones sin soporte de tema oscuro. Se activa a través de Opciones de desarrollador o mediante el atributo android:forceDarkAllowed="true" en el tema. Esta es una solución temporal: para producción, debe implementar su propia paleta oscura mediante values-night, de lo contrario la calidad visual será baja (iconos invertidos, colores difíciles de leer).

Material You Dynamic Themes

Material You (Android 12+) genera automáticamente 5 colores clave desde el fondo de pantalla del dispositivo: primary, secondary, tertiary, neutral, neutralVariant. Para cada color, se crean paletas clara y oscura. El desarrollador usa atributos: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. El propio sistema selecciona la variante para el tema actual. Dynamic Color es compatible con Android 12+ y Material Design 3 (componente com.google.android.material:material).

// values/themes.xml — tema claro
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_light</item>
    <item name="colorOnPrimary">@color/on_primary_light</item>
</style>

// values-night/themes.xml — tema oscuro
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Diseño de tema oscuro: reglas de contraste y color

El diseño del Modo Oscuro no es simplemente inversión de colores. Google Material Design recomienda usar gris oscuro (#121212) en lugar de negro puro. El negro puro (#000000) crea un contraste demasiado alto con el texto blanco, causando efecto halo (resplandor alrededor de las letras). El nivel de elevación de los elementos se expresa mediante el color: cuanto más alto es el elemento, más claro es su fondo. Una tarjeta sobre el fondo — #1E1E1E, diálogo — #2D2D2D, panel de navegación — #383838.

El contraste de color en el Modo Oscuro debe ser menor que en el Modo Claro. Material Design recomienda: texto primario — blanco (#FFFFFF) con opacidad del 87%, secundario — 60%, deshabilitado — 38%. Los colores de acento deben ser menos saturados: si en el tema claro primary = #6200EE, entonces en el oscuro — #BB86FC (púrpura claro y apagado). Según WCAG 2.1, se debe mantener un contraste mínimo de 4.5:1 para texto normal en ambos temas.

Imágenes e iconos requieren un tratamiento separado en el tema oscuro. Los iconos con transparencia deben recolorearse en colores claros. Las fotografías con fondos brillantes pueden deslumbrar — se recomienda reducir el brillo entre un 20 y 30% o agregar una superposición semitransparente. Para logotipos y elementos de marca, use la versión para fondo oscuro. El Catálogo de Activos de iOS y VectorDrawable de Android admiten recursos separados para temas claro y oscuro.

Modo Oscuro vs Modo Claro: ventajas y desventajas

La elección entre temas depende de las condiciones de uso, el tipo de contenido y las preferencias del usuario. Un estudio del Nielsen Norman Group (2020) mostró: con iluminación normal, el Modo Claro proporciona una velocidad de lectura entre un 15 y 20% mayor. Sin embargo, en condiciones de poca luz, el Modo Oscuro reduce la fatiga visual y mejora la legibilidad. Para interfaces con grandes cantidades de texto (artículos, documentos), el Modo Claro suele ser preferible.

El consumo de energía es un argumento clave para el Modo Oscuro en OLED. Según Google (2019), YouTube en tema oscuro en una pantalla OLED consume un 43% menos de energía que en tema claro. Google Maps — un 32%. Cuanto más brillante es la interfaz y mayor es el nivel de brillo de la pantalla, mayores son los ahorros. En pantallas LCD, los ahorros no superan el 5%. Para usuarios que trabajan mucho con la aplicación al aire libre bajo luz solar intensa, el Modo Claro sigue siendo la única opción legible.

Recomendaciones de IT Sectr — implementamos ambos temas con opciones de cambio: sistema (seguir sistema), oscuro, claro. El cambio automático no debe ser la única opción — un usuario puede querer el tema oscuro durante el día (por migrañas) o el tema claro por la noche (para leer). En nuestros proyectos, agregamos un selector de tema en la configuración del perfil y recordamos la elección. Para aplicaciones con contenido premium (fotos, video), se recomienda una vista previa del tema antes de aplicarlo.