jaysuz / material-dev-tools

A color theme inspired by the wonderful Material Theme for IntelliJ IDEA.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

(Please be aware that this repository or rather the connected Chrome Extension is now obsolete, as the maintainers of the official Material Theme Plugin have created their own version which can be found here: Material DevTools Theme Collection)

DevTools Material Theme

This is a Chrome extension that applies a different colour theme to the Chrome developer tools.

Theme Screenshot

Getting Started

The extension can be downloaded via the Google Chrome web store: DevTools Material Theme

If you want to make your own adjustments, you can also clone this repository and sideload the extension, adhering to the installation guidelines below. Either way, make sure that the following prerequisites are met before you perform the installation. Also, ensure that you have switched to the native dark theme of the devtools to see a difference.

Prerequisites

You need to have the Developer Mode for Chrome extensions activated:

  1. navigate to chrome://extensions/
  2. toggle the Developer Mode switch

As a further requirement, Developer Tools experiments must be enabled and custom UI themes allowed:

  1. navigate to chrome://flags/#enable-devtools-experiments
  2. enable the Developer Tools experiments flag
  3. in the settings panel of your Developer Tools, toggle the Allow custom UI themes experiment

Installing

Clone this repository:

git clone https://github.com/jaysuz/material-dev-tools.git

In the chrome://extensions/ window, use the Load unpacked button to load this extension from the location where you cloned the repository.

To test the new theme, make sure the extension is activated and open the Chrome devtools on a page of your choosing. As this theme is meant as a replacement for the dark theme, you first need to switch to the native dark theme of the devtools to see any effect.

Building the styles

To make sure that you are using the most up to date styles, or if you want to make your own adjustments, use the provided Gulp task to rebuild from source, first making sure that you have installed the necessary dependencies:

NPM

npm install
gulp styles

Yarn

yarn install
gulp styles

Built With

  • SASS - CSS preprocessing
  • Gulp - Automation
  • Yarn - Dependency management

Acknowledgments

About

A color theme inspired by the wonderful Material Theme for IntelliJ IDEA.


Languages

Language:CSS 94.9%Language:JavaScript 4.6%Language:HTML 0.5%