Radix UI 使用自定义调色板替换 Radix 颜色

在我正在开发的一个新 **Next.js** 项目中，我选择了 **Tailwind CSS** 和 **Radix UI** 进行样式设计。Radix UI 提供了一个自定义调色板工具，允许开发人员定义自己的强调色和灰色。但是，我搜索了整个文档，却找不到实现自定义颜色的有效方法。

我开始谷歌搜索，终于找到了一个博客，指导我完成这项任务。以下是我采取的步骤：

**步骤 1. 将自定义颜色标尺复制并粘贴到 global.css 文件中**

为“强调”和“灰色”提供您想要的颜色的十六进制代码，然后单击“复制强调比例”。

将复制的内容粘贴到“glabal.css”文件中。

使用“复制灰度”对灰度执行相同操作。

**步骤2.修改tailwind.config.ts中的代码**

将此代码添加到文件中。如果使用 JavaScript，请使用博客中的代码。我使用 TypeScript，因此在代码中添加了一些输入。

function getColorScale(name: string): { [key: string]: string } {
  // eslint-disable-next-line prefer-const
  let scale: { [key: string]: string } = {};
  for (let i = 1; i <= 12; i++) {
    // Add the color variable to the scale
    scale[i.toString()] = `var(--${name}-${i})`;
    // Add alpha color variable to the scale
    scale[`a${i}`] = `var(--${name}-a${i})`;
  }

  return scale;
}

此代码从 `global.css` 文件中获取颜色比例，并将其转换为 tailwind css 自定义颜色所采用的格式。

接下来修改`theme`对象下的`colors`对象。

在这个例子中，强调色阶的颜色类别是“蓝色”，因此在调用“getColorScale”时只需将“蓝色”作为参数。

Image Find color category in global.css file

对“灰色”执行相同操作。

theme: {
    extend: {
      colors: {
        accent: getColorScale("blue"),
        gray: getColorScale("gray")
      }
    }
  },

**步骤 3. 更新 layout.tsx 文件**

默认情况下，“accentColor”设置为“blue”，“grayColor”设置为“gray”，因此在这个例子中，颜色比例将自动更新，但如果颜色类别是不同的颜色，比如“orange”，那么您需要将“accentColor”更新为“orange”。


  
  {children}

由于重新定义了“蓝色”的颜色比例，Radix UI 的任何主题组件现在都将使用自定义颜色比例来设置组件样式。

这就是我如何在我的网站上应用自定义颜色标度而无需重新定义每个组件。

您如何定制自己的？

CLIS.CC

Radix UI 使用自定义调色板替换 Radix 颜色