Design em Modo Escuro

"Não apenas cores invertidas. Uma hierarquia cuidadosamente construída de luz sobre o escuro."

Quando Usar

Use este subestilo quando a solicitação do usuário corresponder à estética descrita acima. Esta é uma referência filha da habilidade design-it e não deve ser acionada diretamente.

Princípios Fundamentais

1. Nunca Preto Puro: O #000000 verdadeiro causa borrões em telas OLED e fadiga ocular extrema com texto branco. Use cinzas escuros (por exemplo, #121212 ou #0A0A0A).
2. Elevação por Clareza: No modo claro, as sombras mostram elevação. No modo escuro, as sombras são invisíveis, então superfícies elevadas devem ser mais claras que o fundo.
3. Acentos Dessaturados: Cores saturadas vibram dolorosamente contra fundos escuros. Diminua a saturação das cores da marca.

DNA Visual

• Cores: Luxo da Meia-Noite ou Ardósia Minimalista (invertido). Fundo #121212. Cartões elevados #1E1E1E, #252525. Texto principal #E1E1E1 (não #FFFFFF).
• Tipografia: Fontes sans-serif padrão altamente legíveis, mas frequentemente com um peso de fonte menor em comparação com o modo claro, pois texto claro sobre fundos escuros parece opticamente mais espesso.
• Sombras: Sombras pretas puras, mas com opacidade muito menor, principalmente para separar tons de cinza ligeiramente diferentes.

Implementação Web

• Exemplo de CSS:

:root {
  --bg-base: #121212;
  --bg-elevated-1: #1E1E1E;
  --bg-elevated-2: #242424;
  --text-high-emphasis: rgba(255, 255, 255, 0.87);
  --text-medium-emphasis: rgba(255, 255, 255, 0.60);
  
  /* Accent color: Desaturated purple instead of bright purple */
  --accent-color: #BB86FC; 
}

body {
  background-color: var(--bg-base);
  color: var(--text-high-emphasis);
  font-weight: 300; /* Thinner weight for dark mode */
}

.dark-card {
  background-color: var(--bg-elevated-1);
  border-radius: 8px;
  padding: 24px;
  
  /* Very subtle border can help separate dark surfaces */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.dark-card:hover {
  /* On hover, the element moves closer to the user, so it gets lighter */
  background-color: var(--bg-elevated-2);
}

.dark-btn {
  background-color: var(--accent-color);
  color: #000; /* Dark text on light accent is highly readable */
  font-weight: 600;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
}

Implementação de App

SwiftUI

struct DarkModeView: View {
    // Force Dark Mode on this specific view (or use system settings)
    @Environment(\.colorScheme) var colorScheme
    
    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                // Primary elevated card
                VStack(alignment: .leading, spacing: 12) {
                    Text("Elevation via Lightness")
                        .font(.headline)
                        .foregroundColor(.primary) // Auto-adapts
                    Text("In dark mode, elevated surfaces are lighter grey, not shadowed.")
                        .font(.subheadline)
                        .foregroundColor(.secondary) // Auto-adapts
                }
                .padding()
                .frame(maxWidth: .infinity, alignment: .leading)
                // Use native semantic colors. .secondarySystemBackground is lighter than .systemBackground
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(12)
                
                // Desaturated Accent Button
                Button(action: {}) {
                    Text("Desaturated Accent")
                        .fontWeight(.semibold)
                        .foregroundColor(.black) // Dark text on light accent
                        .padding()
                        .frame(maxWidth: .infinity)
                        .background(Color(red: 0.73, green: 0.52, blue: 0.98)) // #BB86FC (Desaturated purple)
                        .cornerRadius(8)
                }
            }
            .padding()
        }
        // #121212 is the standard dark mode background, which systemBackground maps to closely
        .background(Color(UIColor.systemBackground))
    }
}
// .preferredColorScheme(.dark) to force

• Confie em Semânticas: Color.primary, Color.secondary, Color(UIColor.systemBackground) e Color(UIColor.secondarySystemBackground) do SwiftUI lidam com transições perfeitas para o modo escuro automaticamente.
• Evite forçar códigos hexadecimais explícitos para fundos, a menos que você esteja construindo um aplicativo com tema personalizado.

Flutter

import 'package:flutter/material.dart';


…