Source code
Revision control
Copy as Markdown
Other Tools
---
myst:
substitutions:
br: |-
```{raw} html
<br/><br/>```
---
# 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.
```{eval-rst}
.. raw:: html
<br/>
.. list-table::
:widths: 25 22 22 31
:header-rows: 1
* -
- 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](https://bugzilla.mozilla.org/show_bug.cgi?id=916766) for progress.
:::