Módulo 1.8 - Dark Mode e Temas

🌙 Por Que Dark Mode em Dashboards

Dark mode não é apenas uma tendência estética - é uma necessidade funcional para dashboards. Usuários frequentemente passam horas analisando dados, e o modo escuro reduz fadiga visual significativamente.

✨ Benefícios do Dark Mode

👁️ Reduz Fadiga Visual

Menos luz emitida = menos esforço para os olhos em uso prolongado

🔋 Economia de Bateria

Em telas OLED, pixels pretos = pixels desligados

🌃 Uso Noturno

Reduz interrupção do ciclo circadiano

🎯 Foco no Conteúdo

Dados e gráficos se destacam mais no fundo escuro

😎 Estética Moderna

Aparência profissional e sofisticada

♿ Acessibilidade

Beneficia usuários com sensibilidade à luz

📊 Dados de Pesquisa

82%

dos desenvolvedores preferem dark mode

64%

dos usuários Android usam dark mode

30%

menos energia em telas OLED

🌙 Dark Mode é Melhor Para:

• Dashboards de monitoramento 24/7
• Ambientes com pouca luz
• Sessões longas de análise de dados
• Command centers e NOCs
• Aplicativos de trading

☀️ Light Mode é Melhor Para:

• Ambientes muito iluminados
• Leitura de textos longos
• Documentação e relatórios
• Impressão de conteúdo
• Preferência pessoal do usuário

⚙️ Configurando Dark Mode no Tailwind

O Tailwind CSS oferece suporte nativo a dark mode com duas estratégias: baseada em classe (class) ou na preferência do sistema (media). Para dashboards, a estratégia baseada em classe oferece mais controle.

🔄 Estratégias de Dark Mode

✓ Class Strategy (Recomendado)

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

• Controle total via JavaScript
• Toggle manual do usuário
• Pode respeitar preferência do sistema
• Persistência em localStorage

Media Strategy

// tailwind.config.js
module.exports = {
  darkMode: 'media',
}

• Automático via prefers-color-scheme
• Zero JavaScript necessário
• Usuário não pode escolher
• Mais simples, menos flexível

🎨 Usando Classes dark:

<!-- O modificador dark: aplica estilos quando .dark está no html -->

<div class="
  bg-white              {/* Light mode: fundo branco */}
  dark:bg-dark-800      {/* Dark mode: fundo escuro */}

  text-slate-800        {/* Light mode: texto escuro */}
  dark:text-neutral-100 {/* Dark mode: texto claro */}

  border-slate-200      {/* Light mode: borda clara */}
  dark:border-dark-600  {/* Dark mode: borda escura */}
">
  Card com suporte a ambos os modos
</div>

<!-- Ativando dark mode -->
<html class="dark">  <!-- Adicione esta classe -->

🎨 Paleta Recomendada para Dashboard

Uso	Light Mode	Dark Mode
Background Principal	slate-50	dark-900
Cards/Containers	white	dark-800
Texto Principal	slate-800	neutral-100
Texto Secundário	slate-500	neutral-400
Bordas	slate-200	dark-600

💾 Persistência e Preferências do Sistema

Uma implementação profissional de dark mode deve respeitar a preferência do sistema por padrão, mas permitir que o usuário escolha e persistir essa escolha entre sessões.

🔄 Fluxo de Decisão do Tema

💾

1. localStorage

Usuário já escolheu?

→

🖥️

2. Sistema

prefers-color-scheme

→

🌙

3. Fallback

Dark mode (padrão)

💻 Implementação Completa

