Radix Homepage
Made by WorkOS
Radix Homepage
Made by WorkOS
主题主题原语原语图标图标颜色颜色
文档演练场博客简中文档

概览 Overview

开始使用 Getting started
样式 Styling
布局 Layout
发布版本 Releases
资源 Resources

主题 Theme

概览 Overview
颜色 Color
深色模式 Dark mode
排版 Typography
间距 Spacing
断点 Breakpoints
圆角 Radius
阴影 Shadows
光标 Cursors

布局 Layout

盒子 Box
弹性 Flex
网格 Grid
容器 Container
段落 Section

排版

文本 Text
标题 Heading
引用块 Blockquote
代码 Code
斜体 Em
快捷键 Kbd
链接 Link
引用 Quote
加粗 Strong

组件

警报对话框 Alert Dialog
纵横比 Aspect Ratio
头像 Avatar
徽章 Badge
按钮 Button
提示框 Callout
卡片Card
复选框 Checkbox
复选框组合 Checkbox Group
复选框卡片 Checkbox Cards
上下文菜单 Context Menu
数据列表 Data List
对话框 Dialog
下拉菜单 Dropdown Menu
悬停卡片 Hover Card
图标按钮 Icon Button
插入 Inset
弹出框 Popover
进度条 Progress
单选框 Radio
单选框组合 Radio Group
单选框卡片 Radio Cards
滚动区域 Scroll Area
分段控制 Segmented Control
选择 Select
分隔线 Separator
骨架 Skeleton
滚动条 Slider
加载指示器 Spinner
开关 Switch
表格 Table
标签 Tabs
标签导航 Tab Nav
文本区域 Text Area
文本字段 Text Field
工具提示 Tooltip

通用工具 Utilities

无障碍图标 Accessible Icon
传送门 Portal
重置 Reset
插槽 Slot
主题 Theme
视觉隐藏 Visually Hidden
Guides

颜色

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

Radix Themes 提供了一系列颜色比例，每种颜色都有其独特的明亮、暗淡和透明变体。在底层，颜色系统由 Radix Colors 给以支持。

点缀色

点缀色是主题中最显著的颜色。它用于主要按钮、链接和其他交互元素。accentColor 直接在 Theme 组件上指定：

<Theme accentColor="indigo">

	<MyApp />

</Theme>

可用的点缀色

可以选择一系列点缀色：

Gray
Gold
Bronze
Brown
Yellow
Amber
Orange
Tomato
Red
Ruby
Crimson
Pink
Plum
Purple
Violet
Iris
Indigo
Blue
Cyan
Teal
Jade
Green
Grass
Lime
Mint
Sky

点缀比例解剖

每种点缀色是一个包含12步的比例，包括每种颜色的实色和透明变体。例如，以下是 indigo 颜色比例：

1
2
3
4
5
6
7
8
9
10
11
12

点缀比例令牌

可以使用 CSS 变量访问点缀颜色令牌。您可以使用这些令牌为自定义组件设置样式，确保它们可访问，并与您主题的其他部分保持一致。

/* 背景 */

var(--accent-1);

var(--accent-2);



/* 交互组件 */

var(--accent-3);

var(--accent-4);

var(--accent-5);



/* 边框和分隔符 */

var(--accent-6);

var(--accent-7);

var(--accent-8);



/* 实色 */

var(--accent-9);

var(--accent-10);



/* 可访问文本 */

var(--accent-11);

var(--accent-12);



/* 功能色 */

var(--accent-surface);

var(--accent-indicator);

var(--accent-track);

var(--accent-contrast);

灰色

您还可以选择纯灰色或多种带色灰色。您的点缀色将自动与一种灰色阴影搭配，但您也可以直接在 Theme 组件上指定自定义 grayColor：

<Theme grayColor="mauve">

	<MyApp />

</Theme>

可用的灰色

可以选择6种灰色。差异可能看起来微妙，但在有大量文本或者在密集用户界面的页面中尤其具有影响力。

Gray
Mauve
Slate
Sage
Olive
Sand

灰色比例解剖

灰色基于相同的12步颜色比例，包括每种颜色的实色和透明变体。例如，以下是 slate 颜色比例：

1
2
3
4
5
6
7
8
9
10
11
12

