Temas e modo escuro

Todo componente lê variáveis --aura-*. O tema é escolhido por data-theme e o modo escuro pela classe .dark, ambos no <html>:

<html data-theme="ocean" class="dark">

• Temas claros (25) definem cores de marca e seguem o modo claro/escuro.
• Temas escuros (8: Midnight, Cyber, Synthwave, Matrix, Volcano, Grape, Obsidian, Terminal) têm superfície própria e continuam escuros mesmo sem .dark.

Veja todos lado a lado na galeria de temas — clicar em um aplica no site inteiro.

O ThemeProvider de aura-ui-core/client guarda a escolha no localStorage, respeita o tema do sistema e expõe o hook:

"use client";
import { useTheme } from "aura-ui-core/client";

export function ThemeButtons() {
  const { colorScheme, resolvedTheme, setColorScheme, setTheme, toggleMode } = useTheme();

  return (
    <div className="flex gap-2">
      <button onClick={() => setColorScheme("ocean")}>Ocean</button>
      <button onClick={() => setTheme("dark")}>Escuro</button>
      <button onClick={toggleMode}>Alternar ({resolvedTheme})</button>
      <span>Tema atual: {colorScheme}</span>
    </div>
  );
}

• setColorScheme(nome) troca o tema de cores; setTheme("light" | "dark" | "system") troca o modo.
• resolvedTheme é o modo efetivo (light ou dark), já considerando o sistema.
• Pronto para usar: o componente ThemeSwitcher.

Um tema novo é um bloco CSS. Sobrescreva só o que muda — o resto vem dos tokens base. As cores usam HSL "cru" para permitir opacidade (bg-aura-primary/10).

/* globals.css — depois dos imports do Aura */
[data-theme="minha-marca"] {
  --aura-primary: 262 83% 58%;          /* HSL sem hsl(): "matiz saturação luminosidade" */
  --aura-primary-foreground: 0 0% 100%;
  --aura-accent: 330 81% 60%;
  --aura-ring: 262 83% 58%;
  --aura-radius: 0.875rem;
  --aura-gradient-primary: linear-gradient(135deg, #7c3aed, #db2777);
}

/* ajustes só para o modo escuro */
.dark[data-theme="minha-marca"] {
  --aura-primary: 263 90% 70%;
}

Depois é só <html data-theme="minha-marca">. O CLI gera esse bloco interativamente com aura-ui-cli theme. Todos os tokens estão em Tokens e utilitários.