Opened 5 weeks ago

Last modified 3 days ago

#31170 merge_ready defect

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 5 weeks ago.
https://i.imgur.com/DJJqOcx.png
webext-v0.0.5-off-dark.png (591 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5, off, dark theme
webext-v0.0.5-on-dark.png (792 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5, on, dark theme
webext-v0.0.5.stroke-off-default.png (842 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5 with stroke, off, default theme
webext-v0.0.5.stroke-on-default.png (813 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5 with stroke, on, default theme
webext-v0.0.5.stroke-off-dark.png (826 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5 with stroke, off, dark theme
webext-v0.0.5.stroke-on-dark.png (914 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5 with stroke, on, dark theme
webext-v0.0.5-off-default.png (838 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5, off, default theme
webext-v0.0.5-on-default.png (807 bytes) - added by dcf 5 weeks ago.
Snowflake v0.0.5, on, default theme
status-off-dark.svg (8.0 KB) - added by antonela 4 weeks ago.
status-off.svg (7.8 KB) - added by antonela 4 weeks ago.
status-on-dark.svg (8.0 KB) - added by antonela 4 weeks ago.
status-on.svg (7.8 KB) - added by antonela 4 weeks ago.
popup-light.png (12.0 KB) - added by dcf 4 weeks 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 4 weeks 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 2 weeks ago.
toolbar-icon.zip (43.9 KB) - added by antonela 2 weeks ago.
toolbar-off-dark.2.png (1.5 KB) - added by dcf 10 days ago.
toolbar-off-light.2.png (1.5 KB) - added by dcf 10 days ago.
toolbar-on-dark.2.png (1.5 KB) - added by dcf 10 days ago.
toolbar-on-light.2.png (1.5 KB) - added by dcf 10 days ago.
toolbar-running-dark.2.png (1.5 KB) - added by dcf 10 days ago.
toolbar-running-light.2.png (1.5 KB) - added by dcf 10 days ago.
popup-off-dark.2.png (9.6 KB) - added by dcf 10 days ago.
popup-off-light.2.png (10.1 KB) - added by dcf 10 days ago.
popup-on-dark.2.png (12.4 KB) - added by dcf 10 days ago.
popup-on-light.2.png (12.3 KB) - added by dcf 10 days ago.
popup-running-dark.2.png (12.3 KB) - added by dcf 10 days ago.
popup-running-light.2.png (12.1 KB) - added by dcf 10 days ago.

Download all attachments as: .zip

Change History (43)

comment:1 Changed 5 weeks 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 5 weeks ago by dcf

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

Snowflake v0.0.5, off, dark theme

Changed 5 weeks ago by dcf

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

Snowflake v0.0.5, on, dark theme

Changed 5 weeks ago by dcf

Snowflake v0.0.5 with stroke, off, default theme

Changed 5 weeks ago by dcf

Snowflake v0.0.5 with stroke, on, default theme

Changed 5 weeks ago by dcf

Snowflake v0.0.5 with stroke, off, dark theme

Changed 5 weeks ago by dcf

Snowflake v0.0.5 with stroke, on, dark theme

Changed 5 weeks ago by dcf

Snowflake v0.0.5, off, default theme

Changed 5 weeks ago by dcf

Snowflake v0.0.5, on, default theme

comment:2 Changed 5 weeks 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 4 weeks ago by antonela

Attachment: status-off-dark.svg added

Changed 4 weeks ago by antonela

Attachment: status-off.svg added

Changed 4 weeks ago by antonela

Attachment: status-on-dark.svg added

Changed 4 weeks ago by antonela

Attachment: status-on.svg added

comment:3 Changed 4 weeks 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 4 weeks 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 4 weeks 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 weeks 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 2 weeks 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 2 weeks ago by antonela

Attachment: toolbar-icon.png added

Changed 2 weeks ago by antonela

Attachment: toolbar-icon.zip added

comment:9 in reply to:  8 Changed 2 weeks 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 2 weeks 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 2 weeks 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 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

Changed 10 days ago by dcf

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

comment:12 Changed 10 days 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 10 days 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!

comment:14 Changed 3 days 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

Note: See TracTickets for help on using tickets.