Dark & Light modes

Light & Dark modes are included, and enabled by default, saving you more time.

Light/dark modes switch automatically based on prefers-color-scheme, e.g. if a user has dark-mode enabled on their computer system settings, the dark theme will be provided and visa-versa.

Forcing modes

You can opt out of the default behaviour by changing a few props, for example to make dark mode the default, and only theme, do this:

Step 1

Open up the file: @/components/Providers.tsx

Step 2

Change the following props

<ThemeProvider
  attribute="class"
  forcedTheme="dark"
  enableSystem={false}
>
{children}
</ThemeProvider>