This example shows how to use shadcn/ui components along with remix-themes to store the preferred color scheme in the session and let the user manually switch between light and dark mode.
Note
This example uses Remix v2.
Open this example on CodeSandbox:
This example uses shadcn/ui components. They are stored in the app/components/ui folder.
In the root loader, we retrieve the preferred color scheme from the session. We pass it to the ThemeProvider from remix-themes. Switching the color scheme is achieved by using the useTheme hook from remix-themes and calling an action on /action/set-theme, which will update the session.
:root[class~="dark"] is added to the app/tailwind.css to be able to use the dark class on the html element to apply the dark mode styles.
The configuration for the shadcn/ui components is stored in components.json. New components can be added with:
npx shadcn-ui@latest add <component-name>