But as you can see from the screenshot above, the default view is rather dull: white background, uninspiring syntax highlighting. It’s a shame that you can’t match the Chrome developer tools code panel with my text editor of choice.
Well, it turns out you can! Chrome provides a “User StyleSheets” directory into what you can drop a Custom.css file.
- C:\Users\%username%\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\
- ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/
- ~/.config/chromium/Default/User StyleSheets/
A number of people have also done the hard work for us and made available ready-to-use CSS files for various themes. These are my two favourite dark themes:
Having saved the code to your Custom.css file and saved it, Chrome updates immediately: