主题概览

¥Theme overview

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

结构

¥Anatomy

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

¥The Theme component defines the overall visual look of your application. It can be customized by passing a minimal set of configuration options.

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

我们提供了一组经过精心调校的默认设置，方便你快速上手，但你也可以尝试所有可用选项，找到适合你应用的视觉风格。检查 游乐场 以了解每个选项的影响。

¥A well tuned set of defaults is provided to get you started, but don’t be afraid to play with all of the available options to find the right visual style for your application. Check out the Playground to see what effect each option has.

变体

¥Variants

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

¥Variants are visual variations of a component which are used to create visual hierarchies and communicate relative importance.

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

¥Each component offers a different set of variants, though all are designed to be consistent and complimentary with each other.

<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>

示例

¥Examples

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

¥Using a combination of component variants alongside customized theme settings allows you to create a multitude of unique-looking interfaces.

例如，你可以创建：

¥For example you could create:

• 音乐应用

  ¥Music applications

• 电商产品元素

  ¥Ecommerce product elements

• SaaS 仪表板

  ¥SaaS dashboards

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

¥Or any number of differing treatments and styles.

令牌

¥Tokens

Tokens 可以直接访问主题值，让你能够灵活地构建和自定义自己的主题组件。

¥Tokens provide direct access to theme values and give you flexibility to build and customize your own themed components.

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

¥For all available theme tokens see the source code, or read more about each type of token in the relevant theme pages.