WebExtension.net
WebExtension.net
Toggle dark mode
WebExtension.net
WebExtension.net
Material DevTools Theme Collection

Material DevTools Theme Collection

View on Chrome Web Store
View Material DevTools Theme Collection Chrome Extension on Chrome Web Store
Add to bookmarks
3.8 (75 ratings)
1 new ratings
0 views
This extension has been viewed 0 times
0 downloads
This extension has been downloaded 0 times

Data is synced from the Chrome Web Store. View the official store page for the most current information.

Material DevTools Theme Collection
Type
Extension
Users
10,000 users
Mallowigi
View author page of Mallowigi
Published
Published on July 22, 2019
Version 7.6.0
Manifest version
3
Updated
Updated on November 5, 2024
productivity/developer
Extension Category
Website
Visit developer website
View on Chrome Web Store
View Material DevTools Theme Collection Chrome Extension on Chrome Web Store
Share This Extension
Share on Twitter
Share on Facebook
Share on LinkedIn
Share on Reddit
Share on Bluesky
Share on Pinterest
Material DevTools Theme Collection Chrome Extension Image 1
Material DevTools Theme Collection Chrome Extension Image 2
Material DevTools Theme Collection Chrome Extension Image 3

Description

IMPORTANT: Due to Google Chrome removing the option to load Custom Stylesheets, this extension no longer works :'(

We're hoping that Chrome restores that feature in the future but until then, this extension is archived.


This is a porting of the famous Material Theme (https://www.material-theme.com) for Chrome DevTools. It completely redesigns the Chrome DevTools panels to the Material Theme Colors. And just like its inspiration, it also provides options to switch to other themes as well in the blink of an eye!

Themes:

  • Material Oceanic
  • Material Darker
  • Material Lighter
  • Material Palenight
  • Material Deep Ocean
  • Material Forest
  • Material Sky Blue
  • Material Sandy Beach
  • Material Volcano
  • Material Space
  • Monokai Pro
  • Dracula
  • GitHub
  • GitHub Dark
  • Arc Dark
  • Atom One Dark
  • Atom One Light
  • Night Owl
  • Light Owl
  • Solarized Dark
  • Solarized Light
  • Moonlight
  • SynthWave '84
  • Catpuccin

Installation:

  • Open Developer Tools
  • Open the Settings > Experiments > "Allow extensions to load custom stylesheets"
  • Close and reopen the DevTools

Features:

  • Select a theme amongst the list of available themes
  • Change the Monospace Font with a font installed in your computer
  • Optionally change the Monospace Font Size
  • Change the Accent Color (the color used in elements such as the tab highlight indicator, checkbox, radio buttons, etc)
  • Colorize the Scrollbars with the Accent Color

Important note: If you want to use a dark theme (Oceanic, Palenight etc), select the Dark Mode, otherwise select the Light Mode!

A big thanks for Jonas Ausgburger (https://chrome.google.com/webstore/detail/material-devtools-theme/pmlofkkoaahmkmmebdkkcljmflocijlo) and Mike King for the inspiration.

© 2025 WebExtension.net. All rights reserved.
Disclaimer: WebExtension.net is not affiliated with Google or the Chrome Web Store. All product names, logos, and brands are property of their respective owners. All extension data is collected from publicly available sources.
Go to top