Setting up the dark theme in Next.js Firebase

How to set up the dark theme in Next.js Firebase SaaS Kit

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:

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:

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:

src/configuration.ts

{
 features: {
   enableThemeSwitcher: false,
 },
 theme: Themes.Light,
}

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

Detecting the current theme

To detect the currently selected theme, you can use the following snippet:

import { ThemeContext } from '~/core/contexts/theme';
<ThemeContext.Consumer>
  {(theme) => {
     const isDark = theme === 'dark';
  }
</ThemContext.Consumer>