mcpField
T
theme-elements

theme-elements

github.com/crafter-station设计与 UI52652 次安装11 周前更新
代码仓库

关于 theme-elements

theme-elements 为使用 next-themes 的应用提供 6 种主题切换组件。开发者可选择按钮、下拉菜单或开关样式，所有变体默认支持 hydration 安全。

主要功能

  1. 016 种主题切换组件
  2. 02按钮、下拉菜单和开关样式
  3. 03需要 next-themes
  4. 04组件默认支持 hydration 安全

适用场景

  1. 01在导航栏添加主题控件
  2. 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>
  );
}

默认情况下，所有变体都能安全地进行水合。

发现

浏览 https://tryelements.dev/docs/theme

评论

支持 Markdown