Last Updated: February 25, 2016
· kytwb

Sublime Text 2 theme in Google Chrome Developer Tools Elements Panel

Months ago, I changed my default text editor from Notepad++ to the trendy and powerful Sublime Text 2. Now adopted, I got used to its default black theme.

In order to be in ease while using Google Chrome WebInspector, I decided to customize it with the Sublime Text 2 theme. This way, I'll have the same visual landmarks concerning code colorization, both in my text editor and my developer tools.

Here's the How-To :

  • Go to chrome://flags
  • Scroll to "Enable Developer Tools experiments" and click Enable
  • Download Sublime Text 2 CSS theme here : http://is.gd/Y8ysUo
  • Move the downloaded CSS theme to : C:\Users\You\AppData\Local\Google\Chrome\User Data\Default\User StyleSheet\Custom.css
  • Restart Google Chrome and .... you're done!

Don't hesitate to like, share and spread the word if you think this is a good workflow optimization tip !

3 Responses
Add your response


I just edited my css file without enabling the settings in dev tools and it works fine. What is the purpose of enabling this option?

over 1 year ago ·

Hey man - I dig the sound of this but that Git link has no *.css file to move over? What am I missing?

over 1 year ago ·

I updated the tip a little as the link seems dead.

over 1 year ago ·