Bewerken

Share via

Apply a color theme to DevTools

  • Artikel

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

The following screenshot shows four different DevTools themes, from top left to bottom right: Tomorrow Night Blue, Kimbie Dark, Solarized Dark, and Red:

Four Microsoft Edge windows, each with DevTools opened, and each with a different DevTools color theme

Changing the color theme from Settings

  1. In DevTools, click the Customize and control DevTools (Customize and control DevTools icon) button, and then click the Settings (Settings icon) button. Or, press F1.

    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. In DevTools, open the Command Menu, such as by pressing Ctrl+Shift+P (Windows/Linux) or Command+Shift+P (macOS).

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

The list of themes in the Command Menu

  1. Press Enter.

See also:

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.