Remix

Remix Themes

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

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.

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