> For the complete documentation index, see [llms.txt](https://accelerator.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://accelerator.gitbook.io/docs/extra/theming.md).

# Theming

Frontend Accelerator uses [**DaisyUI**](https://daisyui.com/docs/themes/) for theming, configured through the `appConfig.ts` file. This file specifies the theme name, for both the main website theme and also [**NextAuth.js**](https://next-auth.js.org/getting-started/example) (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](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.

```typescript
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".

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

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

```typescript
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"

```typescript
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
        },
      },
    ],
  },
```