定价

ColorSchemeButton

Figma 源代码

在亮色与暗色主题之间切换，并以图标反馈当前方案，适合网站和应用的主题入口。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于切换浅色与深色方案。新代码使用此名称；ThemeButton 是兼容导出。设计风格切换使用 StyleButton。

  • 通过 bind:scheme 或 onSchemeChange 同步明暗状态，defaultScheme 提供默认方案。

  • 默认同步文档主题；局部控制设置 applyToDocument={false}。不提供 children 时使用纯图标布局。

导入

import { ColorSchemeButton } from '@snowui-design-system/components';

用法

变体

API 参考

属性 类型 默认值 示例 描述
scheme ColorScheme — scheme={value} 当前配色方案，支持 bind:scheme。挂载时优先于 defaultScheme；点击更新该值，同步页面属性时也会跟随根节点变化。
defaultScheme ColorScheme — defaultScheme={value} 挂载时的非受控初值；scheme 优先。均未提供时读取页面根节点；applyToDocument=false 时回退为 light。
applyToDocument boolean true applyToDocument 将当前状态同步到 document.documentElement：theme="dark"；亮色时移除 theme。false 时不读写或观察页面属性，由调用方处理主题目标；不写入 storage。
ariaLabel string — ariaLabel="Example" 覆盖按钮的可访问名称；默认描述点击后切换到的状态，跟随 LocaleProvider。
lightIcon Snippet —（内置图形） lightIcon={lightIconContent} 替换当前为 light 时显示的 Sun 图标。仅改变图形，不接管切换逻辑。
darkIcon Snippet —（内置图形） darkIcon={darkIconContent} 替换当前为 dark 时显示的 Moon 图标。仅改变图形，不接管切换逻辑。
children Snippet — <ColorSchemeButton>Content</ColorSchemeButton> 显示在状态图形之后的自定义内容；未提供时宿主 Button 自动使用 iconOnly 布局。
disabled boolean false disabled 禁用按钮操作；不会阻止外部绑定值或页面属性的同步。
onSchemeChange (scheme: ColorScheme) => void — onSchemeChange={(value) => { /* handle value */ }} 用户点击切换后接收新值；初始化、外部赋值及页面属性观察同步不会调用此回调。
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} 有效点击时先调用，再执行状态切换；当前实现不会以 preventDefault() 取消后续切换。disabled 时不调用。