Other Products

Showcase of other products using the Material Theme assets

Introduction

The Material Themes have been ported to many editors: VSCode, Atom, Sublime, Brackets, etc… This makes sense as the themes are very popular amongst developers, however it would be great to be able to use these themes in other uses, such as in Office Documents, Websites or other tools.

Therefore people have thought of many ways to export these beautiful themes to such other uses, using custom styles, configuring settings or even go to modify the apps to inject the colors in the app. Here is a showcase of these:

Material Theme for Chrome DevTools

Material Theme for Chrome DevTools is an extension for Google Chrome to modify the DevTools, used vehemently by FrontEnd developers all around the world.

Material DevTools Theme Collection
Material DevTools Theme Collection

This makes use of an experimental feature of Google Chrome, Developer Tools Experiments to allow developers to customize the DevTools panels using custom styles.

Installation:

To use this theme, you’ll need first to enable Developer Tools experiments in chrome://flags:

  • Go to chrome://flags
  • Look for “Developer Tools experiments”
  • Enable it and restart Chrome
  • Open Developer Tools
  • Open the Settings > Experiments > “Allow Custom UI Themes”
  • Close and reopen the DevTools
  • If you use a dark theme (Oceanic, Palenight etc), select the Dark Mode, otherwise select the Light Mode

Screenshots

Material Oceanic
Material Oceanic
Material Darker
Material Darker
GitHub
GitHub
Atom One Dark
Atom One Dark
Solarized Light
Solarized Light
Theme List
Theme List
Settings Popup
Settings Popup

Slack Themes

The Material Themes have also been ported to Slack, the famous instant messaging program. There was already a porting of the themes to customize the sidebar, but now there is finally a way to theme the whole application!

This is done by actually modifying the Slack app, as there is no way to actually customize the app. Instead, it is injecting the styles by importing a remote css file, overriding the default colors.

You can find the project here

Installation

To install the plugin, you need to:

  • First clone the repository. Make sure you have NodeJS installed.
  • Make sure all instances of Slack are closed and Slack does not run in the background.
  • Then run npm install
  • Run npm run apply
  • You will be prompted to enter your administrator password. This is necessary as it is writing on the disk.
  • Finally select which theme to apply and restart Slack.
  • Also make sure you are online.

Screenshots

Material Oceanic
Material Oceanic
Material Darker
Material Darker
Material Lighter
Material Lighter
Material Palenight
Material Palenight

You can find the list of available themes in the GitHub repository as well as troubleshooting info.


Other Portings

As a final note, let’s list a bunch of projects using or implementing the Material Theme: