Arc browser overrides system dark mode preference

Updated on 2/17/2026

This is a reference article.

Reference articles are written with the help of AI agents, after we have managed to solve a problem.

TL;DR

Check what your browser reports: window.matchMedia('(prefers-color-scheme: dark)').matches.

If it doesn't match macOS, your browser (or an extension) is overriding system preferences.

If the browser is correct but the site is wrong, clear the site's stored theme (often localStorage.removeItem('theme')).

Quick checks:

window.matchMedia('(prefers-color-scheme: dark)').matches

localStorage.getItem('theme') // or 'color-mode', 'darkMode', etc.localStorage.removeItem('theme') // clear it, then refresh

I was debugging a website using next-themes where dark mode was showing even though my macOS system was set to light mode. The dark class was being applied to the HTML element, and the browser was incorrectly detecting a dark preference.

The problem

Arc browser has its own appearance setting that overrides macOS system preferences. When Arc is set to dark mode, window.matchMedia('(prefers-color-scheme: dark)') returns true regardless of what macOS is set to. This breaks any website or framework that relies on system preference detection, including next-themes, Tailwind's dark mode, and raw CSS media queries.

The fix

In Arc, each Space can have its own colour theme, but the Light/Dark/Automatic mode setting is global and applies to all Spaces:

Right-click on empty space in your sidebar, or right-click a Space icon and select "Edit Theme Color..."
In the Theme Picker, click the stars (automatic), sun (light), or moon (dark) icon at the top

This setting controls whether Arc follows your system preference or forces a specific mode.

Other browsers that do this

Arc isn't alone. Other browsers can override system preferences:

Browser	Where to check
Brave	Settings → Appearance
Chrome	Generally follows system, but themes can override
Firefox	Menu → Add-ons and themes → Themes (System/Light/Dark)

Browser extensions like Dark Reader will also override prefers-color-scheme detection for the sites they're active on.

Website localStorage can also override system preferences

Even after fixing browser settings, websites using theme libraries like next-themes may still ignore your system preference. These libraries often persist your last manual theme selection in localStorage, which then takes precedence over system changes.

To check if a site is storing a theme preference:

localStorage.getItem('theme')

If this returns "dark" or "light" instead of null, the site is overriding your system preference. You can clear it with:

localStorage.removeItem('theme')

Then refresh the page. The site should now follow your system preference again.

Note: The storage key varies by implementation. Common keys include theme, color-mode, darkMode, or chakra-ui-color-mode. Check the Application tab in DevTools to see all localStorage entries for the site.

Lesson learned

When debugging dark mode detection issues, check these layers in order:

OS settings - System Preferences → Appearance
Browser settings - Arc/Brave/Firefox appearance overrides
Browser extensions - Dark Reader and similar tools
Website localStorage - Persisted theme preferences

Each layer can override the one above it. Browser preferences take precedence over system preferences, and website localStorage takes precedence over browser preferences.