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!
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
Please 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
First rate extension for anyone who wants a Material Theme feel in their Chrome DevTools! Perfect!
Very nice collection of themes! Thanks! The only thing I don’t like is that it shows the right border for hovering elements in the element inspector. So, I’m going to customize it.
I have an issue that tabname can not show completely.Mine is “Eleme…, Cons…, Sour…, Netw…”
The computed tab got no color but black. It’s not easy to modify padding and margin quickly.
Good for select font.
Bad for current line highlight loose when focus out.
Great extension. I would love to keep the console without TextBox.
Лучшее решение для оформления DevTools браузера
It cannot display whole word in tab line, it looks like this ☟
Elemen… Conso… Sourc… Network… Performan… Memory Application Securi… Audi…
But after `ctrl +/-` it can.
1. tab name cannot show completely which is “Eleme…, Cons…, Sour…, Netw…”
2. icon disppear when hover on it
I have an issue that tabname can not show completely.Mine is “Eleme…, Cons…, Sour…, Netw…”
Thanks for this, the default dark theme has such harsh contrasts. The themes are much better than the default.
Dev tool has not been changed …
Thanks team so much! Awesome!!! <3
Unfortunately, it’s not working for me either.
Enabled Developer Tools Experiments, ticked on Allow Custom UI Themes restarted, tried to totally reset chrome to default but still no go. Theme: System Preference, Dark and Light switched and no go.
It’s a pitty, because it all looks great in the extension panel 😉
Awesome! WebStorm and Chrome DevTool have the same theme!
It doesn’t work for me. Even tho i’ve followed all aditional steps enabling the flag and the required settings on my dev tools panel.
Not working at all. I tried to apply it to new chrome user without other addons but still nothing. Nor F12 nor browser reloading activates this app 🙁
Awesome
Amazing ;D
It is beautiful. But when I use the DevTools, it lags.
Awesome.
Awesome
Hard to see text that was selected in tab source
Awesome, i like the look and feel. But i had to switch the dev tools to dark theme to get material theme visible. It would be great if you mention that in your installation instructions.
Pretty good, especially if you’re used to the equivalent plugin on JetBrains IDEs. My only complaint is that there seems to be lacking space between HTML tags and it’s expand arrow on my machine and I’m not sure if it’s a settings issue or if it’s the plugin.