Theme Customizer

Floating theme and color picker with 6 different variants: Pill, Bar, Sidebar, Dock, Corner, and Toolbar.

Preview

Compact floating pill with popup color picker

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/theme-customizer

Usage

import { ThemeCustomizer } from "@/components/ui/theme-customizer"

export default function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <ThemeCustomizer />
    </div>
  )
}

Variants

1. Pill (Default)

Compact floating pill with theme toggle and popup color picker.

import { ThemeCustomizerPill } from "@/components/ui/theme-customizer"

<ThemeCustomizerPill />

2. Bar

Horizontal bar with all options visible: light/dark/system buttons and color palette.

import { ThemeCustomizerBar } from "@/components/ui/theme-customizer"

<ThemeCustomizerBar />

3. Sidebar

Vertical sidebar fixed to the right edge of the screen.

import { ThemeCustomizerSidebar } from "@/components/ui/theme-customizer"

<ThemeCustomizerSidebar />

4. Dock

macOS-style dock at the bottom with hover lift effect.

import { ThemeCustomizerDock } from "@/components/ui/theme-customizer"

<ThemeCustomizerDock />

5. Corner

Minimal expandable button in the bottom-right corner.

import { ThemeCustomizerCorner } from "@/components/ui/theme-customizer"

<ThemeCustomizerCorner />

6. Toolbar

Animated expanding toolbar with smooth transitions. Compact by default, expands to show color picker on click.

import { ThemeCustomizerToolbar } from "@/components/ui/theme-customizer"

<ThemeCustomizerToolbar />

Color Setup

Add this script to your layout.tsx to persist color selection:

// app/layout.tsx
<html>
  <head>
    <script
      dangerouslySetInnerHTML={{
        __html: `
          (function() {
            try {
              var color = localStorage.getItem('theme-color');
              if (color) {
                document.documentElement.setAttribute('data-theme-color', color);
              }
            } catch (e) {}
          })();
        `,
      }}
    />
  </head>
  ...
</html>

Add color CSS variables to your globals.css:

/* Color themes */
[data-theme-color="blue"] {
  --primary: oklch(0.546 0.245 262.881);
  --primary-foreground: oklch(0.985 0 0);
  --ring: oklch(0.546 0.245 262.881);
}
[data-theme-color="blue"].dark,
.dark[data-theme-color="blue"] {
  --primary: oklch(0.623 0.214 259.815);
  --primary-foreground: oklch(0.145 0 0);
  --ring: oklch(0.623 0.214 259.815);
}
/* Add more colors: red, orange, green, violet, pink */

Props

Prop	Type	Default	Description
className	string	-	Additional CSS classes