Skip to content

devtools zero dark matrix theme readability change -- show how to inspect devtools dom

Notifications You must be signed in to change notification settings

flkeysgeek/devtools-themes

Repository files navigation

Overview

  • Improve readability of devtools Zero Dark Matrix canary.css
    changes are minor
  • How to find Developer Tools css hooks i.e. selectors
    inspecting devtools with devtools

Zero Dark Matrix theme -- Original

Zero Dark Matrix theme -- Changes

  • comment color changed to dim pink
  • gutter lineno little brighter
  • elements > side-panel > styles: unmatched selectors changed to lime green
  • suggest popover .selected and :hover BG changed to deep purple
  • sources > javascript: Object inspector BG changed to green
    ...no contrast with black on black
    ...mouseover nearly impossible to see black hover
    ...arrow above popover border more clutter than value (hidden)
    ...moved popup up to fully cover next line -- sliver looks like junk

standard Dark theme . . . Zero Dark Matrix
.

changes
.

how to inspect devtools html and css with devtools

After going Dark for a couple weeks, got bug up my ??? to make some minor css tweaks.

How hard can that be? ... but where is devtools html and css?

see using devtools to inspect its own elements

installation

  • Enable DevTools experiments at chrome:https://flags/#enable-devtools-experiments
  • relaunch Chrome and open DevTools
  • open Settings > Experiments and check Allow UI themes experiment
  • open devtools > setting > Experiments and check Allow custom UI themes

from github repository

  • download repository and unzip "zero II" folder
  • open chrome:https://extensions
  • Zero Dark Matrix must be removed -- zero II uses same extension ID
  • click "Load unpacked extension..." and select extracted "zero II" folder
  • close and re-open any open "Developer Tools" windows

from chrome web store -- under development

Leaning toward distributing changes via devtools theme color picker with changes as default for Zero Dark Matrix

Only plan on adding very few selectors to the color picker with ability to add more from the popup screen with instructions on how to find devtools selectors by inspecting devtools with devtools.

wiki -- what I learned

explains how to modify any devtools theme and/or css including...

how to inspect devtools with devtools to find css selectors

About

devtools zero dark matrix theme readability change -- show how to inspect devtools dom

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages