colors/styling not changing for webapp when changing to dark mode.
When changing to dark mode the colors aren't changing properly for the webapp I build with mage AI. the background stays white and somet text does change but becomes white for some reason. how can I change this styling?
10 Replies
Hi @Hugoo. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, it seems like you're experiencing an issue with the styling of your web app when switching to dark mode. This issue has been encountered before in the Wasp framework, particularly with the documentation pages.
One of the solutions suggested in a Github issue (https://github.com/wasp-lang/wasp/issues/1181) was to create a component and assign it a class variable that is defined for both dark and light themes. This way, when the theme is switched, the text color will get automatically changed. Here's an example of how it was done in Wasp: https://github.com/wasp-lang/wasp/blob/main/web/src/css/custom.css#L86
Another solution was to use bold text instead of background color, which might be a quicker fix.
If you're using a CSS framework like Material UI or Tailwind CSS, you might need to be aware of the possible interactions your base settings may have with these frameworks. This was mentioned in another Github issue (https://github.com/wasp-lang/wasp/issues/568).
If you're still having trouble, it might be helpful to review the generated CSS and make a plan for it moving forward. You can find some of the CSS files in these locations:
- data/Generator/templates/react-app/src/index.css
- data/Generator/templates/react-app/public/index.html
Please note that these solutions are based on the Wasp framework and might not directly apply to your Mage AI web app. If you're still having trouble, I would recommend reaching out to the Mage AI support for more specific guidance.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Hugoo, 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?
Hey @Hugoo, let's see if I can help you out.
First question, how do you change to dark mode?
Hey thank you!
I’m changing colors with the default switch on the top right in the NavBar
Im planning on using unstyled react components so I can style them myself and I think that should do the trick
Wohooo @Hugoo, you just became a Waspeteer level 4!
Did you use the Tailwind classes with the
dark: prefix? That's needed in order to get things to change to the dark variant when dark mode is enabled.Hm, but this is Mage, not OpenSaas. I'm guessing that the
dark: prefix doesn't apply then, or does it?dark: is a Tailwind concept that exists in both Mage and Open SaaS 🙂 https://tailwindcss.com/docs/dark-modeDark Mode - Tailwind CSS
Using Tailwind CSS to style your site in dark mode.
Ooh, right!
Then @Hugoo, I'm guessing mage perhaps forgot to add the prefix
ah okay thanks will look into it!
yep looks like this was the issue haha 😁
Glad you figured it out! The perks of working with AI I guess 🙂