Modalità scura — cos'è, tema dell'interfaccia scura nelle applicazioni mobili

Cos'è la Modalità scura e a cosa serve?

Modalità scura è una combinazione di colori in cui lo sfondo dello schermo è scuro (di solito #121212 in Android, #1C1C1E in iOS), mentre il testo e gli elementi dell'interfaccia sono chiari. A differenza di una semplice inversione di colori, una Modalità scura di qualità utilizza una palette attentamente selezionata: sfondo grigio scuro invece di nero puro (riduce l'effetto alone), saturazione ridotta dei colori di accento e ombre morbide. Il supporto di sistema per la Modalità scura è apparso in iOS 13 (settembre 2019) e Android 10 (settembre 2019).

Il motivo principale dell'adozione è il comfort dell'utente. In condizioni di scarsa illuminazione (sera, al buio), uno schermo bianco brillante causa affaticamento degli occhi e può provocare mal di testa. La Modalità scura riduce la luminosità dello schermo senza sacrificare la leggibilità. Per gli utenti con fotofobia o sensibilità alla luce, il tema scuro non è un'opzione ma l'unico modo per utilizzare comodamente un'applicazione. Secondo Android Developers, oltre il 30% degli utenti Android tiene il tema scuro sempre attivo.

La Modalità scura risparmia batteria sui schermi OLED. A differenza dell'LCD, dove la retroilluminazione è sempre accesa, i pixel OLED si illuminano da soli. Un colore scuro significa che il pixel è spento — il consumo energetico diminuisce. Secondo Google (Android Developers Blog, 2019), su un Pixel con display OLED, la Modalità scura al 100% di luminosità riduce il consumo energetico del 60% rispetto al tema chiaro. Sui schermi LCD, il risparmio è minimo (circa 3–5%) perché la retroilluminazione della matrice funziona indipendentemente dal colore del pixel.

Storia della Modalità scura nei sistemi operativi mobili

Il supporto di sistema per la Modalità scura ha attraversato diverse fasi. iOS 13 (2019) ha introdotto un tema scuro globale tramite UIUserInterfaceStyle. Android 10 (2019) ha aggiunto Force Dark Mode per le applicazioni senza un proprio tema scuro. Android 12 (2021) con Material You ha iniziato a generare automaticamente una palette scura dagli sfondi. iOS 15 (2021) ha esteso l'API per Safari e i contenuti web. Secondo StatCounter (2026), l'82% delle prime 100 applicazioni nell'App Store e Google Play supportano la Modalità scura.

Modalità scura in iOS: API Swift e supporto UIKit

L'API Modalità scura iOS si basa sul protocollo UITraitEnvironment. Ogni UIViewController e UIView ha la proprietà traitCollection.userInterfaceStyle, che può essere .unspecified, .light o .dark. Quando il tema di sistema cambia, iOS chiama il metodo traitCollectionDidChange(_:). Lo sviluppatore deve aggiornare i colori in questo metodo, oppure utilizzare colori dinamici (UIColor(dynamicProvider:)) che passano automaticamente tra palette chiara e scura.

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
    }
}

// Forza attivazione Modalità scura
window.overrideUserInterfaceStyle = .dark

Colori dinamici — il modo migliore per implementare la Modalità scura in iOS. UIColor(named:) carica automaticamente valori diversi dal Catalogo Asset per le apparenze .light e .dark. Basta definire un colore in Assets.xcassets con due varianti (Any Appearance + Dark Appearance) e UIKit selezionerà automaticamente quello giusto. I colori dinamici di sistema (UIColor.systemBackground, .label, .secondaryLabel) già supportano la Modalità scura e cambiano automaticamente.

SwiftUI e Modalità scura

SwiftUI supporta la Modalità scura nativamente. Tutti i colori e modificatori standard (Color.primary, .background, Color(UIColor.systemBackground)) si adattano automaticamente. Per colori personalizzati, usa Color(uiColor:) con un UIColor dinamico o la variabile d'ambiente @Environment(\.colorScheme) per il controllo esplicito del tema. La View SwiftUI si ridisegna automaticamente al cambio del tema, senza bisogno di chiamare traitCollectionDidChange.

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

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

Modalità scura in Android: API Kotlin e AppCompat

La Modalità scura Android è implementata tramite la libreria AppCompat e il tema Theme.AppCompat.DayNight. Di giorno si usa il tema chiaro, di notte — quello scuro. L'attivazione forzata viene impostata tramite AppCompatDelegate.setDefaultNightMode(): MODE_NIGHT_YES (scuro), MODE_NIGHT_NO (chiaro), MODE_NIGHT_FOLLOW_SYSTEM (sistema). Le risorse sono divise in chiare (res/values/styles.xml) e scure (res/values-night/styles.xml).

