Themes

Configure DaisyUI themes, enable data-theme switching, and make page colors follow the active theme.

1. Install DaisyUI

Install DaisyUI in the demo-client workspace so the theme tokens are available.

pnpm add -D daisyui

2. Enable DaisyUI in globals.css

These directives enable DaisyUI and make the dark variant respond to data-theme.

@import "tailwindcss";
@plugin "daisyui" {
  themes: all;
  logs: true;
}
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* Include component library classes */
@source "./**/*.{ts,tsx}";
@source "../node_modules/@featherstudio/react-daisyui-kit/**/*.{js,ts,tsx}";

Important: The two @source directives tell Tailwind to scan both the app and the component library for CSS classes. Without them, styles used only by components but not directly in your app may be purged during the build, causing styling issues or broken layouts. Always include both lines when using the component library.

3. Use ThemeProvider and ThemeSwitcher

The provider initializes the theme from localStorage and the switcher updates data-theme.

import { ThemeProvider, ThemeSwitcher } from "@featherstudio/react-daisyui-kit";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          <nav>
            <ThemeSwitcher />
          </nav>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

4. Bind page colors to theme tokens

If the page background or text stays fixed, it is usually because custom colors override DaisyUI tokens. Use the theme tokens for the body so the page follows data-theme.

body {
  background-color: hsl(var(--b1));
  color: hsl(var(--bc));
}

Troubleshooting

  • Verify the HTML element has data-theme set by ThemeSwitcher.
  • Make sure DaisyUI is installed in demo-client, not only in the package.
  • Do not hardcode background or text colors that override DaisyUI variables.
  • Keep the dark variant line in globals.css so dark styles follow data-theme.