主题概述

使用 Theme 组件更改 UI 的外观和风格。

结构

Theme 组件定义了应用程序的整体视觉外观。可以通过传递最少的配置选项进行自定义。

声音

Yamaha THR

标准化开

均衡器开

3D 音频关

交叉淡化关

<Theme
	accentColor="mint"
	grayColor="gray"
	panelBackground="solid"
	scaling="100%"
	radius="full"
>
	<ThemesVolumeControlExample />
</Theme>

我们提供了一套经过良好调优的默认设置，助你快速入门，但请不要害怕尝试所有可用的选项，找到适合你应用程序的视觉风格。查看 Playground 以了解每个选项的效果。

变体

变体是组件的视觉变化形式，用于创建视觉层次结构并传达相对重要性。

每个组件都提供一组不同的变体，但所有变体都设计为彼此一致和互补。

<Flex gap="3" align="center">
	<Button variant="classic">
		Get started <ArrowRightIcon />
	</Button>
	<Button variant="solid">
		Get started <ArrowRightIcon />
	</Button>
	<Button variant="soft">
		Get started <ArrowRightIcon />
	</Button>
</Flex>

示例

结合使用组件变体和自定义主题设置，你可以创建多种外观独特的界面。

例如，你可以创建

或任意数量的不同处理方式和风格。

你的个人资料

姓名

用户名

电子邮件

隐私

显示我的收听历史所有人都可以关注我的活动在搜索中显示我的播放列表

危险区域

重置推荐删除个人资料

发票已支付

你已支付 $17,975.30。收据副本已发送至 acc@example.com

令牌

令牌提供对主题值的直接访问，并为你构建和自定义自己的主题组件提供灵活性。

有关所有可用的主题令牌，请参阅源代码，或在相关主题页面中阅读有关每种令牌类型的更多信息。

了解颜色系统及其在主题中的应用。

了解如何使用和自定义主题的排版元素。

探索间距比例和可用的缩放选项。

在主题中选择适合你风格的圆角设置。

有效地使用高度、深度和阴影，并自定义它们的属性。

光标

自定义用于交互元素的光标。

上一篇资源

下一篇颜色

在 GitHub 上编辑此页。

概述

主题

布局

排版

组件

实用工具

主题概述

结构

声音

变体

示例

你的个人资料

发票已支付

令牌