由 WorkOS 制作

由 WorkOS 制作

主题主题基本组件基本组件图标图标颜色颜色

文档游乐场博客

概述

主题

布局

排版

实用程序

无障碍图标

主题概述

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

结构

该 Theme 组件定义了应用程序的整体视觉外观。可以通过传递一组最小的配置选项来自定义它。

声音

雅马哈 THR

标准化开启

均衡器开启

3D 音频关闭

交叉淡入淡出关闭

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

提供了一套经过精心调整的默认设置，帮助您入门，但不要害怕尝试所有可用的选项，以找到适合您应用程序的视觉风格。查看游乐场以了解每个选项的效果。

变体

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

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

<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。收据副本已发送至 [email protected]

主题令牌

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

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

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

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

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

选择适合您风格的主题圆角设置。

有效地使用海拔、深度和阴影并自定义其属性。

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

上一页版本

下一页颜色

在 GitHub 上编辑此页面。