Reply To: Google Chrome customise CSS

[micjamking]

As noted in this stack-overflow answer: http://stackoverflow.com/a/21210882/933951, the official recommended method of skinning the Google Chrome Developer tools (as of Chrome v33) is by creating an extension to override the default styles which are applied, using the chrome.devtools.panels.applyStyleSheet.

The process of creating a Chrome extension for this purpose can be a bit tedious to skin each component by hand from scratch, so I’ve created a small plugin which provides a collection of built-in themes and additional editor settings for Chrome Developer Tools. The extensions also provides developers the ability to create additional custom themes using a simple Sass templating system without writing your own extension.

1. Install DevTools Author Chrome extension from Chrome Web Store
2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for
   flags to take effect.
3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

This will provide, out of the box the following features:

• The ability to choose from +25 custom editor themes
• Custom font support via enabled system fonts
• Incremental control of font size, from 10px – 22px

If you would like to contribute additional themes, you can follow the below steps:

Fork the GitHub repository and then follow the steps below. The Devtools Author Chrome extension is built using NodeJS and GruntJS.

Installation:

$ git clone [email protected]:<username>/devtools-author.git
$ cd devtools-author
$ npm install

Development:

$ grunt serve

1. Once grunt is running, to install development extension in Chrome, open Settings > More Tools > Extensions and click on the Load unpacked extension… button. (also enable Allow incognito below if you wish).
   • (Disable DevTools Author if you have the extension installed from the Chrome Web Store.)
   • Make sure Developer Tools experiments are enabled and custom UI themes are allowed.
2. Restart DevTools. I find the fastest way to see changes take affect is to undock DevTools in a separate window and then open a subsequent DevTools window (cmd + opt + I while the current DevTools window is focused) after changes have been saved and grunt reloads the assets. You’ll then need to reload (close and reopen) the subsequent DevTools window after you make changes.

Creating additional themes

1. Make a copy of one of the templates from app/styles/themes/templates/ and rename the file to your theme name without the underscore, ie. if your theme is called aloha, inside of app/styles/themes/, copy templates/_theme-template.scss and rename it to aloha.scss
2. Add color values for the palette based on the code syntax highlighter variables in your scss file.
   • If you desire more specific targeting for your theme than what is being supported out of the box, you can add those styles to the end of your theme file, after the @include styles().
3. Add your color palette object (name and colors array) to the themes.json in app/scripts/
4. In DevTools, select your theme palette in the Author Settings panel.
5. Preview and adjust your colors as needed. See Development – Step 2.
6. Commit and push your changes to your repo, then create a pull request for your new theme once it is ready!