YepAPI/skills

Modo Escuro

Regras

• Use next-themes para aplicações Next.js — envolva o aplicativo em <ThemeProvider attribute="class" defaultTheme="system">
• Variáveis CSS para cores — defina em :root (claro) e .dark (escuro), referencie como var(--background)
• Detecção de preferência do sistema: defaultTheme="system" respeita a media query prefers-color-scheme
• Componente de alternância de tema: ciclo entre claro/escuro/sistema — use o hook useTheme() do next-themes
• Integração com Tailwind: ative darkMode: "class" na configuração do Tailwind, use o prefixo dark: para sobrescrever estilos
• Correção de hidratação: evite incompatibilidade de hidratação montando o alternador de tema somente após useEffect ou usando suppressHydrationWarning
• Persistência: next-themes armazena a preferência em localStorage e a aplica como uma classe no elemento <html>
• Transição: adicione transition-colors duration-200 ao body para uma troca suave de tema

Padrões

// Layout wrapper
import { ThemeProvider } from "next-themes";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

// Alternador de tema
"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  if (!mounted) return null;

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      {theme === "dark" ? "☀️" : "🌙"}
    </button>
  );
}

/* Variáveis CSS */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

Evitar

• Codificar cores fixas em vez de variáveis CSS — impossibilita a alternância de tema
• Esquecer suppressHydrationWarning no <html> — causa erros de hidratação
• Flash do tema errado: certifique-se de que o script do next-themes seja executado antes da renderização (por padrão já é)
• Suportar apenas claro/escuro sem a opção sistema — respeite a preferência do SO do usuário