Search Atlas Help Center

Fixing Inverted Colors in Website Studio: Chrome Dark Theme Setting

Open in
View as Markdown Open in ChatGPT Open in Claude
Camilo Aponte

Camilo Aponte

Last updated on Sep 30, 2026

Overview

If colors in your Website Studio preview or editor look inverted, washed out, or completely wrong in Chrome — but appear correctly in other browsers — the cause is almost always Chrome's Auto Dark Mode or dark theme setting. Chrome can automatically force dark styling onto web pages, which overrides the design choices you've made in Website Studio and makes colors appear flipped.

The fix takes less than a minute: switch Chrome to the light theme. This article walks you through how to confirm the cause, fix it, and what to do if the issue continues.

Why This Happens

Chrome has a feature that automatically applies a dark color scheme to websites based on your operating system or browser theme. When this is enabled, Chrome rewrites the colors of page elements on the fly. In Website Studio, this can cause:

  • Backgrounds appearing as the opposite color (white becomes black, light grey becomes dark grey)
  • Text colors flipping to maintain contrast
  • Images and design elements looking inverted or muted
  • Previews that don't match what your visitors actually see

Your published site is not affected for visitors who don't have this setting enabled — this is purely a local browser display issue.

How to Fix It: Set Chrome to Light Theme

  1. Open Chrome and click the three-dot menu in the top-right corner.
  2. Select Settings.
  3. In the left sidebar, click Appearance.
  4. Under Mode, select Light.
  5. Refresh your Website Studio tab. Colors should now display correctly.

If You're Using Chrome's Auto Dark Mode Flag

Some users have enabled an experimental flag that forces dark mode on all sites. To disable it:

  1. In Chrome's address bar, type chrome://flags and press Enter.
  2. Search for Auto Dark Mode for Web Contents.
  3. Set it to Disabled.
  4. Click Relaunch to restart Chrome.

Check Your Operating System Theme

If Chrome is set to follow your system theme, switching your OS (Windows, macOS, or ChromeOS) to light mode will also resolve the issue.

Common Pitfalls

  • Only one Chrome profile is affected. Theme settings are per-profile. If you use multiple Chrome profiles, check each one.
  • Hard refresh after changing the theme. Use Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac) to clear cached styles.
  • Extensions can also invert colors. Dark Reader and similar extensions force dark themes on websites. Disable them for Website Studio, or whitelist the Search Atlas domain.
  • Incognito mode can help confirm the cause — if colors look correct there, an extension or profile setting is the culprit.

How to Confirm It's Fixed

After applying the fix, open your Website Studio project and compare the editor preview to your published site in a different browser (Safari, Firefox, or Edge). The colors should now match across all browsers.

Next Steps

If you've switched Chrome to light theme, disabled Auto Dark Mode, and turned off any color-altering extensions but colors still appear inverted, send our support team:

  • A short screen recording (a Jam.dev recording works great) showing the issue
  • Your Chrome version (found at chrome://version)
  • Your operating system and theme setting
  • A link to the Website Studio project where you're seeing the issue

This information lets us reproduce and investigate quickly. Reach out via in-app chat or your account manager any time the issue reappears so we can keep monitoring it.