Google Chrome Customize Developer Tools Theme/Color Schema

Google Chrome Customize Developer Tools Theme / Color Schema

1. Install a DevTools Theme like Zero Dark Matrix
2. Goto chrome://flags/#enable-devtools-experiments, and enable Developer Tools experiments.
3. Select Relaunch Now at the bottom of the page.
4. F12 to Open developer tools, go to Settings, select Experiments tab, and check Allow custom UI themes.
5. F12, Reload DevTools.

How can I emulate prefers-color-scheme media query in Chrome?

Since Chrome version 79 you can toggle between prefers-color-scheme: dark and prefers-color-scheme: light from the Rendering panel

1. Open Developer tools (otherwise the key combination below opens the print dialog)
2. Open the Command Control: Ctrl+Shift+P or Command+Shift+P (Mac)
3. Type "Show rendering"
4. Set the Emulate CSS media feature prefers-color-scheme to the value you want to debug

Customize Firefox Developer dev tools color theme

I found the answer to this in the Mozilla support forum and basically you have to modify the css style creating an overriding chrome stylesheet.

You would have to write your own style rules and apply them via
userChrome.css or Stylish. Use the !important flag to override
existing style rules.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

The customization files userChrome.css (user interface) and
userContent.css (websites) are located in the chrome folder in the
Firefox profile folder.

http://kb.mozillazine.org/Editing_configuration

Google chrome theme: modifying the download section color

Try changing to "toolbar": [128,128, 128]

---

Related Topics