// Script que deve rodar ANTES do conteúdo (no <head>)
<script>
  // Evita flash de tema errado (FOUC)
  (function() {
    const stored = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    // Prioridade: localStorage > sistema > dark (padrão)
    if (stored === 'light') {
      document.documentElement.classList.remove('dark');
    } else if (stored === 'dark') {
      document.documentElement.classList.add('dark');
    } else if (prefersDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  })();
</script>

// Função de toggle (pode ser chamada pelo botão)
function toggleTheme() {
  const html = document.documentElement;
  const isDark = html.classList.toggle('dark');

  // Persiste a escolha
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// Botão de toggle
<button onclick="toggleTheme()" class="...">
  <span class="dark:hidden">🌙</span>
  <span class="hidden dark:inline">☀️</span>
</button>

⚛️ Hook React para Dark Mode

// hooks/useTheme.ts
import { useState, useEffect } from 'react';

export function useTheme() {
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');

  useEffect(() => {
    // Carrega preferência salva ou do sistema
    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null;
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    const initialTheme = stored || (prefersDark ? 'dark' : 'light');
    setTheme(initialTheme);
    document.documentElement.classList.toggle('dark', initialTheme === 'dark');
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
    document.documentElement.classList.toggle('dark', newTheme === 'dark');
  };

  return { theme, toggleTheme };
}

🎨 Componentes para Ambos os Modos

Ao criar componentes, é essencial pensar em ambos os modos desde o início. Algumas cores funcionam bem em dark mode mas têm problemas de contraste em light mode, e vice-versa.

📦 Card com Suporte Dual

Dark Mode

Vendas Mensais

R$ 45.230

+12% vs mês anterior

Light Mode

Vendas Mensais

R$ 45.230

+12% vs mês anterior

<!-- Card KPI com classes para ambos os modos -->
<div class="
  bg-white dark:bg-dark-800
  border border-slate-200 dark:border-dark-600
  shadow-sm dark:shadow-none
  rounded-xl p-4
">
  <h4 class="font-semibold text-slate-800 dark:text-neutral-100">
    Vendas Mensais
  </h4>
  <p class="text-2xl font-bold text-emerald-600 dark:text-emerald-400 mt-2">
    R$ 45.230
  </p>
  <p class="text-sm text-slate-500 dark:text-neutral-400 mt-1">
    +12% vs mês anterior
  </p>
</div>

🎯 Ajustes de Intensidade por Modo

Cores de marca/accent frequentemente precisam de ajustes entre modos:

Tipo	Light Mode	Dark Mode	Por quê
Primary	blue-600	blue-400	Mais vibrante no escuro
Success	emerald-600	emerald-400	Contraste adequado
Error	red-600	red-400	Legibilidade
Background accent	blue-100	blue-500/20	Opacidade funciona melhor

🖌️ Criando Temas Personalizados

Além de dark/light mode, dashboards corporativos frequentemente precisam de temas customizados que reflitam a identidade visual da empresa - cores de marca, fontes específicas, etc.

🎨 Sistema de Temas com CSS Variables

/* styles/themes.css */

/* Tema Base (Dark - Padrão) */
:root {
  --color-primary: #3b82f6;
  --color-primary-light: #60a5fa;
  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-text: #f5f5f5;
  --color-text-secondary: #a3a3a3;
  --color-border: #4b5563;
}

/* Tema Light */
:root.light {
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-bg: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #1e293b;
  --color-text-secondary: #64748b;
  --color-border: #e2e8f0;
}

/* Tema Corporativo (Exemplo: Empresa Verde) */
:root.theme-corporate {
  --color-primary: #059669;
  --color-primary-light: #10b981;
  /* ...outras variáveis mantêm valores do dark/light */
}

⚙️ Integração com Tailwind

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Cores que usam CSS variables
        theme: {
          primary: 'var(--color-primary)',
          'primary-light': 'var(--color-primary-light)',
          bg: 'var(--color-bg)',
          surface: 'var(--color-surface)',
          text: 'var(--color-text)',
          'text-secondary': 'var(--color-text-secondary)',
          border: 'var(--color-border)',
        }
      }
    }
  }
}

// Uso em componentes
<div class="bg-theme-surface text-theme-text border-theme-border">

🎛️ UI de Seleção de Tema

Exemplo de seletor:

Cores de marca:

Selecione a cor primária:

⚡ Transições e Animações de Tema

Uma troca de tema abrupta pode ser visualmente desconfortável. Transições suaves criam uma experiência mais polida e profissional para o usuário.

🎬 Transição Global de Cores

/* CSS Global - Transição suave para TODAS as cores */

*,
*::before,
*::after {
  transition:
    background-color 200ms ease-in-out,
    border-color 200ms ease-in-out,
    color 200ms ease-in-out,
    fill 200ms ease-in-out,
    stroke 200ms ease-in-out;
}

/* Ou, mais performático, apenas em elementos específicos */
.theme-transition {
  transition:
    background-color 200ms,
    border-color 200ms,
    color 200ms;
}

🚀 Técnicas Avançadas

View Transitions API

// Transição nativa do navegador
async function toggleTheme() {
  if (!document.startViewTransition) {
    // Fallback para navegadores antigos
    updateTheme();
    return;
  }

  await document.startViewTransition(() => {
    updateTheme();
  });
}

Suporte: Chrome 111+, Edge 111+

Animação Circular

/* CSS para efeito circular */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: reveal 0.3s;
  clip-path: circle(0%);
}

@keyframes reveal {
  to { clip-path: circle(100%); }
}

💡 Dica de Performance

Evite transições em muitos elementos simultaneamente. Prefira:

• Transições apenas em elementos visíveis
• Duração curta (150-300ms)
• Usar transform e opacity quando possível (GPU accelerated)
• Desativar transições para usuários com prefers-reduced-motion

♿ Respeitando prefers-reduced-motion

/* Desativa transições para quem prefere movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ou com Tailwind */
<div class="transition-colors duration-200 motion-reduce:transition-none">

📝 Resumo do Módulo

O que aprendemos:

✓ Benefícios do dark mode para dashboards
✓ Configuração de dark mode no Tailwind
✓ Persistência e preferências do sistema
✓ Componentes para ambos os modos
✓ Criação de temas personalizados
✓ Transições e animações de tema

Conclusão da Trilha 1:

Parabéns! Você completou a Trilha 1 - Fundamentos. Agora você tem a base sólida para criar dashboards profissionais. Na Trilha 2 - Técnicas, você aprenderá a construir componentes de dados, gráficos e visualizações avançadas.

Iniciar Trilha 2: Técnicas →

← Módulo Anterior Iniciar Trilha 2 →