https://github.com/mauricecruz/zero-base-themes

Chrome Devtools Extension that loads themes using the Zero Base Template
https://github.com/mauricecruz/zero-base-themes

Last synced: 13 days ago
JSON representation

Chrome Devtools Extension that loads themes using the Zero Base Template

• Host: GitHub
• URL: https://github.com/mauricecruz/zero-base-themes
• Owner: mauricecruz
• License: mit
• Created: 2013-12-16T05:38:05.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2023-03-06T05:34:23.000Z (over 1 year ago)
• Last Synced: 2024-10-15T13:03:50.269Z (29 days ago)
• Language: Less
• Size: 1.37 MB
• Stars: 204
• Watchers: 7
• Forks: 55
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Zero Base Themes

An assortment of Chrome Devtools themes 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](http://nodejs.org/) is required.

## Getting Started

1.  Clone this repo: `git clone https://github.com/mauricecruz/zero-base-themes.git`.

2.  Install dependencies: `npm install`.

3.  To use an existing theme: `grunt`. (If you're going to work on your own theme: `grunt watch` to listen for changes).

4.  `Chrome > Preferences... > Extensions > DevTools Theme: Zero Dark Matrix = Enabled`

5.  chrome://flags (make sure `Enable Developer Tools experiments` is enabled).

6.  In Chrome Dev Tools > Settings (cog icon or `Shift+?`) > Experiments > Allow custom UI themes.

7.  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. 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`.

# Alternatives

Chrome now has an option to let you select different themes via Settings > Appearance > Theme: Light/Dark.

## 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/