Customization

How to change developer tools panel theme color on Edge Chromium

If the dark mode isn't your color scheme, the Microsoft Edge DevTools panel includes settings to switch to light mode, and here's how to do it.

Microsoft Edge Chromium dark and light modes for DevTools panel

The new Microsoft Edge browser based on the Google’s Chromium comes with the DevTools Elements panel to inspect and live-edit HTML and CSS within the browser.

However, it uses the dark mode as the default color theme, but if dark isn’t your color, you can change the appearance switching the light mode.

In this guide, you’ll learn the steps to switch from the default dark to the light mode for the developer tools panel on the new Chromium version of Microsoft Edge for Windows 10.

How to change the developer tools color mode on Microsoft Edge

Use these steps to change the color mode for the developer tools on Microsoft Edge:

  1. Open Microsoft Edge.

  2. Right-click on the page and select the Inspect option.

  3. Click the menu (three-dotted) button in the top-right.

  4. Select the Settings option.

    DevTools Panel for Microsoft Edge Chromium
    DevTools Panel for Microsoft Edge Chromium
  5. Under the “Appearance” section, use the Theme drop-down menu and select the Light (or Dark) option.

    Microsoft Edge Chromium dark to light mode
    Microsoft Edge Chromium dark to light mode

Once you complete the steps, the developer tools panel will switch from the dark to the light theme color mode.