I’ve implemented a native Light/Dark mode in my WeWeb app using variables (based on globalContext.browser?.['theme']). It works perfectly on desktop and in the editor.
However, on many Android devices (especially using Chrome and Samsung Internet), the browser’s “Force Dark Mode” feature is overriding my custom UI. Instead of using my dark theme colors, the browser applies its own aggressive color inversion, turning whites into blue/navy tints and messing up the contrast of my elements.
Has anyone found a definitive way to tell mobile browsers to stop applying their own dark mode filters and strictly follow the app’s CSS? Is there a specific WeWeb setting or a more robust boilerplate for the Custom HTML to handle this?
Ha! Great question! My guess is you’ll need to add some custom code to add instructions that force the browser to use the set theme. Let me ask the tech team and get back to you on this one.
Thanks for looking into that! I’ll be looking forward to hearing what the tech team says. This fix is quite important for my project, so I’m eager to get it sorted. If there’s anything you need me to do or test on my end, just let me know!
Hi Aneeq, that sounds great. You have my permission to publish and test the changes on my project. It’s still in the development stage, so feel free to go ahead. Looking forward to the results!
This returns true if the browser is set to a dark mode preference; false if the browser is set to a light mode preference.
Based on that, we can create an App Trigger (Workflows > App triggers > Add) - it loads at app load time. We check true/false and accordingly change the theme of the app. I’ve created this in your application and it seems to work. (check screenshot for workflow)
You can test this on chrome using: Dev Tools > (3 dots top-right) > More tools > Rendering> Emulate CSS media feature preferes-color-scheme. Switch the color scheme and refresh - you will see your natively defined dark mode colors instead of the browser choosing for you.
Looks like forced dark mode at the browser level is still an experimental feature - it’s possible it doesn’t get enforced like it has been right now. You might have to change implementations if the browsers update this feature
This has been tested on Chrome only. You can test it on other browsers and change the custom JS as per your experience
I saw you had a bunch of custom code in your header trying to fix this. You can clean up that up now (mainly the part relating to dark mode), I don’t think that’s beneficial.
Thanks for the workaround! It works perfectly on Chrome.
However, I noticed a specific issue with the Samsung Internet Browser. It has a “Night Mode” feature that behaves very aggressively. No matter if the app is set to light or dark theme, this browser setting forces a dark mode that distorts and “breaks” the colors, ignoring the native design.
I’ve already started cleaning up the custom code in the header as you suggested, but it seems this Samsung feature bypasses the standard prefers-color-scheme logic.
Do you have any experience or suggestions on how to “shield” the CSS against this forced inversion specifically for Samsung devices?
