Radix 主页
由 WorkOS 制作
Radix 主页
由 WorkOS 制作
主题主题基础元素基础元素图标图标颜色颜色
文档游乐场博客
指南

颜色

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

Radix 主题提供了一些颜色尺度，每个尺度都有自己的亮度、暗度和透明度变体。在幕后，颜色系统由 Radix Colors 提供支持。

色调

色调是主题中最突出的颜色。它用于主按钮、链接和其他交互式元素。 accentColor 直接在 主题 组件上指定

<Theme accentColor="indigo">

  <MyApp />

</Theme>

可用的色调

提供了一系列色调供您选择

灰色
金色
青铜色
棕色
黄色
琥珀色
橙色
番茄色
红色
红宝石
深红色
粉红色
李子色
紫色
紫罗兰色
鸢尾色
靛蓝色
蓝色
青色
蓝绿色
碧玉色
绿色
草绿色
青柠色
薄荷色
天空色

强调色比例结构

每个强调色都是一个包含每个颜色及其透明变体的12步比例尺。例如，以下是 靛蓝色 色比例尺

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

强调色比例尺标记

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

/* Backgrounds */

var(--accent-1);

var(--accent-2);



/* Interactive components */

var(--accent-3);

var(--accent-4);

var(--accent-5);



/* Borders and separators */

var(--accent-6);

var(--accent-7);

var(--accent-8);



/* Solid colors */

var(--accent-9);

var(--accent-10);



/* Accessible text */

var(--accent-11);

var(--accent-12);



/* Functional colors */

var(--accent-surface);

var(--accent-indicator);

var(--accent-track);

var(--accent-contrast);

灰色

您也可以在纯灰色和多种带色的灰色之间进行选择。您的强调色将自动与与之互补的灰色色调配对。但是，您也可以在 主题 组件上直接指定自定义 灰色。

<Theme grayColor="mauve">

  <MyApp />

</Theme>

可用的灰色

共有 6 种灰色可供选择。它们之间的差异可能看起来很细微，但在页面上有很多文本或密集的 UI 中会产生很大影响。

灰色
淡紫色
石板色
鼠尾草绿
橄榄色
沙色

灰色比例结构

灰色基于相同的 12 步颜色比例尺，其中包含每个颜色及其透明变体。例如，以下是 石板色 色比例尺

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

灰色比例尺标记

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

/* Backgrounds */

var(--gray-1);

var(--gray-2);



/* Interactive components */

var(--gray-3);

var(--gray-4);

var(--gray-5);



/* Borders and separators */

var(--gray-6);

var(--gray-7);

var(--gray-8);



/* Solid colors */

var(--gray-9);

var(--gray-10);



/* Accessible text */

var(--gray-11);

var(--gray-12);



/* Functional colors */

var(--gray-surface);

var(--gray-indicator);

var(--gray-track);

var(--gray-contrast);

颜色覆盖

如果可用，组件上的 颜色 属性可用于覆盖主题强调色。嵌套组件将自动继承新的强调色。

有新的提交。

有新的提交。

<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>There are new commits.</Text>

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

            Refresh

          </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>There are new commits.</Text>

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

            Refresh

          </Button>

        </Flex>

      </Callout.Text>

    </Callout.Root>

  </Flex>

</Theme>

单个颜色标记

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

高对比度

大多数情况下，具有 颜色 属性的组件还提供 高对比度 选项，它可以实现与页面背景对比明显的视觉效果。

<Flex gap="4">

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

    Edit profile

  </Button>

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

    Edit profile

  </Button>

</Flex>

焦点和选择

Radix 主题会根据当前组件的强调色自动调整焦点和选择颜色。大多数情况下，设置 颜色 属性将智能地更改焦点和选择颜色，以避免出现冲突色调的不匹配。

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

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

    <Text>

      Complete your account setup in <Link href="#">settings</Link>

    </Text>

    <Text color="gray">

      Complete your account setup in <Link href="#">settings</Link>

    </Text>

    <Text color="red">

      Complete your account setup in <Link href="#">settings</Link>

    </Text>

  </Flex>

</Theme>

焦点比例尺标记

可以使用遵循类似于其他比例尺的命名结构的 CSS 变量访问焦点颜色标记，例如 --focus-1、--focus-2 等，一直到 --focus-12。

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

Alpha 颜色

每种颜色都具有一个 alpha 变体，它旨在放置在页面背景上时在视觉上保持一致。这是一种强大的工具，可以让颜色在叠加在另一个背景上时看起来自然。所有数值颜色步骤都有相应的 alpha 变体。

/* Solid colors */

var(--red-1);

var(--red-2);

...

var(--red-12);



/* Alpha colors */

var(--red-a1);

var(--red-a2);

...

var(--red-a12);

Alpha 颜色在 Radix 主题组件中自动使用，无需额外配置。

背景

在 Radix 主题 UI 中使用多种背景颜色来创建视觉层次感。这些颜色用于背景、卡片和其他表面。

/* Page background */

var(--color-background);



/* Panel backgrounds, such as cards, tables, popovers, dropdown menus, etc. */

var(--color-panel-solid);

var(--color-panel-translucent);



/* Form component backgrounds, such as text fields, checkboxes, select, etc. */

var(--color-surface);



/* Dialog overlays */

var(--color-overlay);

面板背景

panelBackground 属性控制面板元素是否使用实色或半透明背景颜色。默认的 半透明 值会创建一种微妙的叠加效果。

<Theme panelBackground="translucent">

  <MyApp />

</Theme>

注册

忘记密码？

当您希望以无障碍的方式呈现信息时，实色 非常有用。

<Theme panelBackground="solid">

  <MyApp />

</Theme>

注册

忘记密码？

自定义

通过覆盖标记系统的相应 CSS 变量可以自定义 Radix 主题颜色。请参阅 源代码 获取完整的颜色标记列表。

确保您的 CSS 在 Radix 主题样式之后应用，以便它优先。

品牌颜色

您可以通过重新映射相应的标记来用品牌颜色替换特定颜色。通常，您将覆盖您用作主题强调色的比例尺的 第 9 步。

.radix-themes {

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

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

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

}

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

自定义调色板

您可以使用 自定义颜色调色板工具 仅根据几个参考颜色生成自定义调色板。对结果感到满意后，将生成的 CSS 粘贴到您的项目中。您可以将生成的颜色的名称重命名为与您要在主题中使用的强调色匹配。

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

创建自定义调色板 →

颜色别名

您可能更喜欢使用通用颜色名称来引用您要使用的颜色色调。例如，通常将 深红色、碧玉色 和 靛蓝色 分别称为 红色、绿色 和 蓝色。

在这种情况下，您可以相互重新映射 Radix 主题标记并重新获取您要使用的颜色名称。

.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 主题组件和标记中使用 红色 将引用原始的 红宝石 比例尺。

单个 CSS 文件

颜色定义约占 Radix 主题提供的总 CSS 大小的 20%。

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

// Base theme tokens

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



// Include just the colors you use, for example `ruby`, `teal`, and `slate`.

// Remember to import the gray tint that matches your theme setting.

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

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

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



// Rest of the CSS

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

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

请注意，您未导入的颜色仍将被 React 中的 颜色 属性接受。另外，请确保您的开发人员工具 保留 导入的 CSS 文件的顺序。

上一步概述
下一步暗黑模式
在 GitHub 上编辑此页面。