Darek Kay's picture
Darek Kay
Solving web mysteries

Separate Firefox Dark UI theme from website dark mode

I like the default dark color theme in Firefox, but I prefer to view websites in light mode. This distinction has been working until recently, but with Firefox 95, the browser dark theme will enforce dark mode on websites as well. This sounds like a good default, but I want to separate the browser UI from website contents. Fortunately, there is an undocumented setting to change this behavior.

Update: Firefox 100 (desktop) added a UI option to adjust the dark theme behavior. 🎉

Go to "Settings""General""Website appearance" and choose your preferred setting:

Firefox settings: website appearance. Four radio button options: 'Firefox theme', 'System theme', 'Light', 'Dark'.

Before Firefox 100 and within Firefox mobile apps, follow the following steps:

  • Open about:config configuration page.
  • Edit layout.css.prefers-color-scheme.content-override.

This setting defines how webpages should be rendered:

  • 0: dark mode
  • 1: light mode
  • 2: system's color setting
  • 3: browser theme color

By setting the value to 1, I can keep using the "Dark" Firefox UI theme and continue viewing websites in light mode.

Related posts

Separate Firefox Dark UI theme from website dark mode