Skip to content
Snippets Groups Projects
New look: Off

Purple elements (e.g. Tor buttons) need dark theme variants

    • Open Issue created by donuts @donuts

    There are several components in the browser that use the Photon purple color scheme instead of Fx's default blue, including (but potentially not limited to):

    • "Tor Browser" in the identity block
    • "Connect" buttons
    • ".onion" available buttons
    • "Connected" status in the title bar
    • "Connected" flag on bridge cards
    • Connection status spinners

    And in the new homepage being developed in #41333 (closed):

    • Links
    • Onionize toggle

    Typically, these use the following values for light theme:

    • default: purple-60 #8000D7
    • hover: purple-70 #6200A4
    • pressed: purple-80 #440071
    • focus: purple-60 #8000D7

    And were designed to use the following values for dark theme, however this never happened:

    • default: purple-30 #C069FF
    • hover: purple-40 #AD3BFF
    • pressed: purple-50 #9400FF
    • focus: purple-60 #C069FF

    There are three issues here:

    1. Semantic color tokens for dark theme were never created.
    2. As @henry has rightfully pointed out, the previous design for dark theme went darker on interaction – which is unusual, and not accessible. However we were limited by a lack of having anything lighter than purple-30 in the browser.
    3. The purples used are out of date (having originated from Photon), and have since been superseded by new purple color tokens documented in the Acorn and Protocol styleguides.

    In order to fix this, we'll need to update our existing purple color tokens to include lighter steps. This could be done by migrating to the new values documented in Acorn/Protocol, or by using a custom purple palette.

    Edited

    Designs

      Child items ...

      2. Activity

      Please register or sign in to reply