elorm/ui

Dark Mode

Add light, dark, and system theme switching to your elorm/ui project.

Overview#

elorm/ui uses class-based dark mode via CSS variables. Add next-themes for runtime theme switching — it works with both Next.js and Vite.

Theme preview
Toggle light, dark, or system to see elorm tokens update.

Framework setup#

Install the components, then wrap your root layout:

import { ThemeProvider } from "@/components/theme-provider"

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

Place <ModeToggle /> in your header or settings panel. Add suppressHydrationWarning to <html> to avoid hydration mismatches from next-themes.

Usage#

Import the toggle anywhere inside your provider:

import { ModeToggle } from "@/components/ui/mode-toggle"
 
export function SiteHeader() {
  return (
    <header className="flex items-center justify-between">
      <span>My App</span>
      <ModeToggle />
    </header>
  )
}

How it works#

  • ThemeProvider toggles the dark class on <html> via attribute="class"
  • elorm CSS tokens in your global stylesheet define both light and dark values under .dark
  • ModeToggle exposes light, dark, and system options through a dropdown menu

See Theming for customizing color tokens.

ThemingDesign