Notice
Experiments settings reset in 44.0.2403.89
. Open developer tools settings
Zero Base Themes
An assortment of Chrome Devtools theme that use the Zero Base Template.
Contributing
Zero Base Themes is built on LESS. Grunt is used to listen for changes to LESS files and generates CSS. This means Node is required.
Getting Started
-
Clone this repo:
git clone https://github.com/mauricecruz/zero-base-themes.git
. -
Install dependencies:
npm install
. -
To use an existing theme:
grunt
. (If you're going to work on your own theme:grunt watch
to listen for changes). -
Chrome > Preferences... > Extensions > DevTools Theme: Zero Dark Matrix = Enabled
(also enableAllow incognito
below if you wish). -
chrome://flags (make sure
Enable Developer Tools experiments
is enabled). -
In Chome Dev Tools > Settings (cog icon or
Shift+?
) > Experiments > Allow custom UI themes. -
Sometimes it's required to close and reopen the dev tools.
Contributing to Template Source
All template files are located in the /less
directory. Files beginning with an _
indicate template partials. They are imported via build.less
. Any addition/removal of template partials should be reflected in the build file.
Changing Themes
Copy /themes/_theme-template.less
and modify color values accordingly. Rename the file and save in the /themes
directory. Specify the theme of your choice in config.less
.
About Canary
As of Version v. 33.0.1726.0, themes only work via extensions and the developer tools experiments.
There is a thread detailing how this method came about.. Feel free to voice your opinions there.
Additional Resources
Blog post and screencast showing how to get up and running and create your own theme as well http://s10wen.com/blog/2014/03/12/chrome-dev-tools-theming-with-zero-base-themes/