Radix UI 用自定义调色板替换 Radix Color

论文

radix ui 提供了一个自定义调色板工具，允许开发人员定义自己的强调色和灰色。步骤 1. 将自定义色阶复制并粘贴到 global.css 文件

为“强调色”和“灰色”提供所需颜色的十六进制代码，然后单击“复制强调色阶”。

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

使用复制灰度对灰度进行相同的操作。

---

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

将此代码添加到文件中。如果使用 javascript，请使用博客中的代码。我使用 typescript，因此在代码中添加了一些类型。

1. function getcolorscale(name: string): { [key: string]: string } {
   
2.   // eslint-disable-next-line prefer-const
   
3.   let scale: { [key: string]: string } = {};
   
4.   for (let i = 1; i <= 12; i++) {
   
5.     // add the color variable to the scale
   
6.     scale[i.tostring()] = `var(--${name}-${i})`;
   
7.     // add alpha color variable to the scale
   
8.     scale[`a${i}`] = `var(--${name}-a${i})`;
   
9.   }
   
10. 
    
11.   return scale;
    
12. }

复制代码

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

接下来，修改主题对象下的颜色对象。

在此示例中，强调色阶的颜色类别为蓝色，因此在调用 getcolorscale 时只需将蓝色作为参数即可。

对灰色进行同样的操作。

1. theme: {
   
2.     extend: {
   
3.       colors: {
   
4.         accent: getcolorscale("blue"),
   
5.         gray: getcolorscale("gray")
   
6.       }
   
7.     }
   
8.   },

复制代码

第3步.更新layout.tsx文件

默认情况下，accentcolor 设置为蓝色，graycolor 设置为灰色，因此在本例中，色阶将自动更新，但如果颜色类别是不同的颜色，例如橙色，那么您需要将accentcolor更新为橙色。

1. <Theme accentColor='blue' grayColor='gray'>
   
2.   <NavBar />
   
3.   <main>{children}</main>
   
4.   <Footer />
   
5. </Theme>

复制代码

由于重新定义了蓝色的色标，radix ui 中的任何主题组件现在都将使用自定义色标来设置组件的样式。

---

这就是我在网站上应用自定义色阶而无需重新定义每个组件的方法。

如何定制您的？

以上就是Radix UI 用自定义调色板替换 Radix Color的详细内容

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！ 如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！