Theming

Understand design philosophy

Every component is either rounded-2xl(1rem) or rounded-full depending on the size. Components like Button, Input, Badge, etc. are rounded-full by default and components like Card, ContextMenu, etc. are rounded-2xl by default.

Every component has a border-2 by default and a border-primary color by default.

Every component has a bg-popover for background color which is basically the primary color of the component with 10% opacity.

Body has a bg-background color and text-primary color.

These specs can vary depending on the component variant. For example, Button has a variant of Filled. In this case, the background color of the button is bg-primary and the text color is text-background.

Changing themes

You can change themes by just changing variables in your global CSS file. Check pre-made themes Here.

@layer base {
  :root {
    --primary: 231 15% 18%;
    --popover: 230 9% 26%;
    --background: 60 30% 96%;
    --foreground: 231 15% 18%;
    --destructive: 0 100% 67%;
  }
}

Convention

We use a simple background and primary convention for colors. The background variable is used for the background color of the body and the primary variable is used for text, border, etc. color of the component.

Given the following CSS variables:

--primary: 167 71% 63%;
--background: 226 19% 13%;

The primary color of the following component will be hsl(var(--primary)) and the background color will be hsl(var(--primary-background)).

<div className="bg-background text-primary">Hello</div>

List of variables

Here's the list of variables available for customization:

--primary: 167 71% 63%; /* Text and Border color */
--popover: 194 25% 17%; /* Background color for components (Primary color with 10% opacity) */
--background: 226 19% 13%; /* Background color for body */
--foreground: 209 74% 94%; /* Text color for Destructive background */
--destructive: 329 53% 61%; /* Background color for Destructive components */

Adding new colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

You can now use the warning utility class in your components.

<div className="bg-warning text-warning-foreground" />

Other color formats

I recommend using HSL colors for theming but you can also use other color formats if you prefer.

See the Tailwind CSS documentation for more information on using rgb, rgba or hsl colors.