A comprehensive color theme switcher component for ShadCN UI. This component allows users to toggle between light and dark modes and select from a variety of predefined color schemes.
This component is inspired by and compatible with TweakCN, a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components created by Sahaj.
- Toggle between light and dark modes
- Select from multiple color schemes
- Persist theme preferences in local storage
- Automatically apply theme changes to the document
- Fully customizable and extensible
# Using npm
npx shadcn@latest add https://colorswitchcn.heywinit.me/r/colorswitchcn.json
# Using pnpm
pnpm dlx shadcn@latest add https://colorswitchcn.heywinit.me/r/colorswitchcn.json
# Using yarn
yarn dlx shadcn@latest add https://colorswitchcn.heywinit.me/r/colorswitchcn.json
# Using bun
bunx shadcn@latest add https://colorswitchcn.heywinit.me/r/colorswitchcn.jsonAfter installing the components with shadcn, the files will be added to your project's components and lib directories. You can then import and use them:
import { ThemeSwitcher } from "@/components/ui/theme-switcher";
export default function Header() {
return (
<header className="flex items-center justify-between p-4">
<h1>My App</h1>
<ThemeSwitcher />
</header>
);
}The ThemeSwitcher component accepts the following props:
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| align | "start"/"center"/"end" | "center" | Horizontal alignment of components |
The component includes a theme provider that needs to be wrapped around your application. Add the following to your root layout:
// In your app layout
import { ThemeProvider } from "next-themes";
import { CustomThemeProvider } from "@/lib/theme-provider";
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
<CustomThemeProvider defaultPreset="modern-minimal">
{children}
</CustomThemeProvider>
</ThemeProvider>
</body>
</html>
);
}You can access and modify the theme programmatically using the useTheme hook:
import { useTheme } from "@/lib/theme-provider";
function MyComponent() {
const { themeState, setThemeMode, applyThemePreset } = useTheme();
// Toggle between light and dark mode
const toggleTheme = () => {
setThemeMode(themeState.currentMode === "light" ? "dark" : "light");
};
// Apply a specific theme preset
const applyTheme = (presetName: string) => {
applyThemePreset(presetName);
};
return (
<div>
<button onClick={toggleTheme}>Toggle Theme Mode</button>
<button onClick={() => applyTheme("cyberpunk")}>Apply Cyberpunk Theme</button>
</div>
);
}You can add your own theme presets by modifying the presets object in theme-presets.ts:
// Add your custom theme preset
export const presets: Record<string, ThemePreset> = {
// Existing presets...
"my-custom-theme": {
label: "My Custom Theme",
styles: {
light: {
// Light mode colors
background: "#ffffff",
foreground: "#333333",
primary: "#ff0000",
// ... other properties
},
dark: {
// Dark mode colors
background: "#000000",
foreground: "#ffffff",
primary: "#ff0000",
// ... other properties
}
}
}
};MIT