Welcome! This is a demo of how to control dark, light, and system themes in Remix SSR without flash. Taking advantage of client-hints and learnt a lot from 2024 Remix dark mode.
Using @epic-web/client-hints (I copied only color-schema part of this package) to get prefers-color-scheme before sending the first response. (Which will be stored in the cookie with request)
Read client hint cookie from loader and directly add theme to <html> in /app/root.tsx/Layout component, if there are no custom-theme cookie set.
*Fallbakc theme is set in useCookieTheme()
Set theme responsively by changing theme context (Using React Context, instruction: Shadcn Dark mode(vite)). Then set custom-theme cookie when user manually choose either dark or light, delete when system is chosen. Finally revalidate() to get new cookie set.
Run the dev server:
npm run dev
First, build your app for production:
npm run buildThen run the app in production mode:
npm startNow you'll need to pick a host to deploy it to.
If you're familiar with deploying Node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of npm run build
build/serverbuild/client
This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever css framework you prefer. See the Vite docs on css for more information.