# How to Use DaisyUI Colors in Svelte: Complete Guide with Examples

> Learn how to use DaisyUI colors in Svelte with this complete guide. Apply Tailwind CSS utility classes directly to Svelte elements for stunning UIs without complex setup. Get started now.

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

---

**DaisyUI colors are Tailwind CSS utility classes that you apply directly to Svelte elements using standard class names like `bg-primary` and `text-secondary`, requiring no additional Svelte-specific configuration beyond the standard Tailwind CSS setup.**

DaisyUI is a popular Tailwind CSS plugin that provides semantic color utilities for rapid UI development. In the saadeghi/daisyui repository, colors are defined as CSS custom properties in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js) and exposed through Tailwind-compatible utility classes. This guide shows you how to leverage these color utilities in Svelte components using the exact implementation details found in the source code.

## Understanding DaisyUI's Color Architecture

### How Colors Are Defined in the Source

According to the saadeghi/daisyui source code, color definitions reside in specific configuration files. The `tailwind.config.cjs` file registers DaisyUI as a plugin, while [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js) contains the generated CSS variables that power the color system. These files inject semantic color tokens like `--color-primary` and `--color-primary-content` into your stylesheet.

The documentation in `packages/docs/src/routes/(routes)/docs/colors/+page.md` lists the available semantic colors: primary, secondary, accent, neutral, info, success, warning, and error. Each color has corresponding background (`bg-*`), text (`text-*`), and border (`border-*`) utilities defined in `packages/docs/src/routes/(routes)/docs/utilities/+page.md`.

### Semantic Color Utilities

DaisyUI exposes colors through standard Tailwind utility classes. The plugin extends your Tailwind configuration to include:
- **Background utilities**: `bg-primary`, `bg-secondary`, `bg-accent`, `bg-neutral`, `bg-base-100`, `bg-base-200`, `bg-base-300`
- **Text utilities**: `text-primary`, `text-primary-content`, `text-secondary`, `text-base-content`
- **Border utilities**: `border-primary`, `border-secondary`

## Configuring DaisyUI for Svelte

Before using colors, ensure your project is set up correctly. Install DaisyUI via npm and add it to your Tailwind configuration:

```bash
npm install -D daisyui

```

Then update your `tailwind.config.cjs`:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')],
}

```

## Applying DaisyUI Colors in Svelte Components

Once configured, apply DaisyUI colors directly to elements using Tailwind class names. The utilities work identically in Svelte components as they do in regular HTML, as implemented in the DaisyUI source.

```svelte
<script>
  // No special imports required for colors
</script>

<!-- Primary button using DaisyUI semantic colors -->
<button class="btn btn-primary">
  Click me
</button>

<!-- Card with theme colors -->
<div class="card bg-base-200 shadow-xl">
  <div class="card-body">
    <h2 class="card-title text-primary">Card Title</h2>
    <p class="text-base-content">Content using base colors</p>
    <button class="btn btn-secondary">Secondary Action</button>
  </div>
</div>

```

## Using CSS Variables for Custom Styling

For dynamic theming or custom styling, reference the underlying CSS variables defined in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js). These variables follow the pattern `--color-{name}` and `--color-{name}-content`.

```svelte
<div class="custom-container">
  Custom styled content
</div>

<style>
  .custom-container {
    background-color: var(--color-primary);
    color: var(--color-primary-content);
    border: 2px solid var(--color-secondary);
    padding: 1rem;
    border-radius: 0.5rem;
  }
</style>

```

## Theme Switching in Svelte Applications

DaisyUI supports multiple themes controlled via the `data-theme` attribute. Apply this to a parent element to change the color palette for all children, as documented in the color utilities reference:

```svelte
<div data-theme="retro">
  <div class="card w-96 bg-base-200 shadow-xl">
    <div class="card-body">
      <h2 class="card-title text-primary">Retro Theme</h2>
      <p class="text-base-content">This card uses retro color variables</p>
      <button class="btn btn-accent">Accent Button</button>
    </div>
  </div>
</div>

```

## Summary

- DaisyUI colors are implemented as Tailwind CSS utility classes in the saadeghi/daisyui repository
- Color definitions reside in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js) and are configured via `tailwind.config.cjs`
- Apply colors in Svelte using standard class names like `bg-primary` and `text-secondary`
- Access underlying values via CSS variables such as `var(--color-primary)` for custom styling
- Switch themes by setting the `data-theme` attribute on parent elements

## Frequently Asked Questions

### Do I need a special Svelte integration for DaisyUI colors?

No. DaisyUI operates as a Tailwind CSS plugin, so once you configure Tailwind in your Svelte project, the color utilities work automatically. Simply apply classes like `bg-primary` to your HTML elements, and the styles compile through your standard Tailwind pipeline.

### Can I use DaisyUI colors with Svelte's style directive?

Yes. You can reference DaisyUI's CSS variables directly in your component styles. For example, use `background-color: var(--color-primary)` in a `<style>` block or inline styles to access the theme colors programmatically, leveraging the variables defined in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js).

### Where are the color definitions stored in the DaisyUI source code?

The color palette is generated in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js), which defines CSS custom properties like `--color-primary` and `--color-primary-content`. The Tailwind configuration in `tailwind.config.cjs` registers these as utility classes, and the documentation in `packages/docs/src/routes/(routes)/docs/colors/+page.md` provides the complete reference.

### How do I customize the default color palette in Svelte?

Modify your `tailwind.config.cjs` to extend the theme colors or override DaisyUI's defaults. You can also create custom themes by defining new CSS variables in your global stylesheet, following the naming convention established in [`packages/bundle/daisyui-theme.js`](https://github.com/saadeghi/daisyui/blob/main/packages/bundle/daisyui-theme.js) and applying them via the `data-theme` attribute.