# Setting up the dark theme in Next.js Supabase SaaS Kit (Lite)

> How to set up the dark theme in Next.js Supabase SaaS Kit (Lite)

*Canonical: https://makerkit.dev/docs/next-supabase-lite/how-to/ui/dark-theme*

---

Makerkit supports by default a dark theme. With that said, you can decide to opt-out of the dark theme and use the light theme only instead using the configuration below.

## Using the dark theme by default

To use the dark theme by default, you need to edit the following configuration to your `src/configuration.ts` file:

 ```tsx {% title="src/configuration.ts" %}
{
  features: {
    enableThemeSwitcher: true,
  },
  theme: Themes.Dark,
}
```

Users can still opt-out of the dark theme by using the theme switcher in the top right corner of the page.

## Using only the dark theme

To switch to the dark theme, you need to edit the following configuration to your `src/configuration.ts` file:

 ```tsx {% title="src/configuration.ts" %}
{
  features: {
    enableThemeSwitcher: false,
  },
  theme: Themes.Dark,
}
```

## Disabling the dark theme

To disable the dark theme and only use the light theme - you need to edit the following configuration to your `src/configuration.ts` file:

 ```tsx {% title="src/configuration.ts" %}
{
  features: {
    enableThemeSwitcher: true,
  },
  theme: Themes.Light,
}
```

In the above, we flipped the `features.enableThemeSwitcher` flag to `false` and
set the `theme` to `Themes.Light`.