Support dark mode #1888
Support dark mode #1888
Conversation
|
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/. |
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.
|
|
But I do think the parts that work look quite nice. |
Right, that's one thing I could not figure out. You will notice the
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 |
It makes more sense to put them all in the same location. Signed-off-by: Johannes Schindelin <[email protected]>
The 'layout.scss' file is meant to be included only from the top-level `application.scss` file; It does not contain fancy reusable things like variables or mixins. Signed-off-by: Johannes Schindelin <[email protected]>
They have not been used since 92a2ad8 (Kill compass, 2015-03-24). Besides, their names are slightly misleading, suggesting that they refer to a color, when they actually have Boolean values. Removing them will make the next step easier, where we want to bulk convert the actual `*-color` variables from SCSS to CSS custom properties. Signed-off-by: Johannes Schindelin <[email protected]>
CSS custom properties are wildly popular, and have been supported by every major browser (except Internet Explorer, but you're not supposed to use it anymore, even Microsoft says so in https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/ because Internet Explorer has been unsupported since June 15, 2022). There is a slight complication here, though: We use the `darken()` and `lighten()` functions extensively, and they are SASS preprocessor functions, i.e. they are evaluated at compile time, while the actual CSS custom properties are evaluated in the browser. Therefore, we need to move every `darken()`/`lighten()` call into an individual CSS custom property that is evaluated at compile time. This is the first step in preparation for supporting dark mode on https://git-scm.com/. Signed-off-by: Johannes Schindelin <[email protected]>
dscho
force-pushed
the
dark-mode
branch
3 times, most recently
from
199f2ce to
a5dc1e9
Compare
Many operating systems let users choose between light and dark themes directly in the system settings. Web browsers can react to that via a @media query, which we do here. This commit draws heavily on the excellent guidance provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ as well as on SASS' `@mixin` feature (for more details, see https://sass-lang.com/documentation/at-rules/mixin/). Signed-off-by: Johannes Schindelin <[email protected]>
In the preceding commit, I added support for a dark mode, heeding the operating system's indicated preference. However, many users will want to be able to switch from/to dark/light mode without switching the rest of their operating system. Guided by the excellent advice provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ and in https://dev.to/ayc0/light-dark-mode-avoid-flickering-on-reload-1567, this commit introduces a button to toggle dark/light mode. To avoid flickering, the idea is to: - store the user preference in the local storage, - using Javascript, in the `<head>` section of the HTML page (so that it is executed _before_ anything is displayed), heed that stored user preference (if any) by setting the `theme` attribute in the `document`'s `dataset`, and finally - use that `theme` via CSS: :root[data-theme="dark"] { ... } Signed-off-by: Johannes Schindelin <[email protected]>
In dark mode, we do not actually want the textured background. Also, the sidebar needs to be adjusted, it had a hard-coded, very bright background. Signed-off-by: Johannes Schindelin <[email protected]>
As per the guidance provided in https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-dark-mode-images wht this commit we tone down the images in dark mode, applying techniques to filter background images as described in https://css-tricks.com/apply-a-filter-to-a-background-image/. Signed-off-by: Johannes Schindelin <[email protected]>
WCAG 2 AA (the standard for accessible websites) recommends a minimum color contrast of 3:1 for links, if color is the only discerning visual marker. In dark mode, that would be a bit too bright, so let's add a wavy underline instead of increasing the color contrast of the links. Signed-off-by: Johannes Schindelin <[email protected]>
The verse blocks of the manual pages are unlike any other visual element, and therefore need special care to look good in dark mode. Signed-off-by: Johannes Schindelin <[email protected]>
This is a step in the right direction, there is one more instance of `#fff` (active drop-down titles) but it will be handled differently because `--main-bg` would be too dark. Signed-off-by: Johannes Schindelin <[email protected]>
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]>
Signed-off-by: Johannes Schindelin <[email protected]>
Signed-off-by: Johannes Schindelin <[email protected]>
|
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
DownloadsHere, 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:
|
|
@dscho I've had a more thorough look at it. Overall I'm quite impressed! Shout outs:
Few things:
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? |
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? |
|
I'll try. |
|
There's a pull request up for that: dscho#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. |
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. |
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/... |
To be precise, I am concerned about this guideline: Don’t imply an affiliation, endorsement, sponsorship, or approval with or by Microsoft. |
Changes
This is a very early draft to support toggling between light and dark mode
Context