Setting up the dark theme in Makerkit
How to set up the dark theme in Makerkit
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:
{ 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:
{ 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:
{ 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>