index.rst (4538B)
1 ============== 2 DevToolsColors 3 ============== 4 5 .. warning:: 6 **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. 7 8 9 This chart lists colors and CSS variables as implemented in the dark theme and light theme for developer tools. 10 11 .. |br| raw:: html 12 13 <br/><br/> 14 15 .. list-table:: 16 :widths: 25 22 22 31 17 :header-rows: 1 18 19 * - 20 - Dark Theme 21 - Light Theme 22 - CSS Variables 23 24 * - **Chrome Colors** 25 - 26 - 27 - 28 29 * - **Tab Toolbar** 30 - #252c33 |br| 31 rgba(37, 44, 51, 1) 32 - #ebeced |br| 33 rgba(235, 236, 237, 1) 34 - ``--theme-tab-toolbar-background`` 35 36 * - **Toolbars** 37 - #343c45 |br| 38 rgba(52, 60, 69, 1) 39 - #f0f1f2 |br| 40 rgba(240, 241, 242, 1) 41 - ``--theme-toolbar-background`` 42 43 * - **Selection Background** 44 - #1d4f73 |br| 45 rgba(29, 79, 115, 1) 46 - #4c9ed9 |br| 47 rgba(76, 158, 217, 1) 48 - ``--theme-selection-background`` 49 50 * - **Selection Text Color** 51 - #f5f7fa |br| 52 rgba(245, 247, 250, 1) 53 - #f5f7fa |br| 54 rgba(245, 247, 250, 1) 55 - ``--theme-selection-color`` 56 57 * - **Splitters** 58 - #000000 |br| 59 rgba(0, 0, 0, 1) 60 - #aaaaaa |br| 61 rgba(170, 170, 170, 1) 62 - ``--theme-splitter-color`` 63 64 * - **Comment** 65 - #5c6773 |br| 66 rgba(92, 103, 115, 1) 67 - #747573 |br| 68 rgba(116, 117, 115, 1) 69 - ``--theme-comment`` 70 71 * - **Content Colors** 72 - 73 - 74 - 75 76 * - **Background - Body** 77 - #14171a |br| 78 rgba(17, 19, 21, 1) 79 - #fcfcfc |br| 80 rgba(252, 252, 252, 1) 81 - ``--theme-body-background`` 82 83 * - **Background - Sidebar** 84 - #181d20 |br| 85 rgba(24, 29, 32, 1) 86 - #f7f7f7 |br| 87 rgba(247, 247, 247, 1) 88 - ``--theme-sidebar-background`` 89 90 * - **Background - Attention** 91 - #b28025 |br| 92 rgba(178, 128, 37, 1) 93 - #e6b064 |br| 94 rgba(230, 176, 100, 1) 95 - ``--theme-contrast-background`` 96 97 * - **Text Colors** 98 - 99 - 100 - 101 102 * - **Body Text** 103 - #8fa1b2 |br| 104 rgba(143, 161, 178, 1) 105 - #18191a |br| 106 rgba(24, 25, 26, 1) 107 - ``--theme-body-color`` 108 109 * - **Foreground (Text) - Grey** 110 - #b6babf |br| 111 rgba(182, 186, 191, 1) 112 - #585959 |br| 113 rgba(88, 89, 89, 1) 114 - ``--theme-body-color-alt`` 115 116 * - **Content (Text) - High Contrast** 117 - #a9bacb |br| 118 rgba(169, 186, 203, 1) 119 - #292e33 |br| 120 rgba(41, 46, 51, 1) 121 - ``--theme-content-color1`` 122 123 * - **Content (Text) - Grey** 124 - #8fa1b2 |br| 125 rgba(143, 161, 178, 1) 126 - #8fa1b2 |br| 127 rgba(143, 161, 178, 1) 128 - ``--theme-content-color2`` 129 130 * - **Content (Text) - Dark Grey** 131 - #667380 |br| 132 rgba(102, 115, 128, 1) 133 - #667380 |br| 134 rgba(102, 115, 128, 1) 135 - ``--theme-content-color3`` 136 137 * - **Highlight Colors** 138 - 139 - 140 - 141 142 * - **Blue** 143 - #46afe3 |br| 144 rgba(70, 175, 227, 1) 145 - #0088cc |br| 146 rgba(0, 136, 204, 1) 147 - ``--theme-highlight-blue`` 148 149 * - **Purple** 150 - #6b7abb |br| 151 rgba(107, 122, 187, 1) 152 - #5b5fff |br| 153 rgba(91, 95, 255, 1) 154 - ``--theme-highlight-purple`` 155 156 * - **Pink** 157 - #df80ff |br| 158 rgba(223, 128, 255, 1) 159 - #b82ee5 |br| 160 rgba(184, 46, 229, 1) 161 - ``--theme-highlight-pink`` 162 163 * - **Red** 164 - #eb5368 |br| 165 rgba(235, 83, 104, 1) 166 - #ed2655 |br| 167 rgba(237, 38, 85, 1) 168 - ``--theme-highlight-red`` 169 170 * - **Orange** 171 - #d96629 |br| 172 rgba(217, 102, 41, 1) 173 - #f13c00 |br| 174 rgba(241, 60, 0, 1) 175 - ``--theme-highlight-orange`` 176 177 * - **Light Orange** 178 - #d99b28 |br| 179 rgba(217, 155, 40, 1) 180 - #d97e00 |br| 181 rgba(217, 126, 0, 1) 182 - ``--theme-highlight-lightorange`` 183 184 * - **Green** 185 - #70bf53 |br| 186 rgba(112, 191, 83, 1) 187 - #2cbb0f |br| 188 rgba(44, 187, 15, 1) 189 - ``--theme-highlight-green`` 190 191 * - **Blue-Grey** 192 - #5e88b0 |br| 193 rgba(94, 136, 176, 1) 194 - #0072ab |br| 195 rgba(0, 114, 171, 1) 196 - ``--theme-highlight-bluegrey`` 197 198 * - **Yellow** 199 - #ffffb4 |br| 200 rgba(255, 255, 180, 1) 201 - #ffffb4 |br| 202 rgba(255, 255, 180, 1) 203 - ``--theme-highlight-yellow`` 204 205 206 .. warning:: 207 Not yet finalized. See `bug 916766 <https://bugzilla.mozilla.org/show_bug.cgi?id=916766>`_ for progress.