(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)
This is a Chrome extension that applies a different colour theme to the Chrome developer tools.
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.
You need to have the Developer Mode for Chrome extensions activated:
- navigate to
chrome://extensions/ - toggle the Developer Mode switch
As a further requirement, Developer Tools experiments must be enabled and custom UI themes allowed:
- navigate to
chrome://flags/#enable-devtools-experiments - enable the Developer Tools experiments flag
- in the settings panel of your Developer Tools, toggle the Allow custom UI themes experiment
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.
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 install
gulp styles
yarn install
gulp styles
- The marvelous Material Theme Plugin for colour inspiration