[Tip] Enable Dark or Light Themes on Websites in Firefox

If you want to force Mozilla Firefox to always open websites in Dark or Light themes, this article will help you. Remember availability of dark or light theme depends upon the website code.

Every website has different UI or interface which is produced by the theme or color scheme used by the website. Most of the websites on Internet provide a light theme or interface to users for easier navigation. Now-a-days some websites have also started providing Dark theme or UI to their users to complement the web browser or operating system’s Dark Mode feature.

Following screenshot shows our website in Dark theme or mode in Firefox:

How we did it: [Windows 10/11 Tip] Enjoy Dark Theme in All Websites and Software Programs

Almost all operating systems including Windows, provide users a Dark Mode feature which has been developed to reduce eye strain specially at night time. The Dark Mode replaces the default White or light color UI with a dark UI featuring Black or dark gray colors.

Similar to the OS, many software also provide users a built-in Dark mode. Almost all popular web browsers have implemented the Dark Mode feature including Firefox.

Websites which provide Dark theme to users, automatically detect whether the Dark Mode is turned on or off in the user’s browser. If Dark Mode is on, the website also uses its dark theme. If dark mode is turned off in the browser, the website uses default light theme.

Many times you may not like this behavior. For example, you may want to use Dark mode in your browser but don’t want to visit a website in dark theme as the theme is too dark or not working properly. It might be possible that the dark theme of a website uses too much dark or black colors which are very hard to see and you find it difficult to browse the website in its dark theme.

In this situation, Firefox may come to rescue. Newer versions of Firefox (100 and later) allow users to select which theme (dark or light) should websites use even if you have turned on/off the built-in dark mode in the browser.

So now you can turn on Dark mode in Firefox and browse websites in Light theme or vice versa.

Following steps will help you in visiting websites in Dark or Light theme in Firefox web browser:

1. Open Firefox and click on the Hamburger icon present at the right-side end of the toolbar to open the main menu. Now click on Options menu to open Firefox settings page.

Alternatively, you can direct option this page using about:preferences command in address bar.

2. Now under “General” tab, scroll down a little and go to “Website Appearance” section.

3. Now you can select which theme or UI should websites use in Firefox. You’ll see following 4 options:

• Firefox theme
• System theme
• Light
• Dark

Firefox theme: If you want to force websites to show their UI based on the Dark Mode status (on/off) in Firefox, enable this feature.

System theme: If you want to force websites to show their UI based on the Dark Mode status (on/off) in Windows or other OS, enable this feature.

Light: If you want to force websites to always use Light theme or UI, select this option.

Dark: If you want to force websites to always use Dark theme or UI, select this option.

That’s it. Now websites will use the UI or theme base on your selected option.

Also Check:

[Tip] Force Mozilla Firefox to Always Use Dark or Light Theme Mode

[Fix] Disable Forced Dark Theme Mode in Mozilla Firefox in Windows 10

[Tip] Enable Dark Mode Everywhere in Mozilla Firefox