<div class="warning">
<p>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 <code>/browser/themes/*/devtools/</code>. File a DevTools bug accordingly.</p>
</div>
<p class="summary"><span class="seoSummary">This chart lists colors and CSS variables as implemented in the dark theme and light theme for developer tools.</span></p>
<table>
<thead>
<tr>
<th> </th>
<th>Dark Theme</th>
<th>Light Theme</th>
<th>CSS Variable</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="3">
<h3 id="Chrome_Colors">Chrome Colors</h3>
</th>
<th> </th>
</tr>
<tr>
<th>Tab Toolbar</th>
<td>
<div class="swatch" style="background: #252c33;"> </div>
<p>#252c33<br />
rgba(37, 44, 51, 1)</p>
</td>
<td>
<div class="swatch" style="background: #ebeced;"> </div>
#ebeced<br />
rgba(235, 236, 237, 1)</td>
<td>--theme-tab-toolbar-background</td>
</tr>
<tr>
<th>Toolbars</th>
<td>
<div class="swatch" style="background: #343c45;"> </div>
#343c45<br />
rgba(52, 60, 69, 1)</td>
<td>
<div class="swatch" style="background: #f0f1f2;"> </div>
#f0f1f2<br />
rgba(240, 241, 242, 1)</td>
<td>--theme-toolbar-background</td>
</tr>
<tr>
<th>Selection Background</th>
<td>
<div class="swatch" style="background: #1d4f73;"> </div>
#1d4f73<br />
rgba(29, 79, 115, 1)</td>
<td>
<div class="swatch" style="background: #4c9ed9;"> </div>
#4c9ed9<br />
rgba(76, 158, 217, 1)</td>
<td>--theme-selection-background</td>
</tr>
<tr>
<th>Selection Text Color</th>
<td>
<div class="swatch" style="background: #f5f7fa;"> </div>
#f5f7fa<br />
rgba(245, 247, 250, 1)</td>
<td>
<div class="swatch" style="background: #f5f7fa;"> </div>
#f5f7fa<br />
rgba(245, 247, 250, 1)</td>
<td>--theme-selection-color</td>
</tr>
<tr>
<th>Splitters</th>
<td>
<div class="swatch" style="background: #000000;"> </div>
#000000<br />
rgba(0, 0, 0, 1)</td>
<td>
<div class="swatch" style="background: #aaaaaa;"> </div>
#aaaaaa<br />
rgba(170, 170, 170, 1)</td>
<td>--theme-splitter-color</td>
</tr>
<tr>
<th>Comment</th>
<td>
<div class="swatch" style="background: #5c6773;"> </div>
<p>#5c6773<br />
rgba(92, 103, 115, 1)</p>
</td>
<td>
<div class="swatch" style="background: #747573;"> </div>
<p>#747573<br />
rgba(116, 117, 115, 1)</p>
</td>
<td>--theme-comment</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">
<h3 id="Content_Colors">Content Colors</h3>
</th>
<th> </th>
</tr>
<tr>
<th>Background - Body</th>
<td>
<div class="swatch" style="background: #14171a;"> </div>
#14171a<br />
rgba(17, 19, 21, 1)</td>
<td>
<div class="swatch" style="background: #fcfcfc;"> </div>
#fcfcfc<br />
rgba(252, 252, 252, 1)</td>
<td>--theme-body-background</td>
</tr>
<tr>
<th>Background - Sidebar</th>
<td>
<div class="swatch" style="background: #181d20;"> </div>
#181d20<br />
rgba(24, 29, 32, 1)</td>
<td>
<div class="swatch" style="background: #f7f7f7;"> </div>
#f7f7f7<br />
rgba(247, 247, 247, 1)</td>
<td>--theme-sidebar-background</td>
</tr>
<tr>
<th>Background - Attention</th>
<td>
<div class="swatch" style="background: #b28025;"> </div>
#b28025<br />
rgba(178, 128, 37, 1)</td>
<td>
<div class="swatch" style="background: #e6b064;"> </div>
#e6b064<br />
rgba(230, 176, 100, 1)</td>
<td>--theme-contrast-background</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">
<h3 id="Text_Colors">Text Colors</h3>
</th>
<th> </th>
</tr>
<tr>
<th>Body Text</th>
<td>
<div class="swatch" style="background: #8fa1b2;"> </div>
#8fa1b2<br />
rgba(143, 161, 178, 1)</td>
<td>
<div class="swatch" style="background: #18191a;"> </div>
#18191a<br />
rgba(24, 25, 26, 1)</td>
<td>--theme-body-color</td>
</tr>
<tr>
<th>Foreground (Text) - Grey</th>
<td>
<div class="swatch" style="background: #b6babf;"> </div>
#b6babf<br />
rgba(182, 186, 191, 1)</td>
<td>
<div class="swatch" style="background: #585959;"> </div>
#585959<br />
rgba(88, 89, 89, 1)</td>
<td>--theme-body-color-alt</td>
</tr>
<tr>
<th>Content (Text) - High Contrast</th>
<td>
<div class="swatch" style="background: #a9bacb;"> </div>
#a9bacb<br />
rgba(169, 186, 203, 1)</td>
<td>
<div class="swatch" style="background: #292e33;"> </div>
#292e33<br />
rgba(41, 46, 51, 1)</td>
<td>--theme-content-color1</td>
</tr>
<tr>
<th>Content (Text) - Grey</th>
<td>
<div class="swatch" style="background: #8fa1b2;"> </div>
#8fa1b2<br />
rgba(143, 161, 178, 1)</td>
<td>
<div class="swatch" style="background: #8fa1b2;"> </div>
#8fa1b2<br />
rgba(143, 161, 178, 1)</td>
<td>--theme-content-color2</td>
</tr>
<tr>
<th>Content (Text) - Dark Grey</th>
<td>
<div class="swatch" style="background: #667380;"> </div>
#667380<br />
rgba(102, 115, 128, 1)</td>
<td>
<div class="swatch" style="background: #667380;"> </div>
#667380<br />
rgba(102, 115, 128, 1)</td>
<td>--theme-content-color3</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="3">
<h3 id="Highlight_Colors">Highlight Colors</h3>
</th>
<th> </th>
</tr>
<tr>
<th>Blue</th>
<td>
<div class="swatch" style="background: #46afe3;"> </div>
#46afe3<br />
rgba(70, 175, 227, 1)</td>
<td>
<div class="swatch" style="background: #0088cc;"> </div>
#0088cc<br />
rgba(0, 136, 204, 1)</td>
<td>--theme-highlight-blue</td>
</tr>
<tr>
<th>Purple</th>
<td>
<div class="swatch" style="background: #6b7abb;"> </div>
#6b7abb<br />
rgba(107, 122, 187, 1)</td>
<td>
<div class="swatch" style="background: #5b5fff;"> </div>
#5b5fff<br />
rgba(91, 95, 255, 1)</td>
<td>--theme-highlight-purple</td>
</tr>
<tr>
<th>Pink</th>
<td>
<div class="swatch" style="background: #df80ff;"> </div>
#df80ff<br />
rgba(223, 128, 255, 1)</td>
<td>
<div class="swatch" style="background: #b82ee5;"> </div>
#b82ee5<br />
rgba(184, 46, 229, 1)</td>
<td>--theme-highlight-pink</td>
</tr>
<tr>
<th>Red</th>
<td>
<div class="swatch" style="background: #eb5368;"> </div>
#eb5368<br />
rgba(235, 83, 104, 1)</td>
<td>
<div class="swatch" style="background: #ed2655;"> </div>
#ed2655<br />
rgba(237, 38, 85, 1)</td>
<td>--theme-highlight-red</td>
</tr>
<tr>
<th>Orange</th>
<td>
<div class="swatch" style="background: #d96629;"> </div>
#d96629<br />
rgba(217, 102, 41, 1)</td>
<td>
<div class="swatch" style="background: #f13c00;"> </div>
#f13c00<br />
rgba(241, 60, 0, 1)</td>
<td>--theme-highlight-orange</td>
</tr>
<tr>
<th>Light Orange</th>
<td>
<div class="swatch" style="background: #d99b28;"> </div>
#d99b28<br />
rgba(217, 155, 40, 1)</td>
<td>
<div class="swatch" style="background: #d97e00;"> </div>
#d97e00<br />
rgba(217, 126, 0, 1)</td>
<td>--theme-highlight-lightorange</td>
</tr>
<tr>
<th>Green</th>
<td>
<div class="swatch" style="background: #70bf53;"> </div>
#70bf53<br />
rgba(112, 191, 83, 1)</td>
<td>
<div class="swatch" style="background: #2cbb0f;"> </div>
#2cbb0f<br />
rgba(44, 187, 15, 1)</td>
<td>--theme-highlight-green</td>
</tr>
<tr>
<th>Blue-Grey</th>
<td>
<div class="swatch" style="background: #5e88b0;"> </div>
#5e88b0<br />
rgba(94, 136, 176, 1)</td>
<td>
<div class="swatch" style="background: #0072ab;"> </div>
#0072ab<br />
rgba(0, 114, 171, 1)</td>
<td>--theme-highlight-bluegrey</td>
</tr>
</tbody>
</table>
<div class="warning">
<p>Not yet finalized. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=916766">bug 916766</a> for progress.</p>
</div>
<p> </p>