Don't change any of these values without UX approval. If any of these values need to be changed, you will need to change some CSS code in /browser/themes/*/devtools/. File a DevTools bug accordingly.
This chart lists colors and CSS variables as implemented in the dark theme and light theme for developer tools.
| Dark Theme | Light Theme | CSS Variable | |
|---|---|---|---|
Chrome Colors |
|||
| Tab Toolbar |
#252c33 |
rgba(235, 236, 237, 1) |
--theme-tab-toolbar-background |
| Toolbars |
rgba(52, 60, 69, 1) |
rgba(240, 241, 242, 1) |
--theme-toolbar-background |
| Selection Background |
rgba(29, 79, 115, 1) |
rgba(76, 158, 217, 1) |
--theme-selection-background |
| Selection Text Color |
rgba(245, 247, 250, 1) |
rgba(245, 247, 250, 1) |
--theme-selection-color |
| Splitters |
rgba(0, 0, 0, 1) |
rgba(170, 170, 170, 1) |
--theme-splitter-color |
| Comment |
#5c6773 |
#747573 |
--theme-comment |
Content Colors |
|||
| Background - Body |
rgba(17, 19, 21, 1) |
rgba(252, 252, 252, 1) |
--theme-body-background |
| Background - Sidebar |
rgba(24, 29, 32, 1) |
rgba(247, 247, 247, 1) |
--theme-sidebar-background |
| Background - Attention |
rgba(178, 128, 37, 1) |
rgba(230, 176, 100, 1) |
--theme-contrast-background |
Text Colors |
|||
| Body Text |
rgba(143, 161, 178, 1) |
rgba(24, 25, 26, 1) |
--theme-body-color |
| Foreground (Text) - Grey |
rgba(182, 186, 191, 1) |
rgba(88, 89, 89, 1) |
--theme-body-color-alt |
| Content (Text) - High Contrast |
rgba(169, 186, 203, 1) |
rgba(41, 46, 51, 1) |
--theme-content-color1 |
| Content (Text) - Grey |
rgba(143, 161, 178, 1) |
rgba(143, 161, 178, 1) |
--theme-content-color2 |
| Content (Text) - Dark Grey |
rgba(102, 115, 128, 1) |
rgba(102, 115, 128, 1) |
--theme-content-color3 |
Highlight Colors |
|||
| Blue |
rgba(70, 175, 227, 1) |
rgba(0, 136, 204, 1) |
--theme-highlight-blue |
| Purple |
rgba(107, 122, 187, 1) |
rgba(91, 95, 255, 1) |
--theme-highlight-purple |
| Pink |
rgba(223, 128, 255, 1) |
rgba(184, 46, 229, 1) |
--theme-highlight-pink |
| Red |
rgba(235, 83, 104, 1) |
rgba(237, 38, 85, 1) |
--theme-highlight-red |
| Orange |
rgba(217, 102, 41, 1) |
rgba(241, 60, 0, 1) |
--theme-highlight-orange |
| Light Orange |
rgba(217, 155, 40, 1) |
rgba(217, 126, 0, 1) |
--theme-highlight-lightorange |
| Green |
rgba(112, 191, 83, 1) |
rgba(44, 187, 15, 1) |
--theme-highlight-green |
| Blue-Grey |
rgba(94, 136, 176, 1) |
rgba(0, 114, 171, 1) |
--theme-highlight-bluegrey |
| Yellow |
rgba(255, 255, 180, 1) |
rgba(255, 255, 180, 1) |
--theme-highlight-yellow |
Not yet finalized. See bug 916766 for progress.