In a new Next.js project I'm working on, I chose Tailwind CSS and Radix UI for styling. Radix UI provides a 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.
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
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?
SOCIAL SHARE CARD GENERATOR