Apply color themes 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, navigate to Emulate dark or light schemes in the rendered page.
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+ (Default)
- Chromium Light
- Quiet Light
- Solarized Light
- Dark+ (Default)
- Chromium Dark
- Kimbie Dark
- Monokai Dimmed
- Solarized Dark
- Tomorrow Night Blue
Changing the color theme from Settings
Open DevTools, and then select Settings (the gear icon).
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:
Type the word "theme".
Select an Appearance command for the theme you want to use. For example, Appearance: Switch to Abyss theme or Appearance: Switch to Light+ (Default) theme.
Enterto run the command.
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.