Theming

Benflux UI ships with 8 built-in themes. Switch globally via BenfluxProvider or at runtime with useTheme.

Available themes

Dark

Classic dark mode with indigo accent

dark

Light

Clean light mode with indigo accent

light

AMOLED

Pure black for OLED displays

amoled

Glass

Glassmorphism aesthetic with blue

glass

Neon

Dark with neon green highlights

neon

Cyberpunk

High contrast pink neon

cyberpunk

Luxury

Dark with gold accent

luxury

Minimal

Light and minimal monochrome

minimal

Setup

Wrap your app root with BenfluxProvider:

app/layout.tsx

import { BenfluxProvider } from "@benflux-ui/themes"

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <BenfluxProvider defaultTheme="dark" storageKey="my-app-theme">
          {children}
        </BenfluxProvider>
      </body>
    </html>
  )
}

Switching themes at runtime

"use client"
import { useTheme } from "@benflux-ui/themes"

export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme()

  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      <option value="dark">Dark</option>
      <option value="light">Light</option>
      <option value="neon">Neon</option>
      <option value="cyberpunk">Cyberpunk</option>
    </select>
  )
}

CSS variables

All theme colors are exposed as CSS custom properties on :root. You can use them directly in your styles:

/* Available CSS variables */
--background
--foreground
--primary
--primary-foreground
--secondary
--secondary-foreground
--muted
--muted-foreground
--accent
--accent-foreground
--destructive
--destructive-foreground
--border
--input
--ring
--card
--card-foreground
--popover
--popover-foreground

Custom theme

Override any CSS variable to customize a theme for your brand:

/* globals.css */
.dark {
  --primary: 250 85% 60%;
  --primary-foreground: 0 0% 100%;
  /* Override any variable */
}