daisyFT
On this page Overview

Themes in DaisyFT

Learn how to use, customize, and create themes in your DaisyFT applications.

Comprehensive guide to theming your FastHTML applications with DaisyUI.

Overview

DaisyFT leverages DaisyUI's powerful theming system to provide a flexible and customizable way to style your applications. The approach to using and customizing themes differs based on how you've installed DaisyFT.

Using Themes with CLI/Manual Setup

If you're using DaisyFT through the CLI or Manual Setup (recommended approach), themes are configured in your input.css file:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --preferslight, dark --prefersdark, cyberpunk, retro;
}

/* Enable Tailwind's dark mode for specific themes */
@variant dark (&:where([data-theme=dark], [data-theme=dark] *));

Then set your chosen main theme in your FastHTML application:

app, rt = fast_app(
    # ... other settings ...
    htmlkw=dict(lang="en", dir="ltr", data_theme="cyberpunk"),
    # ... other settings ...
)

This approach allows you to:

  • Specify which themes to include (reducing CSS size)
  • Set default themes with --preferslight and --prefersdark
  • Create custom themes directly in your CSS
  • Map Tailwind's dark: utilities to specific themes

Using Themes with CDN

If you're using the CDN approach, the default DaisyUI CSS (daisyui.css) includes light and dark themes by default. To use additional themes, you'll need to include an extra stylesheet:

Including Additional Themes

To access all DaisyUI themes (like cyberpunk, retro, etc.), include the themes.css file:

# Add this with your other imports
themes_link = Link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/[email protected]/themes.css", type="text/css")

# Update your headers to include the themes
app, rt = fast_app(
    # ...other settings
    hdrs=(daisylink, themes_link, tw_styles),  # daisylink already includes light/dark themes
    htmlkw=dict(lang="en", dir="ltr", data_theme="cyberpunk"),  # Now you can use any theme
    # ...other settings
)

Creating Custom Themes

With CDN setup, custom themes are defined using a Style component:

# Add this with your other imports
custom_styles = Style(
    """
:root[data-theme="mytheme"] {
  color-scheme: "dark";
  --color-base-100: oklch(13% 0.028 261.692);
  --color-base-200: oklch(21% 0.034 264.665);
  --color-base-300: oklch(27% 0.033 256.848);
  --color-base-content: oklch(96% 0.003 264.542);
  --color-primary: oklch(59% 0.249 0.584);
  --color-primary-content: oklch(97% 0.014 343.198);
  --color-secondary: oklch(64% 0.222 41.116);
  --color-secondary-content: oklch(98% 0.016 73.684);
  --color-accent: oklch(78% 0.154 211.53);
  --color-accent-content: oklch(30% 0.056 229.695);

  /* Add other variables as needed */
}
""",
    type="text/tailwindcss"
)

# Add the custom style to your headers
app, rt = fast_app(
    # ...other settings
    hdrs=(daisylink, tw_styles, custom_styles),
    htmlkw=dict(lang="en", dir="ltr", data_theme="mytheme"),
    # ...other settings
)

Theme Generator

For help creating custom themes, DaisyUI offers a Theme Generator that allows you to visually create and export theme variables. The generated CSS can be used in either your input.css file (CLI/Manual setup) or Style component (CDN setup).

Next Steps

Now that you understand theming in DaisyFT, explore these resources:

© 2025 DaisyFT