Radix UI Replace Radix Color with Custom Palette

Jaydenn Chang — Tue, 26 Nov 2024 20:31:36 +0000

In a new Next.js project I'm working on, I chose Tailwind CSS and Radix UI for styling. Radix UI provides a custom palette tool that allows developers to define their's own accent color and gray color. However, I searched throughout the documentation and couldn't find an effective way to implement the custom colors.

I started Googling, and to the rescue, I found a blog that guided me to achieve the task. Here were the steps I took:

Step 1. Copy and paste the custom color scale to the global.css file

Provide the hexcode of the color you want to the Accent and Gray, and click Copy accent scale.

Paste what is copied to the glabal.css file.

Do the same for the gray scale with Copy gray scale.

Step 2. Modify code in tailwind.config.ts

Add this code to the file. If use JavaScript, use the code from the blog. I use TypeScript so some typings were added to the code.

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;
}

This code gets the color scale from global.css file and turns it into the format tailwind css takes in customizing colors.

Next, modify the colors object under theme object.

In this example, the color category for accent color scale is blue, so simply put blue as the argument when calling getColorScale.

Do the same for gray.

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

Step 3. Update layout.tsx file

By default, the accentColor is set to blue and grayColor is set to gray, so in this example, the color scale will be automatically updated, but if the color category is a different color, say orange, then you'll need to update the accentColor to orange.

<Theme accentColor='blue' grayColor='gray'>
  <NavBar />
  <main>{children}</main>
  <Footer />
</Theme>

Since color scale for blue is redefined, any Themes Component from Radix UI will now use the custom color scale to style the components.

This is how I applied custom color scales on my website without redefining every component.

How do you customize yours?

DEV Community: Jaydenn Chang

Radix UI Replace Radix Color with Custom Palette