Landscape Orb Toggle

景观球切换

圆形玻璃球里的天空与沙丘，在白天和夜晚之间交叉淡化。

Night Mode

交互方式

点击球体，天空、两层波浪和日月一起过渡。示例接入全站主题。

使用示例

"use client"
import { useState } from "react"
import { LandscapeOrbToggle } from "@/components/ui/landscape-orb-toggle"

export function Demo() {
  const [theme, setTheme] = useState<"light" | "dark">("light")
  return <LandscapeOrbToggle 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/landscape-orb-toggle.css
components/ui/landscape-orb-toggle.tsx
lib/utils.ts

来源

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