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