Change website appearance settings in Firefox

Revision Information
  • Revision id: 241347
  • Created:
  • Creator: Fabi
  • Comment: New article
  • Reviewed: Yes
  • Reviewed:
  • Reviewed by: Fabi.L
  • Is approved? Yes
  • Is current revision? No
  • Ready for localization: No
Revision Source
Revision Content

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 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. Click the Firefox menu Fx89menuButton.
  2. Select Settings.
  3. Go to the General panel on the left.
  4. Scroll down to Language and Appearance.
  5. Select the color scheme you want to use for the websites you visit.
    Language_Apperance

You can choose to have website appearance match your:

  • Firefox theme: this option makes websites match the Firefox theme you have installed, whether it's a third-party theme, alpenglow, colorways, etc.
  • System theme: this option makes websites match your operating system theme.
  • Light theme: this option changes a website’s color scheme to light.
  • Dark theme: this option changes a website's color scheme to dark.
Note: Some themes are developed to match light and dark schemes only. In these cases, the appearance of the websites will adjust to match your Firefox theme. However, since most colorways are not developed to match light or dark schemes specifically. When you select such colorways, the appearance of websites will adjust to match the color scheme of your operating system.

Common questions

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

  • Your operating system's appearance settings determine how your device's user interface is displayed.
  • Browser themes change the appearance of the browser. For example, the elements that are part of the browser (menus, buttons, tabs, etc.).
  • Web appearance refers to the way in which the content of the web pages you visit from your browser is displayed.

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

No. Starting in Firefox version 100, you can decide if you want the appearance of the web pages 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. 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.

ColorSelection_warning

This notification will only appear in the following cases:

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

How are my web appearance settings affected when I use OS 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.