Customizing daisyUI looks and feels

daisyUI themes

One of the excellent features of daisyUI is its theming capabilities. The base daisyUI features 35 built-in themes that we can choose from.

We can import them all or simply providing one we want in the @plugin directive:

@import "tailwindcss";
@plugin "daisyui" {
  themes: all;
}

Switching themes is as easy as providing a data-theme attribute. We can also nest them and switch styling on the fly:

<html data-theme="dark">
  <div data-theme="light">
    This div will always use light theme
    <span data-theme="retro">This span will always use retro theme!</span>
  </div>
</html>

Customized themes

If none of the base themes are enough, we can redo their styling with CSS variables. Here's a small example from the documentation:

@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
  name: "mytheme";
  default: true; /* set as default */
  prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
  color-scheme: light; /* color of browser-provided UI */

  --color-base-100: oklch(98% 0.02 240);
  --color-base-200: oklch(95% 0.03 240);
  --color-base-300: oklch(92% 0.04 240);
  --color-base-content: oklch(20% 0.05 240);
  --color-primary: oklch(55% 0.3 240);
  --color-primary-content: oklch(98% 0.01 240);
  --color-secondary: oklch(70% 0.25 200);
  --color-secondary-content: oklch(98% 0.01 200);
  --color-accent: oklch(65% 0.25 160);
  --color-accent-content: oklch(98% 0.01 160);
  --color-neutral: oklch(50% 0.05 240);
  --color-neutral-content: oklch(98% 0.01 240);
  --color-info: oklch(70% 0.2 220);
  --color-info-content: oklch(98% 0.01 220);
  --color-success: oklch(65% 0.25 140);
  --color-success-content: oklch(98% 0.01 140);
  --color-warning: oklch(80% 0.25 80);
  --color-warning-content: oklch(20% 0.05 80);
  --color-error: oklch(65% 0.3 30);
  --color-error-content: oklch(98% 0.01 30);

  /* border radius */
  --radius-selector: 1rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;

  /* base sizes */
  --size-selector: 0.25rem;
  --size-field: 0.25rem;

  /* border size */
  --border: 1px;

  /* effects */
  --depth: 1;
  --noise: 0;
}

There is handy a theme generator available to easily make a variant of an existing theme.

Simple in-place styling

daisyUI is built on top of Tailwind and while the main components come as simple CSS classes, their further adjustment is up to you. Given we are in a Tailwind land, we can always add Tailwind utility classes to adjust the final look of any component:

<div class="p-8">
  <button class="btn px-20">px-20</button>
  <button class="btn italic">italic</button>
  <button class="btn text-xl">text-xl</button>
  <button class="btn btn-outline border-red-500">btn-outline border-red-500</button>
</div>

Nested styles

To freely customize nested styles, plain utility classes won't work and you might need to open Developer Tools in your browser to find the right styles being applied and override it:

.checkbox {
  &:checked, &[aria-checked="true"] {
    background-color: lightgreen;
  }
}

Redesiged components

If overriding is not enough and you need to completely replace a component by building it from scratch or from daisyUI sources, you can exclude a component from your CSS and then redefine it later:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default;
  exclude: toggle;
}

@layer components {
  .toggle {
    rotate: -90deg;

    /* rest of styling here */
  }
}

And that's pretty much it. Hopefully that's all you'll need to work with daisyUI on more challenging assignments. I would like to thank Pouya, author of daisyUI, for providing me some of these examples.