Apply a color theme to DevTools

You can apply various color themes to Microsoft Edge DevTools, including several themes from Visual Studio Code, such as Monokai and Solarized Dark. Themes affect the color of panes, buttons, and code syntax highlighting.

This article is about changing the appearance of DevTools. To instead change how the webpage under development is displayed, see Emulate dark or light schemes in the rendered page.

Available themes

By default, the DevTools theme is set to System preference (also called system preferred color theme). If your operating system is set to Light theme, DevTools uses the Light+ theme. If your operating system is set to Dark theme, DevTools uses the Dark+ theme. However, you can change DevTools to any of several other themes, so that DevTools isn't affected when you set the operating system to Light or Dark theme.

Light themes:

• Light+ (Default)
• Quiet Light
• Solarized Light

Dark themes:

• Dark+ (Default)
• Abyss
• Kimbie Dark
• Monokai
• Monokai Dimmed
• Red
• Solarized Dark
• Tomorrow Night Blue

Changing the color theme from Settings

1. Open DevTools, and then select Settings (the gear icon).

   

2. Select Preferences, and then in the Appearance section, select a theme from the Theme dropdown list.

Changing the color theme from the Command Menu

To use the Command Menu to change which color theme is applied to DevTools:

1. Open the Command Menu.

2. Type theme, and then select an Appearance command, such as Appearance: Switch to Abyss theme or Appearance: Switch to Light+ (Default) theme.

3. Press Enter.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

This work is licensed under a Creative Commons Attribution 4.0 International License.