Thanks for contributing! I like where you're going with this, but I find the dark blue text a little bit hard to read on a dark grey background. Is there any way you could improve the readability on it, such as maybe a lighter shade of blue?

Yes, definitely! I totally agree it's too dark. Yesterday, while viewing it on my mobile with dimmed light — of course, right 😄 — I could barely see the logo and couldn't read the text. I'll put together a show of different combinations so we can choose the one.

I'm glad to contribute!

Is there any way you could improve the readability on it, such as maybe a lighter shade of blue?

@eth-p, do you mean changing the colors of the logo? The point of this PR is to not change the appearance of the logo on white background at all, while still making it not too bright in dark mode.

I've just prepared an interactive page where you can play with the shade or the opacity slider until you get something that pleases you. Here is the link: https://codepen.io/scorphus/full/QWEbgbx

Is there any way you could improve the readability on it, such as maybe a lighter shade of blue?

@eth-p, do you mean changing the colors of the logo? The point of this PR is to not change the appearance of the logo on white background at all, while still making it not too bright in dark mode.

That was my original idea, yeah. Change the brightness slightly to make it more visible on a dark background, but not enough for any perceptible difference on a light one. After experimenting with your great demo for a bit though, that actually might not be necessary though.

As a side note: interestingly enough, the text is actually the least legible between 0.1 and 0.3 opacity.

Edit: I appreciate the effort you've put into this, so I labelled this pull request so it counts towards Hacktoberfest (if you're participating this year) :)

YAY! Thanks for labeling it! 🍻 🥨 I'm glad to give something back.

I agree with 0.1~0.3 opacity. There's more, an opacity below 0.1 makes it super hard to read when the brightness is dimmed — such as on my mobile in bedtime mode.

So, any combination that pleases you the most? I'm quite happy with shade 222 and opacity 0.394. 229 and 0.5 also make me happy — and the text more readable.

I hope you don't mind, but I took a second to fork your pen and add a selector to change themes. That'll help us preview how it looks on both light and dark pages, hopefully.

https://codepen.io/eth-p/full/XWKbzbw

I agree with 0.1~0.3 opacity. There's more, an opacity below 0.1 makes it super hard to read when the brightness is dimmed — such as on my mobile in bedtime mode.

Oh wow, good point. I hadn't even considered things like night time dimming or tint shifting. There's a lot of variables to consider here.

So, any combination that pleases you the most? I'm quite happy with shade 222 and opacity 0.394. 229 and 0.5 also make me happy — and the text more readable.

I'm still experimenting with the options, but I'll check those out next!

@scorphus Thank you for your contribution!

Someone recently made a contribution to another project of mine (sharkdp/insect#229) which achieves something very similar. The situation is a bit different (because we had control over the HTML/CSS part as well), but maybe it's worth to take a look.

Check out switching to dark mode here: https://insect.sh/

I think it would be awesome if we could somehow make a dedicate dark mode version. Maybe something like this:

or even completely desaturated:

By the way, how do you switch GitHub to dark mode?

On my website, I can do that from the developer tools in Firefox, but it does not work on GitHub:

@scorphus After trying the various themes with my screen at full and minimum brightness, 229 definitely seems like the best way to go.

@sharkdp It looks like yet another one of your projects is going straight into my command line toolkit, haha.

I think it would be awesome if we could somehow make a dedicate dark mode version.

I agree that it would be a good idea, but I'm not entirely sure what we could use it for? GitHub Markdown doesn't let us use CSS, so that takes @media (prefers-color-scheme: dark) { /* ... */ } off the table, unfortunately. A dedicated guide or demo website could benefit from that, but I don't think that's going to be happening for a while (if ever).

Nice improvement to the demo, @eth-p. Yeah, 229&0.5 are winning so far.

Happy to contribute, @sharkdp! Thanks for bat! (and for insect now, too!)

It would be nice if GH offered a dark theme — with that somehow cascading into the readme. Until they do so, I'll keep using Stylus with this style.

I agree that it would be a good idea, but I'm not entirely sure what we could use it for? GitHub Markdown doesn't let us use CSS, so that takes @media (prefers-color-scheme: dark) { /* ... */ } off the table, unfortunately. A dedicated guide or demo website could benefit from that, but I don't think that's going to be happening for a while (if ever).

I was hoping that there would be some way to make it work on the GitHub README page. Maybe by using inline-CSS in the SVG?

@sharkdp:

I was hoping that there would be some way to make it work on the GitHub README page. Maybe by using inline-CSS in the SVG?

I actually had the same idea when I first looked at this pull request, but GitHub gives us an extremely limited subset of HTML to work with. The only available tag we can use for embedding SVGs is <img>, which has no access to the page's DOM or stylesheets. Although it can use prefers-color-scheme when embedded like that, it comes with some caveats:

• On Chrome, it's rasterized and cached.
  Changing the system theme won't update the image.
• Since GitHub doesn't have an official dark theme, prefers-color-scheme isn't a reliable indicator.
  I also worry that even if they were to add one in the future, it would be as an account setting and not a media query.

I made a demo to show you what I mean: https://gist.github.com/eth-p/6ca4e2dbc95e54e8890e4c4ed853d0c1

Edit: As an aside, if we were able to use inline SVGs, it would have been as easy as copying a few class names from the GitHub stylesheet (e.g. timeline-comment-header).

@eth-p That's unfortunate, but makes perfect sense. Thank you for the explanation and the demo.

In this case, I'd be glad if we move forward with the approach proposed by @scorphus. I'll leave it up to you two to decide on the best values. My only request would be that the default light theme is (more or less) unchanged.

On Chrome, it's rasterized and cached

Didn't know that. Thanks! 👍

Nice interactions in this rather simple PR. OSS is awesome. ❤️

So, branch updated. No hurry to merge, IMHO. If desired, we could wait some bit and see if we collect more opinions.

On Chrome, it's rasterized and cached

At least from my observations, yes. I can't definitively say it does without digging into the Chromium source code, but I have my reasons to think so:

• Media queries are unaffected by changing my system theme (when compared to inline SVG).
• Media queries are unaffected when refreshing the page after changing my system theme.
• Performing a reload without cache (shift + reload button) causes the image to update to the correct color for the media query.

If desired, we could wait some bit and see if we collect more opinions.

I'm good with merging it now, but I'll leave it to the other maintainers in case they have additional feedback.