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 |
#ebeced |
|
Toolbars |
#343c45 |
#f0f1f2 |
|
Selection Background |
#1d4f73 |
#4c9ed9 |
|
Selection Text Color |
#f5f7fa |
#f5f7fa |
|
Splitters |
#000000 |
#aaaaaa |
|
Comment |
#5c6773 |
#747573 |
|
Content Colors |
|||
Background - Body |
#14171a |
#fcfcfc |
|
Background - Sidebar |
#181d20 |
#f7f7f7 |
|
Background - Attention |
#b28025 |
#e6b064 |
|
Text Colors |
|||
Body Text |
#8fa1b2 |
#18191a |
|
Foreground (Text) - Grey |
#b6babf |
#585959 |
|
Content (Text) - High Contrast |
#a9bacb |
#292e33 |
|
Content (Text) - Grey |
#8fa1b2 |
#8fa1b2 |
|
Content (Text) - Dark Grey |
#667380 |
#667380 |
|
Highlight Colors |
|||
Blue |
#46afe3 |
#0088cc |
|
Purple |
#6b7abb |
#5b5fff |
|
Pink |
#df80ff |
#b82ee5 |
|
Red |
#eb5368 |
#ed2655 |
|
Orange |
#d96629 |
#f13c00 |
|
Light Orange |
#d99b28 |
#d97e00 |
|
Green |
#70bf53 |
#2cbb0f |
|
Blue-Grey |
#5e88b0 |
#0072ab |
|
Yellow |
#ffffb4 |
#ffffb4 |
|
Warning
Not yet finalized. See bug 916766 for progress.