Theme Provider

ThemeProvider centraliza a integração do design system com next-themes. Por padrão, aplica light ou dark como classe no elemento <html>, respeita a preferência do sistema e desabilita transições durante a troca.

Instalação

bun add @adila-sh/ui

Provider

import { ThemeProvider } from "@adila-sh/ui";

export function App({ children }: { children: React.ReactNode }) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

Importe também os dois estilos na entrada da aplicação. O primeiro contém os componentes compilados; o segundo expõe os tokens e utilitários para o Tailwind do projeto consumidor:

import "@adila-sh/ui/style.css";
import "./styles.css";

@import "tailwindcss";
@import "@adila-sh/ui/theme.css";

Hook

import { Button, useTheme } from "@adila-sh/ui";

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <Button
      variant="outline"
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
    >
      Alternar tema
    </Button>
  );
}

Todas as propriedades do next-themes continuam disponíveis no provider para temas customizados, outra chave de persistência ou outro atributo no documento.

Controle pronto

Para o caso padrão claro/escuro/sistema, use o controle publicado pelo pacote:

import { ThemeToggle } from "@adila-sh/ui";

<ThemeToggle />;

Os rótulos e o nome acessível podem ser personalizados:

<ThemeToggle
  triggerLabel="Escolher aparência"
  labels={{ light: "Dia", dark: "Noite", system: "Automático" }}
/>;

CodeThemeProvider é independente: ele seleciona a paleta de blocos de código, terminais e diffs, não o tema visual da aplicação.