Material DevTools Theme Collection

How to install an extension Open in Chrome Web Store

CRX ID

jmefikbdhgocdjeejjnnepgnfkkbpgjo

Status

Live on Store

Description from extension meta

Material DevTools Theme Collection

Image from store

Description from store

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.

Latest reviews

Jared Becker 2025-10-14: Rip... Sad I never got to try this while it was still working
Lego Savant 2025-04-17: is this open source? im looking to customize the themes further
Ahmad Al Tamimi 2024-10-28: not working anymore
Akakii Ananii 2024-09-02: Doesn't work :(
Ridwan Yinusa 2024-08-23: not working anymore!!!!
Cedrick Bautista (Ced) 2024-06-13: not working
Dylan 2024-04-28: Not working on MacOS :(
milan vala 2024-04-15: not working in macos 14.4.1
Gio ` 2024-03-27: Nice looking but does not render anything when i resize devtools until i stop resizing (shows just plain bg color) same thing when picking a color in devtools color picker - on click + mousemove just plain bg...
Roberto Luiz 2024-02-23: A tip for anyone who has difficulties like me, besides following the installation step by step, Google Chrome no longer needs to enable the "Developer Tools Experiment" in chrome://flags/, this is now natively necessary follow the steps normally: Installation: - Open Developer Tools - Open the Settings > Experiments > "Allow extensions to load custom stylesheets" - Close and reopen the DevTools With the addition that for the changes to appear you must restart Chrome by entering "chrome://restart" in the browser and they appear, I hope this can help someone in the future :)
Paul Mourer 2024-02-22: Doesnt work. MacOS Chrome 122.0.6261.57. I've enabled stylesheets and reloaded devtools on any theme changes. Closed and re-opened. Nothing. Edit - Maybe it works? Seems like even with reloads and closing and re-opening the app it just randomly appears to change the theme several minutes after setting it with no obvious triggering event.
Marcel Schliwka 2024-02-14: Best Plugin to change the standard design of the Chrome Developer Tools. But please read the installation guide! It is necessary to make the extension work, because you need to turn on a experimental Chrome feature.
Johnny Silverhand 2024-02-13: Please update this for the chrome >121 version. Is applying the same color for all the JSON elements :( I mean, there's no color difference between string, bool, etc.
Md Abdul Momin 2024-01-19: Almost three years, I have used Material Ocean in Everywhere!
Rafael Pozzi 2024-01-11: I'm using it for edge, but after the new design, some elements are not being themed, like the tab bar for example. This could be fixed by inspecting the DevTools page (you can access on "devtools://devtools/bundled/devtools_app.html"), finding the classes for the elements that are not themed, and adding them to the style.
Etienne Wille 2023-11-08: The Color of the console doesnt change for me. Also the whole theme resets to default sometimes
Etienne Wille 2023-11-08: The Color of the console doesnt change for me. Also the whole theme resets to default sometimes
Eric Aprioku 2023-10-26: Simply amazing and breathtaking!!!
Eric Aprioku 2023-10-26: Simply amazing and breathtaking!!!
Stephan Lamoureux 2023-03-30: amazing, I wish they had this from the chrome themes as well.
Stephan Lamoureux 2023-03-30: amazing, I wish they had this from the chrome themes as well.
Mohammad Mahdi 2023-01-25: Really good, was tired of that gray ugly theme and font. But the cursor is not visible in editor in source tab
Mohammad Mahdi 2023-01-25: Really good, was tired of that gray ugly theme and font. But the cursor is not visible in editor in source tab
Garrett Aldridge 2022-12-02: Fixes needed: 1.Cursor is impossible to see when clicking inside HTML elements or snippets. 2. Resizing the console cause everything inside to become hidden.
Garrett Aldridge 2022-12-02: Fixes needed: 1.Cursor is impossible to see when clicking inside HTML elements or snippets. 2. Resizing the console cause everything inside to become hidden.
Hydra Musik 2022-08-02: Not working anymore for me
Hydra Musik 2022-08-02: Not working anymore for me
KaKa Xie 2022-07-20: it canot show select status when i click one line in Network. ( i just want to konw what i select then copy it, but when i use Material DevTools it dosnt work)
KaKa Xie 2022-07-20: it canot show select status when i click one line in Network. ( i just want to konw what i select then copy it, but when i use Material DevTools it dosnt work)
flash usr 2022-07-08: Would be great to create custom themes or at least modify the current ones. Thank you for all your hard work.
flash usr 2022-07-08: Would be great to create custom themes or at least modify the current ones. Thank you for all your hard work.
Marcos Gustavo Campos da Silva 2022-06-25: do not work
Marcos Gustavo Campos da Silva 2022-06-25: do not work
Wonseok Kong 2022-04-13: It is too hard to find the cursor in the console of the developer tool. Is there any way to improve it?
Wonseok Kong 2022-04-13: It is too hard to find the cursor in the console of the developer tool. Is there any way to improve it?
Ferris Argyle 2022-04-12: В консоли цвет курсора чуть светлее фона. Печатаешь в слепую почти. Monokai Pro Изменить цвета тоже не помогает, через ctrl+shift+c загружается стандартный стиль
Slavy Spasov 2022-04-11: The cursor is hard to see once you start typing, otherwise 5*
Slavy Spasov 2022-04-11: The cursor is hard to see once you start typing, otherwise 5*
Bayram Arslan 2022-04-06: <perfect star="5" />
Bayram Arslan 2022-04-06: <perfect star="5" />
Shawn Pruden 2022-03-21: Thank you for solving that hightlighted bar on element page! It would be perfect if the purple color of input cursor shows up properly on console page. It's really hard to see where the cursor is without a color, hope it can be fixed soon. Thank you!
Shawn Pruden 2022-03-21: Thank you for solving that hightlighted bar on element page! It would be perfect if the purple color of input cursor shows up properly on console page. It's really hard to see where the cursor is without a color, hope it can be fixed soon. Thank you!
Sergio Alessandro Servillo 2021-12-03: This extention is majestic but the console counter is not showed anymore. Can you also add a Tokyo Night Theme?
Sergio Alessandro Servillo 2021-12-03: This extention is majestic but the console counter is not showed anymore. Can you also add a Tokyo Night Theme?
Halim 2021-11-26: Excellent Add-on. Thank you for efforts.
Halim 2021-11-26: Excellent Add-on. Thank you for efforts.
Łukasz Kopyto 2021-09-09: Great extension :) , but I am missing one thing here, when debugging in the network tab, the selected query is not highlighted as it happens without using theme. This makes work difficult sometimes.
Łukasz Kopyto 2021-09-09: Great extension :) , but I am missing one thing here, when debugging in the network tab, the selected query is not highlighted as it happens without using theme. This makes work difficult sometimes.
Ahmet Atar 2021-08-30: Hello, It's not working on Chrome 92.0.4515.159
Ahmet Atar 2021-08-30: Hello, It's not working on Chrome 92.0.4515.159

Extension Actions