Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support dark mode #1888

Open
wants to merge 36 commits into
base: gh-pages
Choose a base branch
from
Open

Support dark mode #1888

wants to merge 36 commits into from

Conversation

dscho
Copy link
Member

@dscho dscho commented Sep 27, 2024

Changes

This is a very early draft to support toggling between light and dark mode

Context

@dscho dscho mentioned this pull request Sep 27, 2024
@dscho
Copy link
Member Author

dscho commented Sep 27, 2024

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.

@dscho
Copy link
Member Author

dscho commented Sep 27, 2024

For shiggles, I branch-deployed this to https://dscho.github.io/git-scm.com/.

@rimrul
Copy link
Contributor

rimrul commented Sep 28, 2024

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.

Screenshot_20240928_082946_Firefox

Switching to light mode only toggles the text, but not the background.

Screenshot_20240928_083019_Firefox

@rimrul
Copy link
Contributor

rimrul commented Sep 28, 2024

But I do think the parts that work look quite nice.

@dscho
Copy link
Member Author

dscho commented Sep 28, 2024

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?

@dscho dscho force-pushed the dark-mode branch 4 times, most recently from a5dc1e9 to e0c17c7 Compare October 20, 2024 18:20
@dscho
Copy link
Member Author

dscho commented Oct 20, 2024

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

image

About - Branching and Merging

image

Sidebar

image

Documentation

image

A manual page

image

Versions drop-down of a manual page

image

Book, chapter 1 section 1

image

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
image image

@dscho dscho marked this pull request as ready for review October 21, 2024 23:02
@To1ne
Copy link
Contributor

To1ne commented Nov 6, 2024

@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:
    image
  • Search menu looks bad with underline hyperlinks:
    20241106_07h02m02s_grim
  • 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:
    image
  • I'm not sure we should apply the brightness filter to all images, like for example on /downloads/logos or /about/data-assurance
  • The color of <span class=""> on /community looks, well, not good:
    image
  • 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?

@dscho
Copy link
Member Author

dscho commented Nov 6, 2024

If you like I can submit some patches with suggestions?

I would love that!

@To1ne
Copy link
Contributor

To1ne commented Nov 8, 2024

If you like I can submit some patches with suggestions?

I would love that!

Maybe next week.

@dscho
Copy link
Member Author

dscho commented Nov 8, 2024

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

@TheGiraffe3
Copy link
Contributor

TheGiraffe3 commented Nov 28, 2024

Just one problem that I found: some icons still have a bright background.

Screen Shot 2024-11-28 at 8 47 10 AM

Other than that, wonderful! This will be quite nice to have.

@dscho
Copy link
Member Author

dscho commented Nov 28, 2024

@TheGiraffe3 could you help out and contribute fixed icons, preferably as a PR to my branch?

@TheGiraffe3
Copy link
Contributor

I'll try.

@TheGiraffe3
Copy link
Contributor

There's a pull request up for that: dscho#16.

@To1ne
Copy link
Contributor

To1ne commented Nov 30, 2024

@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
Copy link
Contributor

TheGiraffe3 commented Nov 30, 2024

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

@To1ne
Copy link
Contributor

To1ne commented Dec 2, 2024

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:

image

Dark:

image

Just as reference, this is the current original:

image

And this is the dark version @dscho 's branch:

image

@TheGiraffe3
Copy link
Contributor

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.

@dscho
Copy link
Member Author

dscho commented Dec 3, 2024

the old Eclipse logo was out of date by two versions

I should probably clarify that the "middle version" was an April Fools' joke:

image

In any case, here is the comparison after merging @TheGiraffe3's excellent work (thank you so much!):

Light mode:

image

Dark mode:

image

@rimrul
Copy link
Contributor

rimrul commented Dec 3, 2024

The Microsoft logo in dark mode has been mangled quite a bit

@dscho
Copy link
Member Author

dscho commented Dec 3, 2024

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

@dscho
Copy link
Member Author