灰色比例令牌

灰色颜色令牌可以使用 CSS 变量访问。您可以使用这些令牌为自定义组件设置样式，确保它们可访问且与您主题的其他部分保持一致。

/* 背景 */

var(--gray-1);

var(--gray-2);



/* 交互组件 */

var(--gray-3);

var(--gray-4);

var(--gray-5);



/* 边框和分隔符 */

var(--gray-6);

var(--gray-7);

var(--gray-8);



/* 实色 */

var(--gray-9);

var(--gray-10);



/* 可访问文本 */

var(--gray-11);

var(--gray-12);



/* 功能色 */

var(--gray-surface);

var(--gray-indicator);

var(--gray-track);

var(--gray-contrast);

颜色覆盖

当可用时，组件上的 color 属性可以用来覆盖主题点缀。嵌套组件将自动继承新的点缀色。

有新提交。

有新提交。

<Theme accentColor="indigo">

	<Flex align="start" direction={{ initial: "column", sm: "row" }} gap="4">

		<Callout.Root>

			<Callout.Icon>

				<InfoCircledIcon />

			</Callout.Icon>

			<Callout.Text>

				<Flex as="span" align="center" gap="4">

					<Text>有新提交。</Text>

					<Button variant="surface" size="1" my="-2">

						刷新

					</Button>

				</Flex>

			</Callout.Text>

		</Callout.Root>



		<Callout.Root color="gray">

			<Callout.Icon>

				<InfoCircledIcon />

			</Callout.Icon>

			<Callout.Text>

				<Flex as="span" align="center" gap="4">

					<Text>有新提交。</Text>

					<Button variant="surface" size="1" my="-2">

						刷新

					</Button>

				</Flex>

			</Callout.Text>

		</Callout.Root>

	</Flex>

</Theme>

单一颜色令牌

单个颜色可以通过相应名称使用类似的 CSS 变量直接访问。例如，红色通过 --red-1、--red-2 等访问，直到 --red-12。

高对比度

大多数情况下，带有 color 属性的组件还提供 highContrast 选项，以实现与页面背景相比更突出的外观：

<Flex gap="4">

	<Button variant="classic" color="gray">

		编辑个人资料

	</Button>

	<Button variant="classic" color="gray" highContrast>

		编辑个人资料

	</Button>

</Flex>

焦点和选择

Radix Themes 会根据当前组件的点缀色自动调整焦点和选择颜色。大多数情况下，设置 color 属性将智能地改变焦点和选择颜色，以避免颜色冲突：

在 设置 中完成您的账户设置在 设置 中完成您的账户设置在 设置 中完成您的账户设置
<Theme accentColor="indigo">

	<Flex direction="column" gap="4">

		<Text>

			在 <Link href="#">设置</Link> 中完成您的账户设置

		</Text>

		<Text color="gray">

			在 <Link href="#">设置</Link> 中完成您的账户设置

		</Text>

		<Text color="red">

			在 <Link href="#">设置</Link> 中完成您的账户设置

		</Text>

	</Flex>

</Theme>

焦点比例令牌

焦点颜色令牌可以使用类似命名结构的 CSS 变量访问，例如 --focus-1、--focus-2 等，直到 --focus-12。

大多数组件使用 --focus-8 作为焦点轮廓颜色。

透明颜色

每种颜色都有一个透明变体，设计上与页面背景重叠时看起来视觉一致。这是一个强大的工具，允许颜色在覆盖在另一背景上时自然呈现。所有数值颜色步骤都有相应的透明变体。

/* 实色 */

var(--red-1);

var(--red-2);

...

var(--red-12);



/* 透明颜色 */

var(--red-a1);

var(--red-a2);

...

var(--red-a12);

透明颜色在 Radix Themes 组件中自动使用—不需要额外配置。

背景

Radix Themes UI 中使用多个背景色以创建视觉层次感。这些颜色用于背景、卡片和其他表面。

/* 页面背景 */

var(--color-background);



/* 面板背景，例如卡片、表格、弹出框、下拉菜单等 */

var(--color-panel-solid);

var(--color-panel-translucent);



/* 表单组件背景，例如文本字段、复选框、选择器等 */

var(--color-surface);



/* 对话框覆盖 */

