A monokai-pro inspired theme for Firefox devtools

userChrome.css

:root.theme-dark {
  /* --theme-body-background: var(--grey-80); */
  --theme-body-background: #2c292e !important;
  --theme-body-background: hsl(270,4%,17%) !important;
  --theme-sidebar-background: #202020 !important;
  --theme-contrast-background: #efb35b !important;

  /* Toolbar */
  --theme-tab-toolbar-background: #202020 !important;
  --theme-toolbar-background: #202020 !important;
  --theme-toolbar-color: rgba(255,255,255,0.65) !important;
  --theme-toolbar-selected-color: rgba(255,255,255,0.9) !important;
  --theme-toolbar-highlighted-color: var(--green-55) !important;

  /* Selection */
  --theme-selection-background-hover: hsl(270,4%,9%) !important;

  --theme-body-color: hsl(270,9%,85%) !important;
  --theme-body-color-alt: #d6d6d6 !important;
  --theme-content-color1: #d6d6d6 !important;
  --theme-content-color2: #d6d6d6 !important;
  --theme-content-color3: #d6d6d6 !important;
  --theme-highlight-green: hsl(86,60%,68%) !important;
  --theme-highlight-blue: hsl(350,92%,70%) !important;
  --theme-highlight-bluegrey: #fdfdfd !important;
  --theme-highlight-purple: hsl(40,97%,76%) !important;
  --theme-highlight-lightorange: hsl(246,80%,80%) !important;
  --theme-highlight-orange: hsl(21,86%,70%) !important;
  --theme-highlight-red: hsl(188,70%,73%) !important;
  --theme-highlight-pink: hsl(5,48%,51%) !important;

  /* For accessibility purposes we want to enhance the focus styling. This
   * should improve keyboard navigation usability. */
  --theme-focus-outline-color: #aeb3b9 !important;;

  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
  --theme-graphs-green: hsl(86,60%,68%) !important;
  --theme-graphs-blue: hsl(188,70%,73%) !important;
  --theme-graphs-purple: hsl(246,80%,80%) !important;
  --theme-graphs-yellow: hsl(40,97%,76%) !important;
  --theme-graphs-orange: hsl(21,86%,70%) !important;
  --theme-graphs-red: hsl(5,48%,51%) !important;

}