DevToolsColors

Warning

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 Variables

Chrome Colors

Tab Toolbar

#252c33 rgba(37, 44, 51, 1)

#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 rgba(92, 103, 115, 1)

#747573 rgba(116, 117, 115, 1)

--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

Warning

Not yet finalized. See bug 916766 for progress.