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

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 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 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:

npm install -D daisyui

Then update your tailwind.config.cjs:

/** @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.

<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. These variables follow the pattern --color-{name} and --color-{name}-content.

<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:

<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 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.

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

The color palette is generated in 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 and applying them via the data-theme attribute.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}