git
Support dark mode
Changes
This is a very early draft to support toggling between light and dark mode
Context
- #1432
This will need a ton of work.
There are way too many hard-coded colors in the current version of our CSS. They will need to be expressed in terms of CSS custom properties, and I have a hunch that there lurks also a really good opportunity to use not quite as many different colors, but to reduce by reusing fewer colors, which should also make the overall appearance nicer.
However, I think I saw a couple of color definitions that were not even used. So before trying to encapsulate the color palette, we should probably use something like https://github.com/purifycss/purifycss to identify parts that are no longer needed (I manually identified three lines already that can easily go and stop bothering us). No need to adapt unused CSS.
And finally, as I said elsewhere, I have no illusions about being a designer, and hope that someone with a proven record of a better design taste than myself (@To1ne maybe?) will give this some TLC.
For shiggles, I branch-deployed this to https://dscho.github.io/git-scm.com/.
For shiggles, I branch-deployed this to https://dscho.github.io/git-scm.com/.
Looking at that on Firefox 130.0.1 on Android it has some issues still.
The dark mode just ends appruptly.
Switching to light mode only toggles the text, but not the background.
The dark mode just ends appruptly.
Right, that's one thing I could not figure out. You will notice the height: 200% thing I tried, but it only worked around it on a few pages (and only on Desktop). I guess the real fix will be to have it repeat, just like the isometric grid on the front page.
But I do think the parts that work look quite nice.
Thank you!
There's still a ton of work to do, in particular cleaning up the CSS and then consolidating the remaining hard-coded colors into CSS custom properties à la --main-bg. Want to join the fun?
I've decided to punt on the CSS clean-up for now ;-)
@rimrul @To1ne I've updated this branch and deployed it to https://dscho.github.io/git-scm.com/; Would you mind giving it another go?
For the record, here are a couple of Firefox Mobile screenshots:
Front page
About - Branching and Merging
Sidebar
Documentation
A manual page
Versions drop-down of a manual page
Book, chapter 1 section 1
Downloads
Here, I present both the dark mode and the light mode to demonstrate that the monitor is cut off in both, therefore that's a bug that was not introduced by this PR:
| Dark Mode | Light mode |
|---|---|
@dscho I've had a more thorough look at it. Overall I'm quite impressed!
Shout outs:
- It's nice to see it works without Javascript.
- It's also very nice it remembers your preference (when JS is enabled). Although I don't know if you can reset this state to follow the browser/OS again?
- I like the overall aesthetic. Colors feels comfy and familiar and contrast looks decent.
Few things:
- The contrast of the Git logo is too low. Text should be white(ish).
- Same about the logo at the bottom.
- We should remove the background from the brand logos at the bottom of the landing page.
- I'm not sure I like dashed underline on links. But this could become our aesthetic, but should light mode have it as well?
- The color of the underline looks weird in some cases, when text color is different from underline, like here:
- Search menu looks bad with underline hyperlinks:
- I'm not a fan of the sun/moon animation (when you load the page)
- I think I would move the sun/moon to the top right of the screen, it seems to be more common done like this. And then it doesn't clash with the "scroll to top" button. You could even move it right next to the search box.
- Some of our images on
/about/*should be updated to work better with dark mode. But that can be done in a later iteration. These images might need an overhaul anyway. - Border on
<code>feels too heavy: - I'm not sure we should apply the brightness filter to all images, like for example on
/downloads/logosor/about/data-assurance - The color of
<span class="">on/communitylooks, well, not good: - I'm not a fan of the aesthetic of the sun & moon. I think monochrome icons would fit in better, but it's cool it just works with emoji, so I get it.
All this is based on visual review, I didn't review any of the code. I can, if you like to?
If you like I can submit some patches with suggestions?
If you like I can submit some patches with suggestions?
I would love that!
Maybe next week.
I just noticed that the selected OS in https://dscho.github.io/git-scm.com/downloads/guis?os=windows is not visibly discernible from non-selected ones in Dark Mode; That's also something that still needs to be fixed (leaving this here as a reminder).
Just one problem that I found: some icons still have a bright background.
Other than that, wonderful! This will be quite nice to have.
@TheGiraffe3 could you help out and contribute fixed icons, preferably as a PR to my branch?
There's a pull request up for that: https://github.com/dscho/git-scm.com/pull/16.
@TheGiraffe3 Cool work. Do you happen to have screenshots of both in light and dark mode?
@dscho About the logos in general. I think we should reconsider which/if they are relevant, but that's something for a separate MR/issue. Shall we open an issue on that? Or ask on the mailing list?
My idea was to simply put the light background on all logos in CSS, even in dark mode (so the images without transparent background wouldn't stand out against the rest), but I haven't gotten to that yet. Then when we know which logos we want to keep/add/remove we could update the images accordingly. But thanks to @TheGiraffe3 that's not needed no more.
@TheGiraffe3 Cool work. Do you happen to have screenshots of both in light and dark mode?
On the website? I'm afraid I haven't yet been able to figure out how to deploy it with the changed icons, so no, not at the moment.
On the website?
@TheGiraffe3 doesn't need to be a deployed version, can be a screenshot when running the site locally. I suggest you have a look at the README and let us know if anything isn't clear how to preview the site locally?
Anyhow, I've taken the liberty of running your changes locally:
Light:
Dark:
Just as reference, this is the current original:
And this is the dark version @dscho 's branch:
I'll just note here that the old Eclipse logo was out of date by two versions and the background proved hard to remove, so we switched the logo out when changing it anyway.
the old Eclipse logo was out of date by two versions
I should probably clarify that the "middle version" was an April Fools' joke:
In any case, here is the comparison after merging @TheGiraffe3's excellent work (thank you so much!):
Light mode:
Dark mode:
The Microsoft logo in dark mode has been mangled quite a bit
Hmm. I'm not even sure that this is a legitimate use of the trademark, see https://www.microsoft.com/en-us/legal/intellectualproperty/Trademarks/...
The Microsoft logo in dark mode has been mangled quite a bit
Hmm. I'm not even sure that this is a legitimate use of the trademark, see https://www.microsoft.com/en-us/legal/intellectualproperty/Trademarks/...
To be precise, I am concerned about this guideline: Don’t imply an affiliation, endorsement, sponsorship, or approval with or by Microsoft.
@To1ne I think that I have addressed all of the concerns you raised in https://github.com/git/git-scm.com/pull/1888#issuecomment-2458954252, could I ask you to take another look? As usual, I've test-deployed the changes to https://dscho.github.io/git-scm.com/.
@dscho Do you know how to remove the text-shadow from the a.highlight and a:hover in the search dropdown?
Also I've found one quirk, when you manually set it to light mode, but your system says dark mode, you get this.
Also I've found one quirk, when you manually set it to light mode, but your system says dark mode, you get this.
Hah, I forgot about this. The problem here is that I designed the "dark mode" settings to override the light-mode settings, but in dark mode, it became the default and the light-mode toggle could not override that. I fixed that like this:
diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css
index af36be6cc..fc51f2d76 100644
--- a/assets/sass/dark-mode.css
+++ b/assets/sass/dark-mode.css
@@ -184,6 +184,6 @@
@include mode($mode: dark, $theme: '[data-theme="dark"]')
@media screen and (prefers-color-scheme: dark) {
- @include mode($mode: dark)
- @include mode($mode: light, $theme: '[data-theme="light"]')
+ @include mode($mode: dark, $theme: ':not([data-theme="light"])')
+ @include mode($mode: light)
}
Do you know how to remove the
text-shadowfrom thea.highlightanda:hoverin the search dropdown?
Done: 9675370f7a2ab4534a78c01af2e062ebbdd03c63
@To1ne do you think this is ready to merge? I kind of want to, and then take it from there.
do you think this is ready to merge? I kind of want to, and then take it from there.
@dscho I think we are. I'm kind of tired working in a fork on this.
One question though: Do we have/need a rollback strategy if we learn these changes were not ready to be published? I don't think it's needed, like what's the worst that can happen? And we can always do git revert if needed.
Do we have/need a rollback strategy if we learn these changes were not ready to be published?
Yes, there is a "Revert" button once this PR is merged. And with that, I'll merge!