Theme Color Scheme

Customize the theme color scheme easily using Tailwind CSS variables. This approach works seamlessly with light and dark mode.

This theme uses Tailwind CSS v4 with CSS variables for colors. You only need to update values in one place, and the entire theme will adapt automatically.

Using Tailwind Theme Variables

Open the main Tailwind theme configuration file where the @theme block is defined. This file controls all fonts, background colors, and UI color tokens.

/* Themes Config */
@theme {
    --font-body: "Inter", serif;
    --font-heading: "Instrument Sans", serif;

    --color-body-bg: #ffffff;
    ...
}

By changing these variables, all components using Tailwind utility classes like bg-primary , text-default-800 , or border-default-200 will update automatically.

Dark Mode Color Scheme

Dark mode is controlled using the .dark selector. When dark mode is active, the following variables override the default values.

.dark {
    --color-body-bg: #121519;
    --color-body-color: rgba(255, 255, 255, 0.7);

    ...
}

This ensures proper contrast and readability across all UI elements when dark mode is enabled.

Note: If your brand primary color does not provide enough contrast in dark mode, you may define a different primary color specifically for dark mode by overriding --color-primary inside .dark .

Summary

All colors are controlled via Tailwind CSS variables
Change colors in one place
Fully compatible with light & dark mode
No SCSS or Gulp required
Perfect for Vite + Tailwind workflows