Enable Dark Mode For Web Content In Microsoft Edge

From Enable Dark Mode For Web Content In Microsoft Edge


Enable Dark Mode for Web Content in Microsoft Edge | Windows 11

Advertisement

Let’s learn how to Enable Dark Mode for Web Content in Microsoft Edge in Windows 11. Microsoft Edge is enabled with many latest settings in it. Dark Mode is one of the coolest features nowadays. All operating systems and applications adopt that.

The dark mode does not suit all the applications and website content. So Microsoft Edge has some settings that help users enable or disable it. We will go through this in detail in this post.

The user can manually change the settings to enable or disable the Microsoft edge dark mode using the theme settings and from appearance. Users also forcefully enable the dark mode applied to all the web content.

This post describes the methods to enable web content in dark mode using Microsoft edge settings. You can read the post completely to know the details about the MS Edge settings.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.1
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.1

Enable Dark Mode for Web Content in Microsoft Edge

In Microsoft Edge, there are two types of dark mode settings available in it settings are listed below:

  1. Enable Dark Mode Theme in Microsoft Edge Browser settings: These settings only change the theme to the dark mode of the browser. It does not alter any web content into dark mode.
  2. Force Enable Dark Mode for Web Content in Microsoft Edge Browser Settings: This setting fully changes the background to dark mode. This dark mode setting also applies to all the web content.

Both settings of Microsoft Edge are described in detail below for you to have a better understanding.

1. Enable Dark Theme in Microsoft Edge Browser Settings

To enable dark mode for web content in MS Edge, you have to launch the MS Edge browser. Move to the top right corner of the browser and click on the 3 horizontal dots menu.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.2
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.2

The list of built-in options of the MS Edge browser appears; scroll down, find the settings option, and click on it. When the settings window opens, it has some basic options to make any changes in the browser. Select the Appearance option available under the settings.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.3
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.3

Under appearance, the Customize Appearance is opened. The Overall appearance applies to new tabs, pages, dialogs, and other menus. And it has 3 options available select the Dark from the options listed below:

  • System default
  • Light
  • Dark
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.4
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.4

You can also change the Theme to Dark under Customize Appearance. To do all the processes described above, type edge://settings/appearance in the address bar of the MS Edge browser and press ENTER.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.5
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.5

2. Force Enable Dark Mode for Web Content in Microsoft Edge Browser Settings

You can forcefully enable dark mode for web content in the Microsoft Edge browser settings. To do so, type edge://flags in the address bar of the MS Edge browser and press ENTER.

NOTE: You could lose browser data or compromise security or privacy by enabling these features. Enabled features apply to all users of this browser. If you are an admin, you should not be using these flags in production

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.6
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.6

Type dark mode in the search flags bar, and Auto Dark Mode for Web Contents appears for the search. This option automatically renders all web content using a dark theme, which was in the settings of Default. There is a list of options there to avail of auto dark mode listed below:

  1. Enabled
  2. Enabled with simple HSL-based Inversion
  3. Enabled with simple CIELAB-based Inversion
  4. Enabled with simple RGB-based Inversion
  5. Enabled with selective image inversion
  6. Enabled with selective Inversion of non-image elements
  7. Enabled with selective Inversion of everything
  8. Disabled or Default (which is similar to disabled)
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.7
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.7

Change the Default, click on it, and select Enabled; a pop-up message will appear as “Your changes will take effect after you restart Microsoft Edge” click on Restart to apply the changes in it. Now your MS Edge browser is enabled with dark mode. To directly reach the location, type edge://flags/#enable-force-dark.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.8
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.8

1Dark Mode Enabled

After the auto restart of the edge browser, it is now enabled with dark mode to apply to all web contents, as shown in the figure below. The Dark Mode is now enabled; all the web contents open in this browser with dark mode.

You can see in the image below that the background is dark, and the letters have become lighter for user convenience, which is easily marked with our community logos in the image and the paragraphs.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.9
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.9

2. Dark Mode Enabled With Simple HSL-Based Inversion

As shown in Fig.7 above, you can select from the drop-down option, choose your desired options, and restart the Microsoft Edge browser for the applicability of the changes, as shown in Fig.8 above. It applies to all the options available in Dark Mode experiments.

  • Select enabled with simple HSL-based Inversion
  • Restart MS Edge

In the option enabled with simple HSL-based Inversion, the background changes to deep Dark; however, it does not change the dark texts. You can see in the image below our community logo is half disappeared; also, in the paragraphs, the dark text is not visible well.

Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.10
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.10

3. Dark Mode Enabled With Simple CIELAB-Based Inversion

In the option enabled with simple CIELAB-based Inversion, the background becomes dark but less than enabled with simple HSL-based Inversion. It does not change the dark texts. In the image below, our community logo appeared a little bit. The difference also is marked by the paragraph in the image.

  • Select enabled with simple CIELAB-based Inversion
  • Restart MS Edge
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.11
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.11

4. Dark Mode Enabled With Simple RGB-Based Inversion

Option enabled with simple RGB-based Inversion background converted to dark mode enabled. Though it RGB based, it enables dark mode with some colors only. The difference is marked in our community logo and the paragraphs in the image below.

  • Select enabled with simple RGB-based Inversion
  • Restart MS Edge
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.12
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.12

5. Dark Mode Enabled With Selective Image Inversion

Option enabled with selective image inversion background converted to dark mode enabled. It is quite similar to the Dark Mode Enabled option. The difference is marked in our community logo and the paragraphs in the image below.

  • Select enabled with selective image inversion.
  • Restart MS Edge
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.13
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.13

6. Dark Mode Enabled With Selective Inversion of Non-Image Elements

Option enabled with selective Inversion of Non-image Elements background converted to dark mode enabled. It is quite similar to the enabled with a simple CIELAB-based inversion option. The difference is marked in our community logo and the paragraphs in the image below.

  • Select enabled with selective Inversion of Non-image Elements
  • Restart MS Edge
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.14
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.14

7. Dark Mode Enabled With Selective Inversion of Everything

Option enabled with selective Inversion of Everything background converted to dark mode enabled. It is quite similar to the Enabled dark mode option. The difference is marked in our community logo and the paragraphs in the image below.

  • Select enabled with selective Inversion of Non-image Elements
  • Restart MS Edge
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.15
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.15

8. Dark Mode Disabled or Default Settings

The Disabled option is similar to the Default option; both settings are in the light mode settings. It disables the dark mode shown in the image below:

  • Select Disabled or Default
  • Restart MS Edge
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 - Fig.16
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Fig.16

The above procedure is to make all the web contents into a dark mode in the Microsoft Edge web browser. The addresses are shown in the table below for better understanding:

ItemsOptions to Enable Dark Mode
Microsoft Edge Settingsedge://settings/Appearance
Microsoft Edge Experimentsedge://flags/#enable-force-dark
Enable Dark Mode for Web Content in Microsoft Edge | Windows 11 – Table 1

The information shared above regarding Enabling Dark Mode for Web Content in Microsoft Edge in Windows 11 using different methods. Please follow us on HTMD Community and visit our website HTMD Forum if you like our content.


Comments

Popular posts from this blog

Add GitHub Repository to DBeaver CE Secured with SSH Protocol

Keyboard Shortcut to "Toggle Line Comments" in DBeaver

DBeaver Shortcuts