dscho commented Dec 3, 2024

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.

dscho and others added 15 commits March 15, 2025 22:37
The front page is the first page users see, therefore we need to make
sure that it looks good in dark mode.

Signed-off-by: Johannes Schindelin <[email protected]>
The links in the navigation bar are supposed to be colored dark gray
unless the current page is in the corresponding section.

In dark mode, however, it must be a bit lighter than the very dark
background.

So let's stop hard-coding that color and override it accordingly in dark
mode with a nice, pleasant light gray.

Signed-off-by: Johannes Schindelin <[email protected]>
The color contrast was not large enough; Let's just use a different
variable to define the color.

In light mode, it is similar enough: previously it was #4e443c, now it
is #403f3c instead, i.e. a _tad_ darker. But it looks nice.

Signed-off-by: Johannes Schindelin <[email protected]>
This includes the search box as well as the search results page.

Signed-off-by: Johannes Schindelin <[email protected]>
It would stick out too much in dark mode otherwise.

Signed-off-by: Johannes Schindelin <[email protected]>
The light mode colors in the versions and the translation drop-down
boxes are waaaay to bright in dark mode.

Signed-off-by: Johannes Schindelin <[email protected]>
The light mode colors of the borders around e.g. the options of Git
commands in their synopsis are unpleasantly bright in dark mode; Let's
adjust them to be less sore on the eye.

Signed-off-by: Johannes Schindelin <[email protected]>
These images simply have too-dark labels otherwise.

The proper solution would likely involve a separate set of images in
that section, specifically targeting dark mode, with a
specially-designed color palette. But I am not the person you want to do
that, there are experts for this kind of stuff out there in the world, I
ain't one of them.

Signed-off-by: Johannes Schindelin <[email protected]>
They would otherwise stick out, brightness-wise.

Signed-off-by: Johannes Schindelin <[email protected]>
This logo differs only in the colors (and in the format: it's an SVG),
designed to work better with dark mode.

Signed-off-by: Johannes Schindelin <[email protected]>
@dscho
Copy link
Member Author

dscho commented Mar 15, 2025

@To1ne I think that I have addressed all of the concerns you raised in #1888 (comment), could I ask you to take another look? As usual, I've test-deployed the changes to https://dscho.github.io/git-scm.com/.

To1ne and others added 11 commits March 19, 2025 14:01
In dark mode these logos didn't look good. Refresh them.

Signed-off-by: Toon Claes <[email protected]>
To make it easier to style in dark mode.

Signed-off-by: Toon Claes <[email protected]>
The image on the /about/data-assurance page looked creepy with the color
filter. And because the image isn't bright anyway, remove the filter
from that image.

Signed-off-by: Toon Claes <[email protected]>
The icon to toggle between dark and light mode was added recently and
this made laying out the elements in the header hard.

A lot of items in the header have been using `position: absolute`. This
was probably caused by the absolute positioning of the search result
dropdown.

Transition most elements in the header to use flexbox to make
positioning more fluid and require less manual pixel pushing.

Signed-off-by: Toon Claes <[email protected]>
Make the tagline scale nicely on every screen size.

Signed-off-by: Toon Claes <[email protected]>
There was some js sourcery happening to make a click on the
"Show all results..." entry in the search results dropdown go to the
search page.

Instead of doing the sourcery on click, set a proper `href` attribute on
the `<a>`. This also makes browsers show a hand cursor when hovering the
entry in the dropdown.

Signed-off-by: Toon Claes <[email protected]>
This adds a responsive header, and other nice improvements.

Signed-off-by: Johannes Schindelin <[email protected]>
Because it looks better to have the whole width for the search bar on
mobile, move the dark-mode icon above the search bar, next to the
tagline. To achieve this, use CSS grid where we can name the grid-areas
and reposition them within media queries.

Signed-off-by: Toon Claes <[email protected]>
css: place dark-mode icon next to tagline on mobile
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants