Opened 3 months ago

Closed 2 months ago

#31170 closed defect (fixed)

Implement a dark mode for the Snowflake proxy interface

Reported by: knowguy Owned by: dcf
Priority: Medium Milestone:
Component: Circumvention/Snowflake Version:
Severity: Normal Keywords: snowflake-webextension
Cc: arlolra, cohosh, phw, dcf, antonela Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description (last modified by dcf)

The icon is near unseeable on Firefox built in Dark Mode.

https://i.imgur.com/DJJqOcx.png

Child Tickets

Attachments (29)

DJJqOcx.png (1.3 KB) - added by dcf 3 months ago.
https://i.imgur.com/DJJqOcx.png
webext-v0.0.5-off-dark.png (591 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5, off, dark theme
webext-v0.0.5-on-dark.png (792 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5, on, dark theme
webext-v0.0.5.stroke-off-default.png (842 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5 with stroke, off, default theme
webext-v0.0.5.stroke-on-default.png (813 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5 with stroke, on, default theme
webext-v0.0.5.stroke-off-dark.png (826 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5 with stroke, off, dark theme
webext-v0.0.5.stroke-on-dark.png (914 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5 with stroke, on, dark theme
webext-v0.0.5-off-default.png (838 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5, off, default theme
webext-v0.0.5-on-default.png (807 bytes) - added by dcf 3 months ago.
Snowflake v0.0.5, on, default theme
status-off-dark.svg (8.0 KB) - added by antonela 3 months ago.
status-off.svg (7.8 KB) - added by antonela 3 months ago.
status-on-dark.svg (8.0 KB) - added by antonela 3 months ago.
status-on.svg (7.8 KB) - added by antonela 3 months ago.
popup-light.png (12.0 KB) - added by dcf 3 months ago.
Light-mode Firefox screenshot of https://gitweb.torproject.org/user/dcf/snowflake.git/log/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911
popup-dark.png (12.0 KB) - added by dcf 3 months ago.
Dark-mode Firefox screenshot of https://gitweb.torproject.org/user/dcf/snowflake.git/log/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911
toolbar-icon.png (70.3 KB) - added by antonela 3 months ago.
toolbar-icon.zip (43.9 KB) - added by antonela 3 months ago.
toolbar-off-dark.2.png (1.5 KB) - added by dcf 3 months ago.
toolbar-off-light.2.png (1.5 KB) - added by dcf 3 months ago.
toolbar-on-dark.2.png (1.5 KB) - added by dcf 3 months ago.
toolbar-on-light.2.png (1.5 KB) - added by dcf 3 months ago.
toolbar-running-dark.2.png (1.5 KB) - added by dcf 3 months ago.
toolbar-running-light.2.png (1.5 KB) - added by dcf 3 months ago.
popup-off-dark.2.png (9.6 KB) - added by dcf 3 months ago.
popup-off-light.2.png (10.1 KB) - added by dcf 3 months ago.
popup-on-dark.2.png (12.4 KB) - added by dcf 3 months ago.
popup-on-light.2.png (12.3 KB) - added by dcf 3 months ago.
popup-running-dark.2.png (12.3 KB) - added by dcf 3 months ago.
popup-running-light.2.png (12.1 KB) - added by dcf 3 months ago.

Download all attachments as: .zip

Change History (44)

comment:1 Changed 3 months ago by arlolra

Cc: antonela added
Keywords: snowflake-webextension added

The icon is near unseeable on Firefox built in Dark Mode.

Yes, thanks, @antonela (/cc'd here) pointed this out at the meeting last week.

Other considerations around this area brought up by cypherpunks are accessibility for the colour blind and that the icon doesn't exhibit six-fold radial symmetry.

Changed 3 months ago by dcf

Attachment: webext-v0.0.5-off-dark.png added

Snowflake v0.0.5, off, dark theme

Changed 3 months ago by dcf

Attachment: webext-v0.0.5-on-dark.png added

Snowflake v0.0.5, on, dark theme

Changed 3 months ago by dcf

Snowflake v0.0.5 with stroke, off, default theme

Changed 3 months ago by dcf

Snowflake v0.0.5 with stroke, on, default theme

Changed 3 months ago by dcf

Snowflake v0.0.5 with stroke, off, dark theme

Changed 3 months ago by dcf

Snowflake v0.0.5 with stroke, on, dark theme

Changed 3 months ago by dcf

Snowflake v0.0.5, off, default theme

Changed 3 months ago by dcf

Snowflake v0.0.5, on, default theme

comment:2 Changed 3 months ago by dcf

Description: modified (diff)

One quick fix is to add a light-colored stroke behind the graphic, like this.

current with stroke
Default themeSnowflake v0.0.5, off, default theme Snowflake v0.0.5, on, default themeSnowflake v0.0.5 with stroke, off, default themeSnowflake v0.0.5 with stroke, on, default theme
Dark themeSnowflake v0.0.5, off, dark themeSnowflake v0.0.5, on, dark themeSnowflake v0.0.5 with stroke, off, dark themeSnowflake v0.0.5 with stroke, on, dark theme
  • proxy/webext/icons/status-off.svg

    diff --git a/proxy/webext/icons/status-off.svg b/proxy/webext/icons/status-off.svg
    index f6605ea..996ea9b 100644
    a b  
    44    <title>status-off</title>
    55    <desc>Created with Sketch.</desc>
     6    <g stroke="white" stroke-width="2" stroke-opacity="0.8" fill="none" fill-rule="evenodd">
     7        <g transform="translate(-1003.000000, -111.000000)" fill="none">
     8            <use xlink:href="#status-off"/>
     9        </g>
     10    </g>
    611    <g id="Snowflake-Extension" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    712        <g id="00" transform="translate(-1003.000000, -111.000000)" fill="#4A4A4F">
  • proxy/webext/icons/status-on.svg

    diff --git a/proxy/webext/icons/status-on.svg b/proxy/webext/icons/status-on.svg
    index 6c7df00..663fd0b 100644
    a b  
    44    <title>status-on</title>
    55    <desc>Created with Sketch.</desc>
     6    <g stroke="white" stroke-width="2" stroke-opacity="0.8" fill="none" fill-rule="evenodd">
     7        <g transform="translate(-1003.000000, -111.000000)" fill="none">
     8            <use xlink:href="#status-on"/>
     9        </g>
     10    </g>
    611    <g id="Snowflake-Extension" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    712        <g id="Artboard" transform="translate(-1003.000000, -111.000000)" fill="#8000D7">
  • proxy/webext/icons/status-running.svg

    diff --git a/proxy/webext/icons/status-running.svg b/proxy/webext/icons/status-running.svg
    index 4cc9602..2c5107c 100644
    a b  
    44    <title>status-on</title>
    55    <desc>Created with Sketch.</desc>
     6    <g stroke="white" stroke-width="2" stroke-opacity="0.8" fill="none" fill-rule="evenodd">
     7        <g transform="translate(-1003.000000, -111.000000)" fill="none">
     8            <use xlink:href="#status-on"/>
     9        </g>
     10    </g>
    611    <g id="Snowflake-Extension" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    712        <g id="Artboard" transform="translate(-1003.000000, -111.000000)" fill="#40E0D0">

I used the following Makefile to make pngs from svg.

all: status-on.png status-on@2x.png status-on@3x.png \
        status-off.png status-off@2x.png status-off@3x.png \
        status-running.png

%.png: DIMS=61x60
%@2x.png: DIMS=122x120
%@3x.png: DIMS=183x180

%.png: %.svg
        convert -density 600 -background transparent "$<" -resize $(DIMS) "$@"
%@2x.png: %.svg
        convert -density 600 -background transparent "$<" -resize $(DIMS) "$@"
%@3x.png: %.svg
        convert -density 600 -background transparent "$<" -resize $(DIMS) "$@"

Changed 3 months ago by antonela

Attachment: status-off-dark.svg added

Changed 3 months ago by antonela

Attachment: status-off.svg added

Changed 3 months ago by antonela

Attachment: status-on-dark.svg added

Changed 3 months ago by antonela

Attachment: status-on.svg added

comment:3 Changed 3 months ago by antonela

Thanks, dcf! Adding a border will make the icon work better on small sizes, yes.

I cleaned the .svgs and added the -dark version following Firefox's suggestions. You can grab them from the attachments.

I cannot take the six-fold radial symmetry road to explore options now but is a fun path to explore an iteration in the future.

Also, we maybe want the doorhanger to follow the selected theme for consistency.

comment:4 Changed 3 months ago by dcf

Owner: set to dcf
Status: newassigned

I'm working on a branch to use the updated icons from comment:3 in the toolbar, and adjust the colors of the popup when in dark mode.

comment:5 Changed 3 months ago by dcf

Status: assignedneeds_review

Here is a branch that successfully styles the popup in dark mode and unsuccessfully tries to set the appropriate toolbar icon in dark mode.

antonela: It appears that it is not currently possible to set different toolbar icons based on the current light/dark mode setting. We may need a single set of icons that work in both light mode and dark mode. More details below.

Light-mode Firefox screenshot of https://gitweb.torproject.org/user/dcf/snowflake.git/log/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911 Dark-mode Firefox screenshot of https://gitweb.torproject.org/user/dcf/snowflake.git/log/?h=darkmode&id=44882d2b0f598ecddb4612aedcbf76f3b03da911

Styling the popup is pretty easy. There is a new prefers-color-scheme CSS media query that lets us override certain styling in dark mode. To enable dark mode:

  • In Firefox 67+, go to about:config and set ui.systemUsesDarkTheme=1 (and optionally browser.in-content.dark-mode=true, to make pages like about:addons also be dark). Go to https://bugzilla.mozilla.org/ to check if it's working (that site has its own dark theme).
    • Note that the ui.systemUsesDarkTheme setting is independent of the "Dark theme" that you can set at about:addons. You may also have to enable the Dark theme at about:addons to make the toolbar appear dark.
  • In Chrome 76+, run with the --force-dark-mode command-line option. I haven't tested this myself because my Chromium is not new enough.

Changing the toolbar icon is harder. The problem is that while we have separate status-on.png and status-on-dark.png images, there is no way (that I could find) to test whether dark mode is enabled from the WebExtension JavaScript. In Firefox, manifest.json can have a theme_icons with separate "light" and "dark" icons, and I am using it, but the problem is that it only applies at first startup. Once the extension starts running, the code controls the icon using browserAction.setIcon, and here is where I couldn't find a way to detect dark mode. (If you reload the extension in dark mode, you can see it use the correct, lighter-color icon for a split second before the code takes control.) Here are things I tried that didn't work:

tl;dr: Unless I'm missing something, we can't use separate toolbar icons for light and dark mode. We need a single set of icons that work in either mode. I am picturing something like a semi-transparent white circle behind the snowflake that would be almost invisible in light themes, and provide the needed contrast in dark themes. That's only for the icons in the toolbar; the image inside the popup easily supports different icons depending on the theme.

comment:6 Changed 3 months ago by dcf

Summary: Addon Icon looks horrible Firefox Dark Mode.Implement a dark mode for the Snowflake proxy interface

comment:8 in reply to:  5 ; Changed 3 months ago by antonela

Replying to dcf:

I see! Now I understand why we didn't have this problem before with Tor Browser extensions. I made three options based on your container's idea. I think either of those three could work. I also exported it in .svg and .png.

https://trac.torproject.org/projects/tor/raw-attachment/ticket/31170/toolbar-icon.png

antonela: It appears that it is not currently possible to set different toolbar icons based on the current light/dark mode setting. We may need a single set of icons that work in both light mode and dark mode. More details below.

Changed 3 months ago by antonela

Attachment: toolbar-icon.png added

Changed 3 months ago by antonela

Attachment: toolbar-icon.zip added

comment:9 in reply to:  8 Changed 3 months ago by phw

Replying to antonela:

I made three options based on your container's idea. I think either of those three could work. I also exported it in .svg and .png.


I like these! I slightly prefer the first icon (white snowflake on purple background) over the third (purple on white).

comment:10 in reply to:  7 ; Changed 3 months ago by dcf

Status: needs_reviewneeds_revision

Replying to arlolra:

tl;dr: Unless I'm missing something, we can't use separate toolbar icons for light and dark mode.

I don't think you're missing anything.

The first three patches here seem fine to merged,

Thanks, merged them in

https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=8a56baa8e1b0481867bcbfbe817941c0d76d5ebb
https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=8f885c75572a9e7057c26ff049cfb4f0cc9f8338
https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=990047b2f5747543dd1e41993c4dc1b5992bff55

Replying to antonela:

I made three options based on your container's idea. I think either of those three could work. I also exported it in .svg and .png.

Thanks, that's great. Next I'll re-do the rest of the branch using these new icons.

comment:11 in reply to:  10 Changed 3 months ago by cohosh

Replying to dcf:

Replying to arlolra:

tl;dr: Unless I'm missing something, we can't use separate toolbar icons for light and dark mode.

I don't think you're missing anything.

The first three patches here seem fine to merged,

Thanks, merged them in

https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=8a56baa8e1b0481867bcbfbe817941c0d76d5ebb
https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=8f885c75572a9e7057c26ff049cfb4f0cc9f8338
https://gitweb.torproject.org/pluggable-transports/snowflake.git/commit/?id=990047b2f5747543dd1e41993c4dc1b5992bff55

Replying to antonela:

I made three options based on your container's idea. I think either of those three could work. I also exported it in .svg and .png.

Thanks, that's great. Next I'll re-do the rest of the branch using these new icons.

Do we have the green (or I guess turquoise) icon for the "currently connected" state?

Changed 3 months ago by dcf

Attachment: toolbar-off-dark.2.png added

Changed 3 months ago by dcf

Attachment: toolbar-off-light.2.png added

Changed 3 months ago by dcf

Attachment: toolbar-on-dark.2.png added

Changed 3 months ago by dcf

Attachment: toolbar-on-light.2.png added

Changed 3 months ago by dcf

Attachment: toolbar-running-dark.2.png added

Changed 3 months ago by dcf

Attachment: toolbar-running-light.2.png added

Changed 3 months ago by dcf

Attachment: popup-off-dark.2.png added

Changed 3 months ago by dcf

Attachment: popup-off-light.2.png added

Changed 3 months ago by dcf

Attachment: popup-on-dark.2.png added

Changed 3 months ago by dcf

Attachment: popup-on-light.2.png added

Changed 3 months ago by dcf

Attachment: popup-running-dark.2.png added

Changed 3 months ago by dcf

Attachment: popup-running-light.2.png added

comment:12 Changed 3 months ago by dcf

Status: needs_revisionneeds_review

darkmode-2 350993d4
diff against master

Here's a branch using the toolbar icons from comment:8.

I needed separate icons for off/on/running, so I selected the icons with the white background, and made off=gray, on=purple, running=turquoise. As noted in comment:11, there was no turquoise icon originally, so I made one by editing the SVG and setting the color #40E0D0, which was the color of the old status-running.svg image.

I similarly updated status-running.svg to match the other redesigned icons from comment:3. The old one was tilted by 22.5° while the images from comment:3 are upgright. I didn't do separate status-running.svg and status-running-dark.svg, but there could be separate light and dark images if needed. It would only require changing a line of CSS to use.

The toolbar-running icon, with its color of #40E0D0 looks too light for me, against the white background. We could choose different colors for it. I only made it like it is because the toolbar icons from comment:8 were missing a "running" icon.

comment:13 Changed 3 months ago by antonela

thanks dcf, it looks awesome!

yes, 40E0D0 is very light. We can use #68B030, which is the TPI green at the styleguide or #56D600 which is the purple's complementary color.


When I originally designed this UI, I thought that it could be nice to rotate the snowflake icon when snowflake has connections (rotate(360deg)). Maybe we can think about it the next iteration!

Last edited 2 months ago by dcf (previous) (diff)

comment:14 Changed 2 months ago by arlolra

Status: needs_reviewmerge_ready

Here's a branch using the toolbar icons from comment:8.

The branch looks good.

I tested in both Firefox and Chrome with macOS's dark mode and they seemed to work.

The only thing I noticed is the arrow for "Learn more" is hard to make out (as evidenced in the attachments above). You can follow up with that and use a different green as in comment:13

comment:15 Changed 2 months ago by dcf

Resolution: fixed
Status: merge_readyclosed

Merged in f9173f61a2c90fbc2979f8f73ab79a1a5bc90eee. In addition to the changes already mentioned, I changed the color of the "running" icon to #68B030 as mentioned in comment:13, and made a dark-mode version of the arrowhead icon as mentioned in comment:14.

Note: See TracTickets for help on using tickets.