Skip to content

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

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 by donuts
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information