theme-elements
1
总安装量
1
周安装量
#78516
全站排名
安装命令
npx skills add https://github.com/crafter-station/elements --skill theme-elements
Agent 安装分布
amp
1
cline
1
opencode
1
cursor
1
continue
1
kimi-cli
1
Skill 文档
Theme Switcher Elements
6 theme switcher variants. Requires next-themes (auto-installed).
Install Pattern
npx shadcn@latest add @elements/theme-switcher-{variant}
Variants
| Variant | Install | Description |
|---|---|---|
| Button | @elements/theme-switcher-button |
Simple icon button |
| Classic | @elements/theme-switcher-classic |
Classic toggle with label |
| Dropdown | @elements/theme-switcher-dropdown |
Dropdown menu with options |
| Multi-Button | @elements/theme-switcher-multi-button |
Button group (Light/Dark/System) |
| Switch | @elements/theme-switcher-switch |
Toggle switch |
| Toggle | @elements/theme-switcher-toggle |
Animated toggle |
Quick Patterns
# Minimal (navbar icon)
npx shadcn@latest add @elements/theme-switcher-button
# Full control
npx shadcn@latest add @elements/theme-switcher-dropdown
# Settings page
npx shadcn@latest add @elements/theme-switcher-multi-button
Setup
Requires ThemeProvider from next-themes wrapping your app in the root layout:
import { ThemeProvider } from "next-themes";
export default function Layout({ children }) {
return (
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
);
}
All variants are hydration-safe by default.