Home Original page

GitHub - AtomMaterialUI/material-dev-tools: Material Theme UI for Chrome DevTools

IMPORTANT: Chromium decided to end support to custom stylesheets for the DevTools. As a result, this plugin is no longer working.

Logo

Material DevTools Collection

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!

Features

Available 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

Other Features

  • Custom Font Family
  • Custom Font Size
  • Accent Color
  • Accent Scrollbars

Installation

  1. Open Developer Tools
  2. Open the Settings > Experiments > "Allow extensions to load custom stylesheets"
  3. Close and reopen the DevTools

Local development

  1. Clone the project
  git clone https://github.com/mallowigi/material-dev-tools
  1. Install dependencies
  1. Start the server

  1. Open the Chrome Extensions Management Page.

  2. Select Load unpacked extension

  3. Select the build/chrome-mv3/dev directory.

  4. Verify that the extension is loaded and that the icon show up in the Toolbar.

  5. Run the styles compiler

Themes Management

If you want to add new themes or modify the existing themes:

  1. Open the public/themes.yml file

  2. Modify themes

  3. Run gulp themes

  1. Reopen the settings to reload the colors

  2. Reopen the devtools

Important files

  • /new/default.scss -> SCSS variables reading the CSS variables generated by Svelte
  • /new/light.scss, /new/dark.scss -> the dark and light equivalents
  • /src/utils/styleBuilder.ts -> file that generates the :root CSS variables from the themes.json
  • /src/devtools.svelte -> generates the :root inside the Devtools panel
  • public/themes.yml -> Themes Manifest, will generate themes.json used by the extension

Releasing

  1. Run plasmo:zip to create the zip file

  1. Bump the version in package.json

  2. Upload the .plasmo/xxx.zip file to the Chrome Web Store

FAQ

I have installed the extension but nothing happened.

Make sure you've enabled the Chromium Experiment Allow extensions to load custom stylesheets, and reload the DevTools.

I selected the X theme but it looks ugly!

Please make sure you've selected the DARK or LIGHT theme in the DevTools settings, according to the selected theme.

Authors

Acknowledgements

License

MIT