Capítulo 78 de 108

Dark Mode

Core Idea

Índice de guias framework-específicos para adicionar dark mode a um projeto shadcn/ui: Next.js, Vite, Astro, Remix, TanStack Start. Cada framework tem sua própria estratégia de persistência de tema (cookies, localStorage, classe CSS).

Key Concepts

  • Todos os guias convergem no mesmo padrão visual: toggle de tema com ícones Sun/Moon de lucide-react animados via classes dark: do Tailwind, dentro de um DropdownMenu com opções Light/Dark/System.
  • A diferença entre frameworks está em onde e como o tema é persistido e aplicado à classe dark do <html>: lib (next-themes, remix-themes), contexto React customizado (Vite), ou script inline (Astro).

Key Takeaways

  1. shadcn/ui usa a abordagem de classe CSS (dark class no <html>), não prefers-color-scheme puro, para permitir toggle manual persistente.
  2. Escolha o guia específico do framework (ch079-Next.js, ch080-Vite, ch081-Astro, ch082-Remix) em vez de tentar generalizar a solução.
  3. O componente ModeToggle (ícones sol/lua com dropdown) é reutilizado quase idêntico entre frameworks, só troca a fonte do theme/setTheme.

Connects To

  • dark-mode/next, dark-mode/vite, dark-mode/astro, dark-mode/remix: implementações específicas.
  • Dropdown Menu, Button: usados para montar o ModeToggle.
AnteriorDirectionPróximoDark Mode (Next.js)