How do I install the Theme Elements skill?

Run npx skillmds@latest add crafter-station/theme-elements in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Theme Elements safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Theme Elements?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Theme Elements free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Theme Elements?

crafter-station (@crafter-station) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Theme Elements by crafter-station — Agent Skill

Name: Theme Elements
Author: crafter-station

Theme 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".

File contents

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

Frequently asked questions