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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://accelerator.gitbook.io/docs/extra/theming.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.