Theming

Frontend Accelerator uses DaisyUI for theming, configured through the appConfig.ts file. This file specifies the theme name, for both the main website theme and also NextAuth.js (auth page) theme.

Best Practices for Theming

• Use semantic color tokens like primary, secondary, accent, neutral, rather than specific color values (e.g., #ff0000, or text-red-600). This makes it easier to switch themes without changing multiple styles.

• DaisyUI themes handle light and dark modes automatically, making customization simpler.

• NextAuth UI elements also adopt the theme specified in appConfig.ts

• You can customize themes via tailwind.config.ts and DaisyUI settings.

Check out all available themes: https://daisyui.com/docs/themes

Customizing Theme Colors

To customize the theme colors in DaisyUI, you need to update tailwind.config.ts In here you can overwrite different properties such as "primary" color. This way, generated classes, such as text-primary, bg-primary etc., will contain the overwritten value.

plugins: [require("daisyui")],
daisyui: {
  themes: [
    {
      // Override the main theme by copying it and changing only the primary color
      [config.theme.main]: {
        ...daisyThemes[config.theme.main],
        primary: "#00CFFF",
      },
    },
  ],
}

Dynamically Changing Themes

To programmatically change a theme, you need to first make sure it's registered within DaisyUI inside tailwind.config.ts file. In this case we want to switch between "emerald" and "autumn".

  daisyui: {
    themes: ["emerald", "autumn"],
  }

To switch between them dynamically, you need to set the data-theme attribute, to the theme you want. For example:

document.documentElement.setAttribute("data-theme", "emerald"); // for "emerald"

Dark Mode & Light Mode

While there are light or dark theme variants, they don't have it's own respective light or dark mode variant. Example, if you choose "emerald" there is no "emerald dark" equivalent. But you can achieve this by either:

• switching to a different theme, or a default DaisyUI dark or light theme

• or by modifying a current theme by creating it's dark or light equivalent

Example of creating a custom light theme from "dracula"

daisyui: {
    themes: [
      {
        draculaLight: {
          ...daisyThemes["dracula"],
          "base-100": "#ffffff", // Change background to light
          "base-200": "#f5f5f5", // Softer secondary background
          "base-content": "#333333", // Dark text for light mode
        },
      },
    ],
  },