Agent-Skills.md

Agent Skills: Theme Switcher Elements

Install theme switcher components from the Elements registry. Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns. Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle".

UncategorizedID: crafter-station/elements/theme-elements

Repository

crafter-station/elements
crafter-stationLicense: MIT
47426

Install this agent skill to your local

pnpm dlx add-skill https://github.com/crafter-station/elements/tree/HEAD/.claude/skills/theme-elements

Skill Files

Browse the full folder contents for theme-elements.

Download Skill

Loading file tree…

.claude/skills/theme-elements/SKILL.md

Skill Metadata

Name
theme-elements
Description
Install theme switcher components from the Elements registry. Use when user needs dark mode toggles, theme switchers, light/dark buttons, or theme dropdowns. Triggers on "theme switcher", "dark mode", "light mode", "theme toggle", "theme button", "switch theme", "dark mode toggle".

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.

Discovery

Browse https://tryelements.dev/docs/theme