CRX id
jmefikbdhgocdjeejjnnepgnfkkbpgjo
jmefikbdhgocdjeejjnnepgnfkkbpgjo
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
- (2023-11-08) Etienne Wille: The Color of the console doesnt change for me. Also the whole theme resets to default sometimes
- (2023-10-26) Eric Aprioku: Simply amazing and breathtaking!!!
- (2023-03-30) Stephan Lamoureux: amazing, I wish they had this from the chrome themes as well.
- (2023-01-25) Mohammad Mahdi: Really good, was tired of that gray ugly theme and font. But the cursor is not visible in editor in source tab
- (2022-12-02) Garrett Aldridge: 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.
- (2022-08-02) Hydra Musik: Not working anymore for me
- (2022-07-20) KaKa Xie: 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)
- (2022-07-08) flash usr: Would be great to create custom themes or at least modify the current ones. Thank you for all your hard work.
- (2022-06-25) Marcos Gustavo Campos da Silva: do not work
- (2022-04-13) Wonseok Kong: It is too hard to find the cursor in the console of the developer tool. Is there any way to improve it?
- (2022-04-12) Ferris Argyle: В консоли цвет курсора чуть светлее фона. Печатаешь в слепую почти. Monokai Pro Изменить цвета тоже не помогает, через ctrl+shift+c загружается стандартный стиль
- (2022-04-11) Slavy Spasov: The cursor is hard to see once you start typing, otherwise 5*
- (2022-04-06) Bayram Arslan: <perfect star="5" />
- (2022-03-21) Shawn Pruden: 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!
- (2021-12-03) Sergio Alessandro Servillo: This extention is majestic but the console counter is not showed anymore. Can you also add a Tokyo Night Theme?
- (2021-11-26) Halim: Excellent Add-on. Thank you for efforts.
- (2021-09-09) Łukasz Kopyto: 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.
- (2021-08-30) Ahmet Atar: Hello, It's not working on Chrome 92.0.4515.159
- (2021-06-15) Tomas Östlind: Just awesome, nuff said! 😁
- (2021-06-01) Jubair Hasan: Very useful extension indeed. Gave a new life to my devtools.
- (2021-04-29) Pierre Ayfri: How can we change the theme (not light/dark, I mean the material theme) ?
- (2021-04-01) 可遇: oh,i can't use it when i change default theme,have somebodys help me?
- (2021-01-24) Daniel Barclay: First rate extension for anyone who wants a Material Theme feel in their Chrome DevTools! Perfect!
- (2020-08-20) Ramil Rakhimov: 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.
- (2020-08-20) cw hu: I have an issue that tabname can not show completely.Mine is "Eleme..., Cons..., Sour..., Netw..."
- (2020-07-01) Yunhai Wang: The computed tab got no color but black. It's not easy to modify padding and margin quickly.
- (2020-04-10) bw j: Good for select font. Bad for current line highlight loose when focus out.
- (2020-04-09) Shioko Ichisada: Great extension. I would love to keep the console without TextBox.
- (2020-03-12) Руслан Климов: Лучшее решение для оформления DevTools браузера
- (2020-01-20) White Ideal: 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.
- (2019-12-03) muyu Fan: 1. tab name cannot show completely which is "Eleme..., Cons..., Sour..., Netw..." 2. icon disppear when hover on it
- (2019-11-29) Li Dong: I have an issue that tabname can not show completely.Mine is "Eleme..., Cons..., Sour..., Netw..."
- (2019-11-13) Chad Gillenwater: Thanks for this, the default dark theme has such harsh contrasts. The themes are much better than the default.
- (2019-11-06) S.: Dev tool has not been changed ...
- (2019-11-01) Phan Trí: Thanks team so much! Awesome!!! <3
- (2019-10-31) Ramon Tonnaer: 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 ;-)
- (2019-10-30) Works perfectly with a gorgeous, fluid UI. Exceptional extension.
- (2019-10-25) Svetlanka Kr: Awesome! WebStorm and Chrome DevTool have the same theme!
- (2019-09-28) Jordan Humberto de Souza: 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.
- (2019-09-16) Kseniia Purikhova: 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 :(
- (2019-09-05) Maurici Abad Gutierrez: Awesome
- (2019-09-04) Kenneth Hauklien: Amazing ;D
- (2019-09-01) Vic X: It is beautiful. But when I use the DevTools, it lags.
- (2019-08-29) Nick Jorens: Awesome.
- (2019-08-16) Ronakon Wattanamongkolchoke: Awesome
- (2019-08-16) jindo katori: Hard to see text that was selected in tab source
- (2019-08-08) 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.
- (2019-08-05) Emanuel Garon: 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.
- (2019-08-01) Thallis Soares: Excelete extensão, usando o tema também no PHPStorm
- (2019-07-29) Sergey Evtushenko: Awesome! Same theme on PhpStorm now in dev tools :)