theme-elements

Name: theme-elements
Author: crafter-station

github.com/crafter-stationデザイン・UI52652 回インストール11 週間前に更新

リポジトリ

theme-elements について

theme-elementsは、next-themesを使うアプリ向けに6種類のテーマ切り替えコンポーネントを提供します。ボタン、ドロップダウン、トグルから選べ、すべてのバリアントはデフォルトでハイドレーションに安全です。

主な機能

016種類のテーマ切り替えコンポーネント
02ボタン、ドロップダウン、トグル形式
03next-themesが必要
04デフォルトでハイドレーションに安全

活用シーン

01ナビゲーションバーへのテーマ操作の追加
02設定ページでのテーマ選択肢の提供

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/crafter-station/elements --skill theme-elements

インストール後、Claude Code で/theme-elementsを入力して読み込まれたか確認します。

詳細

テーマスイッチャー要素

6 種類のテーマスイッチャーバリアントです。next-themes が必要です（自動インストールされます）。

インストールパターン

npx shadcn@latest add @elements/theme-switcher-{variant}

バリアント

バリアント	インストール	説明
ボタン	`@elements/theme-switcher-button`	シンプルなアイコンボタン
クラシック	`@elements/theme-switcher-classic`	ラベル付きのクラシックな切り替えボタン
ドロップダウン	`@elements/theme-switcher-dropdown`	オプション付きのドロップダウンメニュー
マルチボタン	`@elements/theme-switcher-multi-button`	ボタングループ（ライト／ダーク／システム）
スイッチ	`@elements/theme-switcher-switch`	トグルスイッチ
トグル	`@elements/theme-switcher-toggle`	アニメーション付きトグル

クイックパターン

# 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

セットアップ

アプリのルートレイアウトで、next-themes の ThemeProvider をアプリ全体を囲むように配置する必要があります。

import { ThemeProvider } from "next-themes";

export default function Layout({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

すべてのバリアントはデフォルトでハイドレーションに対応しています。