Skip to content

Instantly share code, notes, and snippets.

@tterb
Created January 31, 2018 05:21
Show Gist options
  • Save tterb/4b0fffa54f4bbda2dd39d31d296895c8 to your computer and use it in GitHub Desktop.
Save tterb/4b0fffa54f4bbda2dd39d31d296895c8 to your computer and use it in GitHub Desktop.
A monokai-pro inspired theme for Firefox devtools
: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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment