Theme Toggle

A manual light/dark control for application sidebars. The next theme reveals smoothly from the exact interaction point, the user’s choice persists locally, and reduced-motion or unsupported browsers fall back to an immediate switch.

Installation

Add the reusable theme toggle and its semantic theme dependencies using the CLI or manually:

Dark mode ready — this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add theme-toggle

Project setup

Light is the default. Apply the saved boardui:theme value before hydration to prevent a first-paint flash, and add suppressHydrationWarning because the root class is set in the browser before React hydrates.

// 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>  );}

The toggle is manual-only: it does not read the operating-system theme. Its reduced-motion and unsupported-browser fallbacks switch immediately without the circular reveal.

Collapsed sidebar

Set collapsed for a 36px icon-only control that fits a compact sidebar rail while keeping the same accessible pressed state.

<ThemeToggle collapsed />