# How to Access DaisyUI Color Variables: CSS Custom Properties and Utility Classes

> Learn to access DaisyUI color variables using CSS custom properties like var(--color-primary) or utility classes such as bg-primary. Master DaisyUI theming easily.

- Repository: [Pouya Saadeghi/daisyui](https://github.com/saadeghi/daisyui)
- Tags: how-to-guide
- Published: 2026-07-10

---

**DaisyUI color variables are CSS custom properties defined in theme files (e.g., `--color-primary`, `--color-base-100`) that you can access via utility classes like `bg-primary` or directly through `var(--color-primary)` in your CSS.**

DaisyUI is a popular Tailwind CSS component library that uses semantic color naming to maintain consistent design tokens across themes. Understanding how to access DaisyUI color variables allows you to customize components while preserving automatic dark mode support and theme switching capabilities.

## How DaisyUI Color Variables Work

DaisyUI implements a semantic color system where abstract names like `primary`, `secondary`, and `base-100` map to CSS custom properties. According to the [saadeghi/daisyui](https://github.com/saadeghi/daisyui) source code, each theme ships with a dedicated CSS file that declares these variables. The [[`generateColorRules.js`](https://github.com/saadeghi/daisyui/blob/main/generateColorRules.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/generateColorRules.js) function then processes these definitions to create Tailwind utility classes that reference the underlying CSS variables.

## Where Color Variables Are Defined

### Theme Source Files

The actual CSS custom properties live in the theme definition files. For example, [[`packages/daisyui/src/themes/light.css`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/themes/light.css)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/src/themes/light.css) sets `--color-primary` and related variables, while [[`packages/daisyui/src/themes/dark.css`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/themes/dark.css)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/src/themes/dark.css) provides dark mode equivalents. These files define the complete color palette including background colors (`--color-base-100`), content colors (`--color-base-content`), and semantic colors (`--color-primary`, `--color-secondary`).

### Color Generation Logic

The mapping between semantic names and CSS variables happens in [[`packages/daisyui/functions/generateColorRules.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/generateColorRules.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/generateColorRules.js). This function generates the Tailwind rules that bind utility classes to the CSS custom properties. When the plugin loads (via [[`packages/daisyui/functions/plugin.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/plugin.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/plugin.js)), it reads the theme files and creates utilities like `bg-primary` and `text-primary` that internally resolve to `var(--color-primary)`.

## How to Access Color Variables in Your Code

### Using Utility Classes

The primary method for accessing DaisyUI color variables is through the generated utility classes.

```html
<button class="btn btn-primary">Primary Button</button>

<div class="bg-base-100 text-base-content border-base-300 p-6">
  Themed container with semantic colors
</div>

```

These classes automatically reference the underlying CSS variables defined in the active theme.

### Direct CSS Variable Access

For custom styling outside the utility class system, reference the CSS custom properties directly.

```html
<div style="background-color: var(--color-primary); color: var(--color-primary-content);">
  Custom component using raw CSS variables
</div>

```

This approach is useful when you need precise control or are writing custom CSS in a stylesheet:

```css
.custom-card {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  color: var(--color-base-content);
}

```

### Opacity Modifiers

DaisyUI supports opacity modifiers on color utilities, which internally manipulate the CSS variable values.

```html
<div class="bg-primary/50 text-primary-content">
  Semi-transparent primary background
</div>

```

## Theme Switching and Runtime Access

DaisyUI color variables update automatically when you switch themes using the `data-theme` attribute. The [[`plugin.js`](https://github.com/saadeghi/daisyui/blob/main/plugin.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/plugin.js) file registers these utilities with Tailwind, ensuring that changing themes updates all CSS variables instantly.

```html
<body data-theme="dracula">
  <div class="bg-base-100 text-base-content">
    Automatically uses Dracula theme colors
  </div>
</body>

```

The semantic naming ensures that `bg-primary` maps to the correct value regardless of which theme is active.

## Summary

- DaisyUI defines **color variables** as CSS custom properties in theme files like [[`packages/daisyui/src/themes/light.css`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/themes/light.css)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/src/themes/light.css)
- The [[`generateColorRules.js`](https://github.com/saadeghi/daisyui/blob/main/generateColorRules.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/generateColorRules.js) function creates Tailwind utilities that map to these variables (e.g., `bg-primary` → `var(--color-primary)`)
- Access colors via **utility classes** for standard usage or **CSS variables** directly for custom styling
- Use **opacity modifiers** like `bg-primary/50` for transparency control
- Colors update automatically when switching themes using the `data-theme` attribute

## Frequently Asked Questions

### What are the available semantic color names in DaisyUI?

DaisyUI provides semantic colors including `primary`, `secondary`, `accent`, `neutral`, `info`, `success`, `warning`, `error`, and base colors like `base-100`, `base-200`, `base-300`, `base-content`. Each semantic name has a corresponding CSS variable (`--color-{name}`) and content color (`--color-{name}-content`). The full list is documented in the [colors documentation](https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/colors/+page.md).

### Can I use DaisyUI color variables without the utility classes?

Yes. You can reference the CSS custom properties directly using `var(--color-primary)` or any other semantic name. These variables are defined in the theme CSS files and are available globally once the theme is loaded, making them accessible in external stylesheets or inline styles.

### How do I change the opacity of a DaisyUI color variable?

Use Tailwind's opacity modifier syntax on the utility class, such as `bg-primary/50` or `text-secondary/75`. This applies the color at the specified opacity level while maintaining the underlying CSS variable reference.

### Where are the color variables defined in the DaisyUI source code?

Theme-specific color variables are defined in [[`packages/daisyui/src/themes/light.css`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/themes/light.css)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/src/themes/light.css) and [[`packages/daisyui/src/themes/dark.css`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/src/themes/dark.css)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/src/themes/dark.css) (among other theme files). The logic that generates Tailwind utilities from these variables is located in [[`packages/daisyui/functions/generateColorRules.js`](https://github.com/saadeghi/daisyui/blob/main/packages/daisyui/functions/generateColorRules.js)](https://github.com/saadeghi/daisyui/blob/master/packages/daisyui/functions/generateColorRules.js).