Styling & Themes

Before we start building out our app, lets first configure our page styling. We use DaisyUI across the entire repository. It provides beautiful, pre-built components and is incredibly simple to use for the AI. DaisyUI comes with 32+ stunning themes out of the box, and you can even create your own custom themes if you want to.

Browse Themes

DaisyUI includes 32+ beautiful themes. Explore them here:

All Themes: daisyui.com/docs/themes
Create Your Own: daisyui.com/theme-generator

Popular options: light, dark, dracula (default), cupcake, corporate, synthwave, forest

Where to Change It

The theme is configured in app/globals.css:

@plugin "daisyui" {
  themes: dracula --default;
}

Simply change dracula to any DaisyUI theme name:

/* Soft and playful */
themes: cupcake --default;

/* Fresh and bright */
themes: lemonade --default;

/* Clean and professional */
themes: corporate --default;

/* Retro vibes */
themes: synthwave --default;

Note: The --default flag tells DaisyUI which theme to use. Don't remove it — just swap out the theme name.

Docs have separate styling: This theme setting only affects your app pages. The /docs section has its own styling — see Extras: Documentation for customizing docs.

Tip: Find files faster by pressing Ctrl+P (Windows/Linux) or Cmd+P (Mac), then type "globals.css" and press Enter.

To see your changes, run npm run dev and open localhost:3000. The page auto-updates when you save — no need to refresh.

Set Up DaisyUI Docs for AI

To help your AI generate accurate DaisyUI code, give it access to the DaisyUI documentation.

Cursor

Option 1: Per-prompt (simple)

Add @web https://daisyui.com/llms.txt to any prompt. This fetches the docs each time.

Option 2: Permanent setup (recommended)

Save the docs locally so Cursor always has access:

curl -L https://daisyui.com/llms.txt --create-dirs -o .cursor/rules/daisyui.mdc

Now Cursor automatically includes DaisyUI docs in every prompt — no need to add @web each time.

Claude Code

The @web approach doesn't work reliably in Claude Code. Instead, save the docs locally:

curl -L https://daisyui.com/llms.txt -o daisyui-docs.md

Then reference the file in your prompts with @daisyui-docs.md.

Tip: Add daisyui-docs.md to your .gitignore if you don't want to commit it.

Prompt Templates

Change the Theme

I want to change my app's theme to [THEME NAME].

Please update app/globals.css to use this theme.
Follow the styling guidelines in @CLAUDE.md.

Add Dark Mode Toggle

I want to add a dark/light mode toggle to my app.

Please:
1. Create a theme toggle component
2. Add it to the header
3. Store the user's preference in localStorage
4. Apply the theme on page load
5. Use two DaisyUI themes: [LIGHT THEME] and [DARK THEME]

Make the toggle button simple - just a sun/moon icon.
If needed check out the daisyUI theme docs at https://daisyui.com/docs/themes/
UI: daisyUI ONLY (no custom CSS, no other libs). @web https://daisyui.com/llms.txt

Use Multiple Themes

I want users to choose from multiple themes.

Available themes: [LIST THEMES, e.g., "light, dark, cupcake, dracula"]

Please:
1. Create a theme selector dropdown
2. Add it to settings page (or header)
3. Store preference in localStorage
4. Apply on page load

Use DaisyUI dropdown component.

If needed check out the daisUI theme docs at https://daisyui.com/docs/themes/

Customize Colors Within a Theme

I want to keep the [THEME] theme but customize some colors.

Changes I want:
- Primary color: [COLOR]
- Secondary color: [COLOR]
- Accent color: [COLOR]

Please update app/globals.css with custom theme colors.

If needed check out the daisUI theme docs at https://daisyui.com/docs/themes/

Testing

After changing themes:

Check all pages look correct
Test light and dark modes (if applicable)
Check text is readable on all backgrounds

On this page