Chrome Devtools colorschemes

One can change the way Chrome Developer Tools looks by having a custom CSS stylesheet, named Custom.css. The path for the directory that contains the file:

 Mac: "Library/Application Support/Google/Chrome/Default/User StyleSheets/" Linux: "~/.config/chrome/Default/User StyleSheets/" Windows: "C:\Users\**Your username**\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\" 

Method above will not work anymore.

To make Solarized Light Theme work in Crome Canary, follow the instructions on:

You can download the stylesheet, but better (edit and) regenerate the .less file, which is build on top of Zero Base Themes

For tweaking the theme you can use DevTools itself to inspect Devtools:

  1. undock DevTools
  2. then hit Ctrl-Alt-i or Cmd+alt+i on Mac
  3. now you have yet another undocked DevTools window with all the DevTools markup to inspect the DevTools-window you undocked in step 1 …

Solarized Light

Solarized Light is a syntax highlighting colorscheme, made by Ethan Schoonover. It is well balanced, and thoroughly tested, and comes in two varieties: a dark, or a light background.

For this Chrome-DevTools colorscheme the light background-color variety was the starting point. In a few places the dark background give some extra contrast.

screenshot Chrome DevTools with solarized-light colorscheme
Screenshot of Chrome DevTools (undocked), themed with Solarized-Light


Go to Top