How to Enable Dark Theme for Any Website

Do you want to enable a dark theme for any website by forcing dark mode for web contents on browsers?

You may know that you can change the browser’s theme to dark. But, what if you want to enable dark theme for websites or web pages? Here at otechworld, I’m writing about how you can enable the dark theme for any website on Windows, Mac, Android, and iOS.

In the age of the internet, you need to use a browser to access the web (web pages or websites). When you enter the URL in the browser address bar, browser contacts to the web server and request the information i.e. web page or file. The web server sends the information back to the browser and you’ll see the results in the browser window.

Modern browsers are rich in features. Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Safari are in the list of modern browser. However, Chrome is one of the most popular browsers.

Some browsers give an option to change the theme. For example, on Google Chrome and Microsoft Edge, you can change the theme from the browser appearance settings. Edge gives a light or dark theme options and Chrome offers Theme library.

Similarly, for Android users, Google added a Dark Mode option in the Chrome browser.

Well, the Dark theme gives a new look to the browser and replaces its default color scheme to dark colors i.e. black and grey.

Browser dark theme gives you a better experience at night. It also helps to increase the mobile battery life.

You may know that browser dark mode doesn’t affect web pages. However, some popular websites give an option to change the website theme to the dark. Recently, Facebook also added this feature on its website.

But, what if you want to enable dark theme for all websites?

Well, Google Chrome and Microsoft Edge browser allow to force dark mode for web content from flags.

Google offers Flags (experimental features) in the Chrome browser. Force dark mode for web content flag allows you to view the web pages in night mode. You can even use Flags on Chrome for Android.

Microsoft Edge is also based on Chromium open-source code and offers flags too. I’ve also shared how to use flags on the Edge browser.

On the Firefox browser, you need to use the third-party extension. However, extensions are also available for Chrome and Edge browsers.

What is Force Dark Theme Mode for Websites?

Dark theme for websites allows you to view the web pages in dark mode. It renders the web content in a dark theme (dark background and light text).

It helps to reduce eye strain in low-light environments especially at night. Also, it gives you a great reading experience.

With a black background, you can read the text from web pages easily for longer times, and helps you to stay focused on reading.

On mobile phones with OLED displays, it helps to save battery life. Because the black pixels will be turned off.

Also, keep in mind that, Dark theme for websites is completely different than browser’s dark themes. In browser dark theme mode, homepage, settings, toolbar, and some pages will be dark.

On the other hand dark theme for websites shows the web pages in dark mode.

Note: You need a Google Chrome or Microsoft Edge browser for this.

How to Force Dark Mode for Websites on Google Chrome?

Google Chrome is available for Windows, Mac, Linux, Android, and iOS. You can do that on all platforms.

On Desktop (Windows, Mac, & Linux)

1. Using Chrome Flags

The steps are given below.

Step 1. Open Chrome browser on your desktop PC and type Chrome://flags in the address bar (Omnibox) an press the enter button to open it. This will open the flag menu.

Step 2. Find the “Force dark mode for web contents” flag from the list. You can use the search option to find it easily.

Step 3. Click on the “Default” button from the right-hand side of the flag and you’ll see the drop-down list. Select “Enabled” from the list.

Chrome also offers some inversions. Below is the list of inversions that you can select from the list.

• Enabled with simple HSL-based inversion.
• Enabled with simple CIELAB-based inversion.
• Enabled with simple RGB-based inversion.
• Enabled with selective image inversion.
• Enabled with selective inversion of non-image elements.
• Enabled with selective inversion of everything.
• Enabled with increased text contrast.

Step 4. Click on the “Relaunch” button from the bottom to restart the browser to make the changes. After restarting, the web pages will be reloaded and you’ll see the results. You can open any website to see it in dark mode.

That’s all. You can disable your active flag any time from the flags menu.

2. Using Dark Reader Google Chrome Extension

The steps are given below.

Step 1. First, install Dark Reader Extension from Chrome Web Store. The link is given below. You can also install other extensions that force dark mode for web content.
Dark Reader for Chrome
After opening the link, click on the Add to Chrome button and then click on the Add extension button from the pop-up.

Step 2. After installing, open any website and you’ll see that website in dark theme. Because the extension inverts the colors on web pages.