var(--color-overlay);

面板背景

panelBackground 属性控制面板元素是使用实色还是透明背景颜色。默认的 translucent 值创建一种微妙的覆盖效果：

<Theme panelBackground="translucent">

	<MyApp />

</Theme>

Sign up

Forgot password?

而 solid 在您希望不受阻碍地显示信息时非常有用。

<Theme panelBackground="solid">

	<MyApp />

</Theme>

Sign up

Forgot password?

自定义

Radix Themes 的颜色可以通过覆盖相应的 CSS 变量进行自定义。有关颜色令牌的完整列表，请参阅 源代码。

确保您的 CSS 在 Radix Themes 样式之后应用，以便优先处理。

品牌颜色

您可以通过重新映射相应的令牌来用品牌颜色替换特定颜色。通常，您会覆盖作为主题点缀的比例的 第9步。

.radix-themes {

	--my-brand-color: #3052f6;

	--indigo-9: var(--my-brand-color);

	--indigo-a9: var(--my-brand-color);

}

在此示例中，使用实色的 indigo 组件现在将引用您的自定义颜色。

自定义调色板

您可以使用 自定义颜色调色板工具 根据几个参考颜色生成自定义调色板。一旦对结果满意，将生成的 CSS 粘贴到您的项目中。您可以重命名生成的颜色以匹配您希望在主题中使用的点缀。

要生成深色主题颜色，请切换外观以使用深色主题。确保在轻主题颜色覆盖之后粘贴生成的 CSS。

创建自定义调色板 →

颜色别名

您可能更愿意使用通用颜色名称来指代您希望使用的颜色阴影。例如，通常将 crimson、jade 和 indigo 分别称为 red、green 和 blue。

在这种情况下，您可以将 Radix Themes 的令牌相互映射，从而重新获得您希望使用的颜色名称：

.radix-themes {

	--red-1: var(--ruby-1);

	--red-2: var(--ruby-2);

	--red-3: var(--ruby-3);

	--red-4: var(--ruby-4);

	--red-5: var(--ruby-5);

	--red-6: var(--ruby-6);

	--red-7: var(--ruby-7);

	--red-8: var(--ruby-8);

	--red-9: var(--ruby-9);

	--red-10: var(--ruby-10);

	--red-11: var(--ruby-11);

	--red-12: var(--ruby-12);



	--red-a1: var(--ruby-a1);

	--red-a2: var(--ruby-a2);

	--red-a3: var(--ruby-a3);

	--red-a4: var(--ruby-a4);

	--red-a5: var(--ruby-a5);

	--red-a6: var(--ruby-a6);

	--red-a7: var(--ruby-a7);

	--red-a8: var(--ruby-a8);

	--red-a9: var(--ruby-a9);

	--red-a10: var(--ruby-a10);

	--red-a11: var(--ruby-a11);

	--red-a12: var(--ruby-a12);



	--red-surface: var(--ruby-surface);

	--red-indicator: var(--ruby-indicator);

	--red-track: var(--ruby-track);

	--red-contrast: var(--ruby-contrast);

}

在这个例子中，使用 Radix Themes 组件和令牌中的 red 颜色现在将引用原始的 ruby 比例。

单独的 CSS 文件

颜色定义占 Radix Themes 附带的总 CSS 大小的约 20%。

如果您希望减少 CSS 包大小并仅访问您使用的颜色，可以导入每个颜色模块的单独 CSS 文件。以下是示例设置：

// 基本主题令牌

import "@radix-ui/themes/tokens/base.css";



// 仅包含您使用的颜色，例如 `ruby`、`teal` 和 `slate`。

// 别忘了导入与您的主题设置匹配的灰色阴影。

import "@radix-ui/themes/tokens/colors/ruby.css";

import "@radix-ui/themes/tokens/colors/teal.css";

import "@radix-ui/themes/tokens/colors/slate.css";



// 其余的 CSS

import "@radix-ui/themes/components.css";

import "@radix-ui/themes/utilities.css";

请注意，您没有导入的颜色仍然可以在 React 中通过 color 属性进行使用。同时，确保您的开发工具保留导入 CSS 文件的顺序。

上一篇概览 Overview
下一篇深色模式 Dark mode
在 GitHub 上编辑此页面