DEV Community

Jaydenn Chang
Jaydenn Chang

Posted on

Radix UI Replace Radix Color with Custom Palette

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.

Image Radix UI custom palette tool

Paste what is copied to the glabal.css file.

Image global.css

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Image Find color category in global.css file

Do the same for gray.

theme: {
    extend: {
      colors: {
        accent: getColorScale("blue"),
        gray: getColorScale("gray")
      }
    }
  },
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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?

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more