What's the best and recommended way to implement global theming (e.g. light/dark mode) in a Wasp app
Should I handle it purely on the frontend (React context / Tailwind + localStorage), or is there a more idiomatic Wasp way to do it — maybe involving user preferences in the DB?
Would love to hear how others approached this 🙏
2 Replies
Hi @Aleksandar Okiljevic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Wasp does not currently provide a built-in, opinionated way to implement global theming (like light/dark mode) across your app. The recommended and most common approach is to handle theming on the frontend, using React context and/or Tailwind CSS, possibly with localStorage to persist the user's choice.
Frontend Approach (Recommended):
- Use Tailwind's dark mode support, which is well-documented and works seamlessly with React. You can toggle the dark mode class on the root element (e.g.,
<body> or a wrapper div) and use localStorage to remember the user's preference. This is the standard approach in the React/Tailwind ecosystem and is suggested by the Wasp community as well. See: Tailwind CSS Dark Mode docs (as referenced in community discussions) and Wasp Tailwind integration docs.
- You can define global CSS (e.g., in src/Main.css) and import it into your root React component, ensuring your theme styles are always loaded. This is a common pattern in Wasp projects and is supported by the framework's structure. See: Discord thread on editing body tags.
Persisting User Preferences (Optional, for Authenticated Users):
- If you want to persist theme preferences per user (e.g., so their choice syncs across devices), you can store the preference in your database using Prisma. This would involve adding a field to your User entity and updating it via a Wasp Action. This approach is not Wasp-specific but is possible and idiomatic given Wasp's use of Prisma for data modeling and storage. See: Discord thread on storing user settings.
Summary of Community Practice:
- Most Wasp users handle theming on the frontend with Tailwind and React, optionally persisting the choice in localStorage.
- For per-user persistence, store the preference in the DB and sync it on login.
There is no "Wasp magic" for theming yet—these approaches are in line with best practices in the React/Tailwind world and are fully supported by Wasp's architecture. If you want to see more first-class theming support in Wasp, consider opening a feature request!
Let me know if you want a code example for any of these approaches.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Aleksandar Okiljevic, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@Vinny (@Wasp) and @Fran implemented this using
localStorage in the Open SaaS template: https://opensaas.sh
The styling of the client should be kept in the browser IMHO and this is how I've seen others mostly do it. Wasp is just React + Node.js + Postgres, so anything that's idiomatic for those technologies, most of the time is the way to do it in Wasp 🙂