# Add dark mode compatible logo

**URL:** <https://racket.discourse.group/t/add-dark-mode-compatible-logo/50>\
**Category:** Site Feedback\
**Created:** [November 8, 2021, 7:05pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50 "2021-11-08T19:05:50Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![pmatos](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/pmatos/32/26_2.png) [@pmatos](https://racket.discourse.group/u/pmatos)\
**Post date:** [November 8, 2021, 7:05pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/1 "2021-11-08T19:05:50Z")

</div>

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

 ![2021-11-08-200440_1753x638_scrot](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/9709d7e852d681ef1eb1eff15d8a5dff8a76d330.png)

---

<div class="post-metadata">

**Author:** ![spdegabrielle](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/spdegabrielle/32/95_2.png) [@spdegabrielle](https://racket.discourse.group/u/spdegabrielle)\
**Post date:** [November 8, 2021, 7:49pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/2 "2021-11-08T19:49:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SamPhillips](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/samphillips/32/15_2.png) [@SamPhillips](https://racket.discourse.group/u/SamPhillips)\
**Post date:** [November 8, 2021, 8:40pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/3 "2021-11-08T20:40:20Z")

</div>

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](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/24a21808c701d247e646036aa2f8f5b1bd4ac902.png)

---

<div class="post-metadata">

**Author:** ![samth](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/samth/32/3_2.png) [@samth](https://racket.discourse.group/u/samth)\
**Post date:** [November 8, 2021, 9:45pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/4 "2021-11-08T21:45:55Z")

</div>

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?).

---

<div class="post-metadata">

**Author:** ![samth](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/samth/32/3_2.png) [@samth](https://racket.discourse.group/u/samth)\
**Post date:** [November 8, 2021, 10:06pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/5 "2021-11-08T22:06:55Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samth](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/samth/32/3_2.png) [@samth](https://racket.discourse.group/u/samth)\
**Post date:** [November 8, 2021, 10:53pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/6 "2021-11-08T22:53:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![simonls](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/simonls/32/170_2.png) [@simonls](https://racket.discourse.group/u/simonls)\
**Post date:** [December 4, 2021, 5:11pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/7 "2021-12-04T17:11:22Z")

</div>

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:  
 ![Bildschirmfoto_2021-12-04_18-01-17](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/1be04f3996f6ac65aa07edd28dcaa8bbecb78b09.png)

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:  
 ![RacketLogoDarkMode](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/bb48865ce860bb85e8f359854654fb8c00f963d7.png)

When I locally replace the url to use this modified logo it ends up looking like this:  
 ![Bildschirmfoto_2021-12-04_18-07-03](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/f147d253d5d558918a0a2576f77f7c665e93d9cb.png)

---

<div class="post-metadata">

**Author:** ![jbclements](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/jbclements/32/11_2.png) [@jbclements](https://racket.discourse.group/u/jbclements)\
**Post date:** [December 4, 2021, 9:13pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/8 "2021-12-04T21:13:02Z")

</div>

I... don't see any difference?

---

<div class="post-metadata">

**Author:** ![jbclements](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/jbclements/32/11_2.png) [@jbclements](https://racket.discourse.group/u/jbclements)\
**Post date:** [December 4, 2021, 9:13pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/9 "2021-12-04T21:13:53Z")

</div>

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

 ![Screen Shot 2021-12-04 at 16.13.12](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/5a3f737bd8a2574659bba5790150439bd209933a.png)

---

<div class="post-metadata">

**Author:** ![simonls](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/simonls/32/170_2.png) [@simonls](https://racket.discourse.group/u/simonls)\
**Post date:** [December 4, 2021, 9:20pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/10 "2021-12-04T21:20:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![soegaard](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/soegaard/32/19_2.png) [@soegaard](https://racket.discourse.group/u/soegaard)\
**Post date:** [December 4, 2021, 9:29pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/11 "2021-12-04T21:29:08Z")

</div>

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:  
 ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/cf71c07f7b5b32bfe98922cbe4bb606774f16bdb.png)

Chrome on macOS.

---

<div class="post-metadata">

**Author:** ![soegaard](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/soegaard/32/19_2.png) [@soegaard](https://racket.discourse.group/u/soegaard)\
**Post date:** [December 4, 2021, 9:31pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/12 "2021-12-04T21:31:55Z")

</div>

@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.

 ![image](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/9789639f046d74f6e75a16e6682a98810b762725.png)

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

---

<div class="post-metadata">

**Author:** ![jbclements](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/jbclements/32/11_2.png) [@jbclements](https://racket.discourse.group/u/jbclements)\
**Post date:** [December 5, 2021, 5:26pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/13 "2021-12-05T17:26:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![soegaard](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/soegaard/32/19_2.png) [@soegaard](https://racket.discourse.group/u/soegaard)\
**Post date:** [December 5, 2021, 5:39pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/14 "2021-12-05T17:39:55Z")

</div>

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

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

![racket-discourse-black-with-text](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/da0619cc940f54cc48c8138cde361f523ba4ecd3.png)

---

<div class="post-metadata">

**Author:** ![jbclements](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/jbclements/32/11_2.png) [@jbclements](https://racket.discourse.group/u/jbclements)\
**Post date:** [December 5, 2021, 5:46pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/15 "2021-12-05T17:46:52Z")

</div>

Well, I do hate Facebook too... 🙂

---

<div class="post-metadata">

**Author:** ![spdegabrielle](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/spdegabrielle/32/95_2.png) [@spdegabrielle](https://racket.discourse.group/u/spdegabrielle)\
**Post date:** [December 5, 2021, 5:52pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/16 "2021-12-05T17:52:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![simonls](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/simonls/32/170_2.png) [@simonls](https://racket.discourse.group/u/simonls)\
**Post date:** [December 5, 2021, 7:13pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/17 "2021-12-05T19:13:05Z")

</div>

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):  
 ![Bildschirmfoto_2021-12-05_20-10-12](https://global.discourse-cdn.com/free1/uploads/racket/original/1X/d67b81d14c4021375bcd7d81e94d03bc3c638142.png)

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.**

---

<div class="post-metadata">

**Author:** ![samth](https://yyz2.discourse-cdn.com/free1/user_avatar/racket.discourse.group/samth/32/3_2.png) [@samth](https://racket.discourse.group/u/samth)\
**Post date:** [December 5, 2021, 8:54pm UTC](https://racket.discourse.group/t/add-dark-mode-compatible-logo/50/18 "2021-12-05T20:54:08Z")

</div>

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