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.

Various DevTools color themes

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.

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)
  • Chromium Light
  • Quiet Light
  • Solarized Light

Dark themes:

  • Dark+ (Default)
  • Abyss
  • Chromium Dark
  • 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).

    The Settings (gear) icon

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

    Selecting a theme in Preferences

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 the word "theme".

  3. 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.

  4. Select Enter to run the command.

    The list of themes in the Command Menu

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). Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.