When you visit a website, its appearance changes to match your browser's theme. If you set a light theme for Firefox in your browser's preferences and then set a dark theme from the colorways palette, colorways will override the light theme and the websites appearance will adjust to match the new dark theme.

You can configure this behavior and choose the color scheme you would like to use for those websites. To access these settings, follow the steps below:

1. In the Menu bar at the top of the screen, click Firefox and then select Preferences or Settings, depending on your macOS version.Click the menu button and select Settings.
2. Go to the General panel on the left.
3. Scroll down to Language and Appearance.
4. Select the color scheme you want to use for the websites you visit.

   

You can choose from these color schemes:

• Automatic: this option makes websites match the Firefox theme you have selected, whether it's a third-party theme, Alpenglow, colorways, etc.
• Light: this option changes a website’s color scheme to light.
• Dark: this option changes a website's color scheme to dark.

Common questions

What is the difference between the operating system's appearance, website appearance and browser themes?

• Your operating system's appearance settings determine how your device's user interface is displayed.
• Website appearance refers to the way in which the content of the web pages you visit from your browser is displayed.
• Browser themes change the appearance of the browser; for example, the elements that are part of the browser (menus, buttons, tabs, etc.). To learn more, see Use themes to change the look of Firefox.

Are my website appearance settings updated when I select a new browser colorway or system theme?

No. You can decide if you want the website appearance to match your Firefox theme, colorway, or operating system. These settings will not change regardless of the colorway or browser theme you select.

What happens if I select custom colors in my preferences?

You can also configure website appearance in the Colors section under Language and Appearance (see Change the fonts and colors websites use for details). Here you can configure elements such as the text color and background of a website. Some changes you make in this section may override your Language and Appearance settings. If this is the case, a warning notification will alert you of these changes.

This warning notification will only appear in the following cases:

• You have selected Always or Only with High Contrast themes in the Colors panel and you are in Windows+HCM (high contrast mode).
• You have selected Always or Only with High Contrast themes in the Colors panel and you have unchecked the Use system colors checkbox.

How are my website appearance settings affected when I use my operating system's High Contrast mode?

High Contrast mode helps to reduce visual fatigue. For this reason, changes to website appearance or custom color settings will not affect the browser when High Contrast mode is enabled, except in the situations described above.

Why does Firefox apply my selection of Dark to internal pages, but websites always apply Light?

This can be caused by enabling the privacy.resistFingerprinting preference in the Advanced Configuration Editor. This feature reduces the ability of sites to detect some less common settings so that your browser appears to be less unique, but as a result, some site customization features can't work as intended. For more information, see Firefox's protection against fingerprinting.