Step 3. To turn off the extension functionality, click on the extension icon from the toolbar and select Dark Reader. Click on the Off button to disable it. Alternatively, you can use the Alt + Shift + D keyboard shortcut to toggle on and off the extension.

That’s all.

On Mobile Phones

Chrome flags are also available on its mobile version. Below are the steps.

Step 1. Open Chrome browser on your Android or iOS phone. If the browser isn’t available on our phone, you can install it from Google Play Store and Apple App Store.

Step 2. Tap on the address bar and type chrome://flags in the URL field. Hit the Go button to open it.

Step 3. Flags menu will be open. Search for “Force dark mode for web contents” flag from the list. Tap on the Default or Disabled option and select the “Enabled” option from the drop-down list.

You can also select the enabled with inversions like simple HSL, CIELAB, and RGB based, and selective image, non-image elements, and everything inversions.

Step 4. Tap on the Relaunch button from the bottom. This will restart the browser app and after that, you can see the changes.

That’s it. Open any website and you’ll see the web page in dark mode.

How to Force Dark Theme Mode for Websites using Microsoft Edge?

On Microsoft Edge, you can use Flags or extensions.

1. Using Edge Flags

The edge browser also provides the flags. The steps are given below to use the “Dark mode for web contents” flag on Windows, Mac, and Android.

Step 1. Open the Microsoft Edge browser on your desktop PC. Type Edge://flags in the address bar and press the enter button. You’ll see the list of available flags.

Step 2. Search and find “Force dark mode for web contents” flag from the menu list. Click on the Default button from the right side of the flag and you’ll see the drop-down list with options. Select the “Enabled” option from the list.

For inversions, you can select simple RGB, HSL, CIELAB, selective image, non-image elements, and everything inversions.

Step 3. From the bottom of the screen, click on the “Restart” button. After restarting, you’ll see the effects. Open any website to see it in dark mode.

2. Using Extension on Microsoft Edge

You can also use Force Dark Mode Extension on the Microsoft Edge browser. The steps are given below.

Step 1. Install Dark Reader by alexanderby Extension on your Microsoft Edge browser from Edge Add-ons. The link is given below.
Dark Reader – Microsoft Edge Addons
Click on the Get button » Add Extension to install it.

Step 2. Open any website and the extension automatically renders that web page in dark or black theme mode.

Step 3. To turn on/off the extension, click on the extension/add-on icon from the toolbar and select Dark Reader from the list. From the popup, select the Off or On button.

That’s it.

How to Force Dark Mode for Web Content on Firefox?

Like Chrome and Edge, Firefox doesn’t provide any inbuilt option to force dark mode for web content. But you can do that with a third-party extension.

The steps are given below.

Step 1. Install Dark Reader by Alexander Shutau extension on Mozilla Firefox browser. The link is given below.
Dark Reader for Firefox
After opening the page, click on Add to Firefox » Add button.

Step 2. Now open any website and the website will be open in dark mode.

Step 3. To turn off the extension, click on the dark reader icon from the toolbar and select the Off option from the popup.

That’s all.

Frequently Asked Questions (F.A.Q’s)

1. What are the flags on the Chrome and Edge browser?

Chrome developers offer experimental features through flags. You can use under development features on both browsers. These flags added additional features in the browser to enhance the browsing experience.

2. Is it safe to enable the “Force dark mode for web contents” option?

Most of the flags are safe to use. But, because these features are under development, you may need to compromise with your privacy and security. Also, you may lose your browser data, but not in the case of this flag.

3. Are flags stable?

You can use most of the flags without a problem. But, these all features are under development and you may see errors. Developer’s make the changes regularly.

4. Are all flags permanent?

Flags are not permanent. Developers remove and add flags at any time.

5. Why some web pages lag after enabling the “Force dark mode for web contents” flag?

This flag renders the web pages and uses device resources. That’s why you may see the lags while opening or scrolling the web pages. When you enable dark mode with inversion, you’ll see the lags.

Final Words

Now you know how to enable dark theme for any website using Google Chrome and Microsoft Edge browser. However, some browser extensions are available for this, but, you don’t need any extension.  Although, you can’t do that on Firefox or other popular browsers.

If you’re reading the long posts from web pages at night, this guide may useful for you. Because your eyes won’t feel tired when you browse the web at night after using this method. It also helps to improve visibility.