Theme toggle

日夜切换

太阳与月亮通过旋转和缩放交替出现的主题按钮。

Night

交互方式

点按按钮切换全站主题，示例背景跟随状态变化。

使用示例

"use client"
import { useState } from "react"
import { ThemeToggle } from "@/components/ui/theme-toggle"

export function Demo() {
  const [theme, setTheme] = useState<"light" | "dark">("light")
  return <ThemeToggle value={theme} onValueChange={setTheme} />
}

参数

参数	类型 / 默认值	说明
`value`	`"light" \| "dark"`	受控主题。示例里接入全站主题。
`defaultValue`	`"light" \| "dark"`"light"	未传 value 时的初始状态。
`onValueChange`	`(theme) => void`	状态切换后调用。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

clsxtailwind-merge

components/ui/theme-toggle.css
components/ui/theme-toggle.tsx
lib/utils.ts

来源

图标与旋转缩放效果采集自 EVAA，https://app.evaa.finance。