Installation
Add to your project
Follow these simple steps to integrate the theme switcher
1
Install the package
2
Import and use
import { ThemeSwitcher } from "colorswitchcn"
export function Navbar() {
return (
<div className="flex items-center gap-4">
<nav>{/* Your navigation */}</nav>
<ThemeSwitcher />
</div>
)
}Theme Preview
Interactive Demo
See how colors change instantly across UI elements
Button (Primary)bg-primary
Button (Secondary)bg-secondary
Card Backgroundbg-card
Card Background
Muted Backgroundbg-muted
Muted Background
useThemeSwitch Hook API
Overview
The useThemeSwitch hook provides a comprehensive way to control theme settings in your application.
This hook handles both light/dark mode toggling and custom color presets. It's inspired by the TweakCN theme system.
Installation
import { useThemeSwitch } from "colorswitchcn";Basic Usage
const { theme, switchPreset, toggleMode, allPresets } = useThemeSwitch();
// Toggle between light/dark
toggleMode();
// Apply a different color preset
switchPreset('blue');Live Example
See the hook in action with this interactive example
Theme Mode: light
Current Preset: default
Hook Options
Configure the useThemeSwitch hook with these options
useThemeSwitch({
defaultPreset: "default", // Default preset to use
});defaultPreset
The preset to use when no preset is saved in localStorage.