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.

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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.

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

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

If you spot typos or wrong implementations, feel free to contribute here.