// Forza attivazione tema scuro
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        // Imposta prima di super.onCreate
        AppCompatDelegate.setDefaultNightMode(
            AppCompatDelegate.MODE_NIGHT_YES
        )
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

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

// Registra modalità notturna in AndroidManifest.xml
// android:configChanges="uiMode"

Force Dark Mode è una funzionalità di sistema in Android 10+ che inverte automaticamente i colori delle applicazioni senza supporto del tema scuro. Si attiva tramite le Opzioni sviluppatore o tramite l'attributo android:forceDarkAllowed="true" nel tema. Questa è una soluzione temporanea: per la produzione, è necessario implementare una propria palette scura tramite values-night, altrimenti la qualità visiva sarà scarsa (icone invertite, colori difficili da leggere).

Material You Dynamic Themes

Material You (Android 12+) genera automaticamente 5 colori chiave dallo sfondo del dispositivo: primary, secondary, tertiary, neutral, neutralVariant. Per ogni colore vengono create palette chiara e scura. Lo sviluppatore usa attributi: ?attr/colorPrimary, ?attr/colorOnPrimary, ?attr/colorSurface. Il sistema stesso seleziona la variante per il tema corrente. Dynamic Color è supportato su Android 12+ con Material Design 3 (componente com.google.android.material:material).

// values/themes.xml — tema chiaro
<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 scuro
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
    <item name="colorPrimary">@color/primary_dark</item>
    <item name="colorOnPrimary">@color/on_primary_dark</item>
</style>

Progettazione del tema scuro: regole di contrasto e colore

Il design della Modalità scura non è una semplice inversione di colori. Google Material Design raccomanda di usare grigio scuro (#121212) invece di nero puro. Il nero puro (#000000) crea un contrasto troppo elevato con il testo bianco, causando l'effetto alone (bagliore intorno alle lettere). Il livello di elevazione degli elementi è espresso dal colore: più alto è l'elemento, più chiaro è il suo sfondo. Una carta sopra lo sfondo — #1E1E1E, finestra di dialogo — #2D2D2D, pannello di navigazione — #383838.

Il contrasto cromatico nella Modalità scura dovrebbe essere inferiore rispetto alla Modalità chiara. Material Design raccomanda: testo primario — bianco (#FFFFFF) con opacità 87%, secondario — 60%, disabilitato — 38%. I colori di accento dovrebbero essere meno saturi: se nel tema chiaro primary = #6200EE, allora nello scuro — #BB86FC (viola chiaro e tenue). Secondo WCAG 2.1, un contrasto minimo di 4.5:1 per il testo normale deve essere mantenuto in entrambi i temi.

Immagini e icone richiedono un trattamento separato nel tema scuro. Le icone con trasparenza devono essere ricolorate in colori chiari. Le foto con sfondi luminosi possono abbagliare — si consiglia di ridurre la luminosità del 20–30% o aggiungere una sovrapposizione semitrasparente. Per loghi ed elementi del marchio, usa la versione per lo sfondo scuro. Il Catalogo Asset di iOS e VectorDrawable di Android supportano risorse separate per temi chiaro e scuro.

Modalità scura vs Modalità chiara: pro e contro

La scelta tra i temi dipende dalle condizioni d'uso, dal tipo di contenuto e dalle preferenze dell'utente. Uno studio del Nielsen Norman Group (2020) ha mostrato: in condizioni di illuminazione normale, la Modalità chiara offre una velocità di lettura superiore del 15–20%. Tuttavia, in condizioni di scarsa illuminazione, la Modalità scura riduce l'affaticamento degli occhi e migliora la leggibilità. Per interfacce con grandi quantità di testo (articoli, documenti), la Modalità chiara è solitamente preferibile.

Il consumo energetico è un argomento chiave per la Modalità scura su OLED. Secondo Google (2019), YouTube in tema scuro su uno schermo OLED consuma il 43% in meno di energia rispetto al tema chiaro. Google Maps — 32%. Più luminosa è l'interfaccia e più alto è il livello di luminosità dello schermo, maggiore è il risparmio. Sui schermi LCD, il risparmio non supera il 5%. Per gli utenti che lavorano molto con l'app all'aperto sotto il sole forte, la Modalità chiara rimane l'unica opzione leggibile.

Raccomandazioni di IT Sectr — implementiamo entrambi i temi con opzioni di commutazione: sistema (segui sistema), scuro, chiaro. La commutazione automatica non dovrebbe essere l'unica opzione — un utente potrebbe volere il tema scuro durante il giorno (per l'emicrania) o il tema chiaro di notte (per la lettura). Nei nostri progetti, aggiungiamo un selettore di tema nelle impostazioni del profilo e ricordiamo la scelta. Per applicazioni con contenuti premium (foto, video), si consiglia un'anteprima del tema prima dell'applicazione.