tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

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.