How can I fix the issue with Webflow sites not displaying properly in Samsung Browser's dark mode?
TL;DR
- Add
<meta name="color-scheme" content="only light">in the page head and:root { color-scheme: light; }in CSS to prevent Samsung Browser from forcing dark mode. - Use media queries like
@media (prefers-color-scheme: dark)for optional custom dark mode and avoid transparent backgrounds to reduce rendering issues.
Webflow sites can appear broken or have unexpected colors in Samsung Browser’s dark mode due to forced color inversion or auto dark mode rendering. You can resolve this by disabling or customizing dark mode behavior using CSS settings.
1. Understand the Cause
- Samsung Internet applies forced dark mode by default, even if your site wasn’t designed for it.
- This can interfere with predefined Webflow styles, especially background colors, text color, and image blending.
2. Use color-scheme CSS to Signal Theme Intent
Add the meta tag and CSS rule to indicate your site works best in light mode:
In Webflow, go to Page Settings, scroll to Inside tag, and add:
<meta name="color-scheme" content="only light">Then, in Page Settings > Inside