Opened 9 months ago

Closed 2 months ago

#27478 closed defect (fixed)

Torbutton in Tor Browser 8 difficult to see in dark theme

Reported by: nsuchy Owned by: pospeselr
Priority: Medium Milestone:
Component: Applications/Tor Browser Version:
Severity: Normal Keywords: ux-team, tbb-8.0-issues, tbb-8.0.1-can, TorBrowserTeam201903R, tbb-8.5
Cc: tbb-team Actual Points:
Parent ID: #25658 Points:
Reviewer: Sponsor:

Description

Tor Browser 8 includes Firefox ESR 60's "dark theme". It looks quite nice and I elected to enable it. The Torbutton (used for security, and tor network settings) is difficult to see in contrast to other icons. In dark mode it'd be nice to enable a light grey version of it. Thoughts?

Child Tickets

Attachments (6)

Screen Shot 2018-09-05 at 2.22.06 PM.png (128.2 KB) - added by nsuchy 9 months ago.
dark-theme.zip (23.0 KB) - added by antonela 8 months ago.
dark_theme_torbutton_27478.png (37.3 KB) - added by arthuredelstein 8 months ago.
default_theme.png (10.8 KB) - added by pospeselr 2 months ago.
light_theme.png (14.6 KB) - added by pospeselr 2 months ago.
dark_theme.png (13.9 KB) - added by pospeselr 2 months ago.

Download all attachments as: .zip

Change History (19)

Changed 9 months ago by nsuchy

comment:1 Changed 9 months ago by gk

Keywords: ux-team tbb-8.0-issues added

Changed 8 months ago by antonela

Attachment: dark-theme.zip added

comment:2 Changed 8 months ago by antonela

hi! a dark-theme lover here!

I'm following Photon guidelines and attaching the .png for the Tor Button Icon ready to be implemented for the dark theme.

https://design.firefox.com/photon/visuals/color.html#dark-theme

Assets available here
https://trac.torproject.org/projects/tor/attachment/ticket/27478/dark-theme.zip

comment:3 Changed 8 months ago by gk

Keywords: tbb-8.0.1-can added

Marking for 8.0.1 can.

Changed 8 months ago by arthuredelstein

comment:4 Changed 8 months ago by arthuredelstein

Keywords: TorBrowserTeam201809R added

Here's a patch for review:

https://github.com/arthuredelstein/torbutton/commit/27478

And a screenshot:

comment:5 Changed 8 months ago by arthuredelstein

Status: newneeds_review

comment:6 Changed 8 months ago by gk

Resolution: fixed
Status: needs_reviewclosed

Looks good to me, thanks! Cherry-picked to master (commit 9156c5564a5da6bd8e17eab094d655034e4135b6).

comment:7 Changed 3 months ago by pospeselr

Resolution: fixed
Status: closedreopened

The color isn't quite right here with custom themes. As part of my work for #25658 figured out how firefox propagates the theme color to icons. In the source svg we need to set the fill to 'context-fill' and opacity to 'context-fill-opacity' and then the icon will get whatever colors are appropriate for the current theme.

comment:8 Changed 3 months ago by pospeselr

Owner: changed from tbb-team to pospeselr
Status: reopenedassigned

comment:9 Changed 3 months ago by gk

Cc: tbb-team added
Keywords: TorBrowserTeam201903 added; TorBrowserTeam201809R removed

comment:10 Changed 2 months ago by gk

Keywords: tbb-8.5 added

Tickets on our radar for 8.5

comment:11 Changed 2 months ago by pospeselr

Parent ID: #25658

Changed 2 months ago by pospeselr

Attachment: default_theme.png added

Changed 2 months ago by pospeselr

Attachment: light_theme.png added

Changed 2 months ago by pospeselr

Attachment: dark_theme.png added

comment:12 Changed 2 months ago by pospeselr

Keywords: TorBrowserTeam201903R added; TorBrowserTeam201903 removed
Status: assignedneeds_review

Excised the torbutton svg changes from #25658 into this branch : https://gitweb.torproject.org/user/richard/torbutton.git/commit/?h=bug_27478

Torbutton icon now takes on appropriate fill and opacity values from the current theme.

Light Theme:
https://trac.torproject.org/projects/tor/raw-attachment/ticket/27478/light_theme.png
Default Theme:
https://trac.torproject.org/projects/tor/raw-attachment/ticket/27478/default_theme.png
Dark Theme;
https://trac.torproject.org/projects/tor/raw-attachment/ticket/27478/dark_theme.png

Version 0, edited 2 months ago by pospeselr (next)

comment:13 Changed 2 months ago by gk

Resolution: fixed
Status: needs_reviewclosed

Looks good, thanks! Merged to master (commit 2930d898032e04443527af8c6528481f202a2c4e).

Note: See TracTickets for help on using tickets.