DevToolsColors
Firefox developers: 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 |
#ebeced rgba(235, 236, 237, 1) |
--theme-tab-toolbar-background |
| Toolbars |
#343c45 rgba(52, 60, 69, 1) |
#f0f1f2 rgba(240, 241, 242, 1) |
--theme-toolbar-background |
| Selection Background |
#1d4f73 rgba(29, 79, 115, 1) |
#4c9ed9 rgba(76, 158, 217, 1) |
--theme-selection-background |
| Selection Text Color |
#f5f7fa rgba(245, 247, 250, 1) |
#f5f7fa rgba(245, 247, 250, 1) |
--theme-selection-color |
| Splitters |
#000000 rgba(0, 0, 0, 1) |
#aaaaaa rgba(170, 170, 170, 1) |
--theme-splitter-color |
| Comment |
#5c6773 |
#747573 |
--theme-comment |
| Content Colors | |||
| Background - Body |
#14171a rgba(17, 19, 21, 1) |
#fcfcfc rgba(252, 252, 252, 1) |
--theme-body-background |
| Background - Sidebar |
#181d20 rgba(24, 29, 32, 1) |
#f7f7f7 rgba(247, 247, 247, 1) |
--theme-sidebar-background |
| Background - Attention |
#b28025 rgba(178, 128, 37, 1) |
#e6b064 rgba(230, 176, 100, 1) |
--theme-contrast-background |
| Text Colors | |||
| Body Text |
#8fa1b2 rgba(143, 161, 178, 1) |
#18191a rgba(24, 25, 26, 1) |
--theme-body-color |
| Foreground (Text) - Grey |
#b6babf rgba(182, 186, 191, 1) |
#585959 rgba(88, 89, 89, 1) |
--theme-body-color-alt |
| Content (Text) - High Contrast |
#a9bacb rgba(169, 186, 203, 1) |
#292e33 rgba(41, 46, 51, 1) |
--theme-content-color1 |
| Content (Text) - Grey |
#8fa1b2 rgba(143, 161, 178, 1) |
#8fa1b2 rgba(143, 161, 178, 1) |
--theme-content-color2 |
| Content (Text) - Dark Grey |
#667380 rgba(102, 115, 128, 1) |
#667380 rgba(102, 115, 128, 1) |
--theme-content-color3 |
| Highlight Colors | |||
| Blue |
#46afe3 rgba(70, 175, 227, 1) |
#0088cc rgba(0, 136, 204, 1) |
--theme-highlight-blue |
| Purple |
#6b7abb rgba(107, 122, 187, 1) |
#5b5fff rgba(91, 95, 255, 1) |
--theme-highlight-purple |
| Pink |
#df80ff rgba(223, 128, 255, 1) |
#b82ee5 rgba(184, 46, 229, 1) |
--theme-highlight-pink |
| Red |
#eb5368 rgba(235, 83, 104, 1) |
#ed2655 rgba(237, 38, 85, 1) |
--theme-highlight-red |
| Orange |
#d96629 rgba(217, 102, 41, 1) |
#f13c00 rgba(241, 60, 0, 1) |
--theme-highlight-orange |
| Light Orange |
#d99b28 rgba(217, 155, 40, 1) |
#d97e00 rgba(217, 126, 0, 1) |
--theme-highlight-lightorange |
| Green |
#70bf53 rgba(112, 191, 83, 1) |
#2cbb0f rgba(44, 187, 15, 1) |
--theme-highlight-green |
| Blue-Grey |
#5e88b0 rgba(94, 136, 176, 1) |
#0072ab rgba(0, 114, 171, 1) |
--theme-highlight-bluegrey |
| Yellow |
#ffffb4 rgba(255, 255, 180, 1) |
#ffffb4 rgba(255, 255, 180, 1) |
--theme-highlight-yellow |
Not yet finalized. See bug 916766 for progress.