Add dark mode compatible logo

It would be great to have a dark-mode compat logo. Currently it ends up looking like this:


Dark mode compat logo competiton!
Post your entries here. No prizes.

If you scroll down in a thread it looks much better. Maybe if we just used whatever badge gets used there?

Screen Shot 2021-11-08 at 12.38.56 PM

The logo used further down is the SVG racket logo. The top logo with the white background is a screenshot of the Racket web page. New suggestions welcome (or can we provide both?).

Ok, this should be better now (still via screenshots, better approaches welcome).

1 Like

Better versions of all the logos are now in place, thanks to @soegaard


With the current dark mode logo there is still a dark border around the logo (while at the top of the page) which looks odd:

I used the current image and the logo you see when scrolling down and some image editing to create a version that is similar to the current logo, but with a transparent background everywhere except in the circular logo itself:

When I locally replace the url to use this modified logo it ends up looking like this:

1 Like

I... don't see any difference?

Here's my screenshot of your message. Maybe I'm just blind?

The top image in the screenshot has a darker black rectangle in the background around the logo and text. The colors are quite similar black vs dark grey, maybe zoom in to see it, or compare the original big middle image with a software that shows alpha with checker patterns with the current logo.
Its subtle but on my monitor it is quite visible.

Edit: also note if you see the middle image in dark mode there is racket in white color to the right of the circular logo, so that it looks properly in dark mode.

It seems the effect is easier to spot on the front page.
On this page the color difference is very hard to see.

From the front page, when I zoom in:

Chrome on macOS.

@jbclements If I zoom in on the top image in your screen shot, I can see two different shades of black.

Tip: Enable zoom in the accesibility preferences.

Then hold control and use two finger up and down gestures on the touch pad.

1 Like

Yes, fair enough. I use Firefox[*] on Mac, which has finger zoom enabled.

[*]Firefox, from Mozilla, a company whose profit model isn't founded on monetizing your personal data! Yes, I'm extremely biased.


Oh boy. You sound like me, when I talk about Facebook :slight_smile:

Is this the right shade of black 17, 17, 17 in decimal.


1 Like

Well, I do hate Facebook too... :slight_smile:

I’m no fan of any of them but I feel it is worth noting that many Racket users need to eat and pay rent - and don’t have the luxury of choosing their employer.

But why have a solid background at all?
I think transparent is easier than matching up 2 colors and keeping them in sync. I kept the part in the circular logo non-transparent because I saw that as part of the original logo rather than text, but that too could be transparent.

@jbclements I think your screenshot is a bit misleading, this topic is about dark mode and in dark mode my edit of the logo has text (that can't be seen in light mode because white on white):

I think using this transparent version makes sense because the dark mode logo is a separate image from light mode.

Also note: In the settings there are (as far as I have seen) at least 2 types of dark mode "Dark" and "WCAG Dark" and those have different shades of background color.

When I put up the current dark mode logo (by @soegaard) a transparent background caused the text to disappear, unfortunately.