Seletor de tema

Um controle manual de luz/escuro para barras laterais da aplicativo. O tema seguinte revela suavemente a partir do ponto de interação exato, a escolha do usuário persiste localmente, e os navegadores de movimento reduzido ou não suportados voltam para um interruptor imediato.

Instalação

Adicione o tema reutilizável e suas dependências semânticas usando o CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add theme-toggle

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Configuração do projeto

A luz é o padrão. Aplicar o salvo boardui:theme valor antes da hidratação para evitar um flash de primeira pintura, e adicionar suppressHydrationWarning porque a classe raiz é definida no navegador antes de React hidratos.

// app/layout.tsximport Script from "next/script";import "@/styles/globals.css";
const themeScript =  '(function(){try{var dark=localStorage.getItem("boardui:theme")==="dark";document.documentElement.classList.toggle("dark",dark)}catch(e){document.documentElement.classList.remove("dark")}})();';
export default function RootLayout({ children }: { children: React.ReactNode }) {  return (    <html lang="en" suppressHydrationWarning>      <body>        <Script id="boardui-theme" strategy="beforeInteractive">          {themeScript}        </Script>        {children}      </body>    </html>  );}

A opção é apenas manual: não lê o tema do sistema operativo. O seu movimento reduzido e o interruptor de navegação não suportado mudam imediatamente sem a revelação circular.

Barra lateral colapsada

Definir collapsed para um controle somente de ícones de 36px que se encaixa em um trilho sidebar compacto, mantendo o mesmo estado pressionado acessível.

<ThemeToggle collapsed />