🚧 Under development. Read more →
Documentation
Theming

Theming

Introduction

Neon's theme is based on Radix colors, offering a vibrant and visually appealing palette. In this guide, we'll walk you through the steps to apply the Neon theme to your project.

💡

Note: You can learn more about the color palette used in Neon here.

Steps

Install Radix colors

To begin, you'll need to install the Radix colors package using pnpm:

pnpm add @radix-ui/colors

Import the Tailwind config

We are in a mono repo and we have tailwind config in the root of the repo. So we need to import the config from the root of the repo.

Copy and paste the following code in your tailwind.config.ts file.

import sharedConfig from "tailwind-config/tailwind.config"
import type { Config } from "tailwindcss"
 
export default {
  ...sharedConfig,
} satisfies Config

Configure the color scales

In Neon we use 6 main color ranges:

  • gray for grays or texts
  • success for greens or statuses that represent something successful
  • warning for yellows or statuses that represent something warning
  • danger for reds or statuses that represent something dangerous
  • info for blues or statuses that represent something informative
  • brand for a color that represents the company's brand or a main color you want to use

If you want to use the default Neon colors, you must copy and paste the following code in your global style file.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@import "@radix-ui/colors/gray.css"; {/* Gray */}
@import "@radix-ui/colors/gray-alpha.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/gray-dark-alpha.css";
 
@import "@radix-ui/colors/green.css"; {/* Success */}
@import "@radix-ui/colors/green-alpha.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/green-dark-alpha.css";
 
@import "@radix-ui/colors/yellow.css"; {/* Warning */}
@import "@radix-ui/colors/yellow-alpha.css";
@import "@radix-ui/colors/yellow-dark.css";
@import "@radix-ui/colors/yellow-dark-alpha.css";
 
@import "@radix-ui/colors/red.css"; {/* Danger */}
@import "@radix-ui/colors/red-alpha.css";
@import "@radix-ui/colors/red-dark.css";
@import "@radix-ui/colors/red-dark-alpha.css";
 
@import "@radix-ui/colors/blue.css"; {/* Info */}
@import "@radix-ui/colors/blue-alpha.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/blue-dark-alpha.css";
 
@import "@radix-ui/colors/violet.css"; {/* Brand */}
@import "@radix-ui/colors/violet-alpha.css";
@import "@radix-ui/colors/violet-dark.css";
@import "@radix-ui/colors/violet-dark-alpha.css";
 
@import "@radix-ui/colors/black-alpha.css"; {/* Black Overlay */}
@import "@radix-ui/colors/white-alpha.css"; {/* White Overlay */}
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 0 0% 0%;
  }
}
 
@layer base {
  * {
    @apply border-gray-6;
  }
  body {
    @apply bg-background text-gray-12 overflow-x-hidden m-0 p-0;
  }
}

If you want to configure your own color scales, you should do the following:

First, you must extend your colors from the tailwind configuration using a utility that generates color scales based on Radix Colors

import sharedConfig from "tailwind-config/tailwind.config"
import { generateScale } from "tailwind-config/utils/generate-scale"
import type { Config } from "tailwindcss"
 
export default {
  ...sharedConfig,
  theme: {
    ...sharedConfig.theme,
    extend: {
      ...sharedConfig.theme.extend,
      colors: {
        ...sharedConfig.theme.extend.colors,
        gray: generateScale({ name: "mauve" }),
        success: generateScale({ name: "jade" }),
        warning: generateScale({ name: "amber" }),
        danger: generateScale({ name: "crimson" }),
        info: generateScale({ name: "cyan" }),
        brand: generateScale({ name: "orange" }),
      },
    },
  },
} satisfies Config

Where the name sent as a parameter to generateScale corresponds to the color of the color in the [Radix Colors] web site (https://www.radix-ui.com/colors/docs/palette-composition/scales (opens in a new tab)).

In this example, we are generating the same color scale but based on different colors than the default ones.

Then, you must copy and paste the following code in your global style file.

@tailwind base;
@tailwind components;
@tailwind utilities;
 
@import "@radix-ui/colors/mauve.css"; {/* Text */}
@import "@radix-ui/colors/mauve-alpha.css";
@import "@radix-ui/colors/mauve-dark.css";
@import "@radix-ui/colors/mauve-dark-alpha.css";
 
@import "@radix-ui/colors/jade.css"; {/* Success */}
@import "@radix-ui/colors/jade-alpha.css";
@import "@radix-ui/colors/jade-dark.css";
@import "@radix-ui/colors/jade-dark-alpha.css";
 
@import "@radix-ui/colors/amber.css"; {/* Warning */}
@import "@radix-ui/colors/amber-alpha.css";
@import "@radix-ui/colors/amber-dark.css";
@import "@radix-ui/colors/amber-dark-alpha.css";
 
@import "@radix-ui/colors/crimson.css"; {/* Danger */}
@import "@radix-ui/colors/crimson-alpha.css";
@import "@radix-ui/colors/crimson-dark.css";
@import "@radix-ui/colors/crimson-dark-alpha.css";
 
@import "@radix-ui/colors/cyan.css"; {/* Info */}
@import "@radix-ui/colors/cyan-alpha.css";
@import "@radix-ui/colors/cyan-dark.css";
@import "@radix-ui/colors/cyan-dark-alpha.css";
 
@import "@radix-ui/colors/orange.css"; {/* Brand */}
@import "@radix-ui/colors/orange-alpha.css";
@import "@radix-ui/colors/orange-dark.css";
@import "@radix-ui/colors/orange-dark-alpha.css";
 
@import "@radix-ui/colors/black-alpha.css"; {/* Black Overlay */}
@import "@radix-ui/colors/white-alpha.css"; {/* White Overlay */}
 
@layer base {
  :root {
    --background: 0 0% 100%;
    --radius: 0.5rem;
  }
 
  .dark {
    --background: 0 0% 0%;
  }
}
 
@layer base {
  * {
    @apply border-gray-6;
  }
  body {
    @apply bg-background text-gray-12 overflow-x-hidden m-0 p-0;
  }
}

Done!

Now you can use the Radix colors and components of Neon in your project.

ColorsData Display