Remix

Ready to remix your project with some dark mode flair? Dive into this guide and get your app groovin’ in the dark.

Remix Themes

Remix themes is a slick way to handle themes in your Remix app. Read more about it here.

In the terminal, run the following command to begin:
npm i remix-themes

Session Storage

And next, in your app/sessions.server.tsx file, add the following:

Providers

Next to add the ThemeProvider to your root layout like so:

export { Theme, useTheme } from 'remix-themes'

Action Route

Create a file in /routes/action.set-theme.ts. Make sure you pass the filename to the ThemeProvider component. This route stores the preferred theme in session storage when the user switches it up.

import { themeSessionResolver } from '@/sessions.server'
import { createThemeAction } from 'remix-themes'
 
export const action = createThemeAction(themeSessionResolver)

Theme Switcher

For theme switcher, you can use the useTheme hook from remix-themes to get the current theme.

In the terminal, run the following command to begin:
npm i hq-icons

Then, make sure you import the icons you want to use.

Button