Day Night Sky Toggle

天空日夜切换

玻璃胶囊里的微型天空，在白天与夜晚之间平滑过渡。

Night Mode

交互方式

点击后光球从一侧滑到另一侧，天空、星星、飞鸟、太阳和月亮一起过渡。示例接入全站主题。

使用示例

"use client"
import { useState } from "react"
import { DayNightSkyToggle } from "@/components/ui/day-night-sky-toggle"

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

参数

参数	类型 / 默认值	说明
`value`	`"light" \| "dark"`	受控主题。不传时组件自己记住状态。
`defaultValue`	`"light" \| "dark"`"light"	未传 value 时的初始状态。
`onValueChange`	`(theme: "light" \| "dark") => void`	切换后调用，可用于同步全站主题。
`className`	`string`	附加到按钮的类名。
`disabled`	`boolean`	禁用点击。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

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

clsxmotiontailwind-merge

components/ui/day-night-sky-toggle.css
components/ui/day-night-sky-toggle.tsx
lib/utils.ts

来源

https://github.com/palakonweb/Rewamp-UI — src/components/ui/DayNightSkyToggleShowcase.jsx（仓库未声明许可证，按原实现保留）