Styling & Themes

The app starts with DaisyUI’s Silk base: warm ivory surfaces and taupe text, with Ghoststack’s purple branding and the Outfit font. It uses DaisyUI components and semantic theme colors, with Tailwind layout utilities. Configure the app theme in app/globals.css and fonts in app/layout.tsx; email styles are separate. The hosted guides use Geist and their own light/dark switch.

Browse Themes

Browse DaisyUI's available themes. Explore them here:

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

Example options: silk, light, dark, cupcake, corporate, nord, winter

Where to Change It

The theme is configured in app/globals.css:

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

@plugin "daisyui/theme" {
  name: "silk";
  default: true;
  --color-primary: oklch(45% 0.24 277.023);
  --color-primary-content: oklch(93% 0.034 272.788);
}

The first block loads Silk. The second keeps its other colors and settings while replacing the main accent and its text color with Ghoststack purple and light text.

To change themes, update silk in both blocks. Keep the second block if you want the purple accent, or remove it to use your new theme’s own accent colors. For example, to load the stock Light theme, the first block’s themes setting would be:

themes: light --default;

Note: The --default flag tells DaisyUI which theme to use. Keep it on your chosen theme, and keep the override block’s name consistent if you retain that block.

Keep the theme settings consistent: app/layout.tsx sets data-theme="silk". Update that value too. An explicit data-theme takes precedence over the default.

To change the main font, update the font loaded in app/layout.tsx, then update the --font-sans mapping and the body font family in app/globals.css to use the same variable. Both currently use --font-outfit. Email fonts use local system fallbacks for reliable delivery.

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 the local URL printed in the terminal. Save your change, inspect the page, and reload to check the initial appearance too.

Give your agent current DaisyUI docs

In Codex, Claude Code, or Cursor, ask: “Read https://daisyui.com/llms.txt and use DaisyUI syntax that matches the installed version.” Use ordinary URLs; editor-specific mention syntax is optional. Avoid copying the entire library manual into always-loaded project rules; a current reference can be read when a task needs it.

Prompt Templates

Change the Theme

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

Read AGENTS.md and the existing theme settings first. Use DaisyUI components,
semantic colors, and Tailwind layout utilities. Check https://daisyui.com/docs/themes/
when needed, matching the installed version in package.json.

Update app/globals.css to use this theme. Keep its theme name and any color-override
block consistent. Check app/layout.tsx for an explicit data-theme and update it too.
Keep my existing brand accent unless I ask to change it.
This is a default-theme change; do not add a theme selector.

Reload the app and check readable text, buttons, inputs, keyboard focus, and error
states on desktop and mobile. If the brand accent changes, identify matching icon
and email updates and complete those using the existing asset approach.

Add Dark Mode Toggle

The starter uses one theme. Add a toggle only if your app needs one; changing the default theme above is enough otherwise.

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

Themes: [LIGHT THEME] and [DARK THEME]
Default for a first visit: [ONE OF THESE THEMES]

Read AGENTS.md, app/globals.css, app/layout.tsx, and components/header.tsx.
Use DaisyUI components, semantic colors, and Tailwind layout utilities. Check
https://daisyui.com/docs/themes/ for syntax that matches the installed version.

Add a small keyboard-operable control with an accessible label and clear selected
state. Preserve the header's navigation and auth behavior. Remember the choice
in a cookie and read it on the server for the initial html data-theme; accept only
the two configured themes. Keep the server-rendered page and client state consistent.

Check a first visit, both choices, and a full reload: the chosen theme should appear
from the first paint without a flash or hydration warning. Test the control with
the keyboard and check text and input contrast in both themes.

Use Multiple Themes

I want users to choose from multiple themes.

Available themes: [LIST THEMES, e.g., "light, dark, cupcake, corporate"]
Default: [ONE OF THE LISTED THEMES]
Control location: [EXISTING HEADER OR SETTINGS PAGE]

Read AGENTS.md and the existing theme code first. Reuse any existing theme control
and keep one source of saved preference. Use a labeled native select
styled with DaisyUI, semantic colors, and Tailwind layout utilities.

Remember the selected theme in a cookie and read it on the server for the initial
html data-theme. Accept only configured theme names and use the default when no
valid preference exists. Keep the server render and client state consistent.

Check https://daisyui.com/docs/themes/ when needed. Test selection with the keyboard,
every theme's text and form contrast, and a full reload: the saved choice must appear
from the first paint without a flash or hydration warning.

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]

Read AGENTS.md and the existing theme configuration. Update app/globals.css using
DaisyUI semantic color tokens, including readable matching *-content colors for
any changed background tokens. Preserve unrelated theme settings.

Check https://daisyui.com/docs/themes/ when needed. Verify the actual buttons, alerts,
inputs, and keyboard focus on light and dark surfaces used by this app. If a supplied
color makes text unreadable, explain and suggest a nearby accessible alternative.

Testing

Open the landing page, login form, and dashboard on desktop and mobile. Check text, inputs, error messages, and keyboard focus on each surface.
Reload the page to check its initial theme, not just the appearance after a saved edit.
If you added a theme control, use it with the keyboard, choose each theme, and reload. The saved choice should appear immediately without a flash or hydration warning.

On this page