Add dark theme

[vitaly-zdanevich]

Save our eyes. And batteries. Do not ignore this property of useragent https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[pedrorijo91]

Hey @vitaly-zdanevich

Thanks for raising this issue. We have a long effort for a re-design on #1179. @jasonlong :)

[BerndHme]

I agree. Save our eyes. Please add a dark theme.

[h-shokri]

I really have problem with the light theme. Your website is so painful for most of users.

[sudoforge]

i use qutebrowser and it has an in-built dark mode renderer:

colors.webpage.darkmode.enabled = true

this helps provide a dark mode for websites that don't respect colors.webpage.preferred_color_scheme = "dark". it also supports a couple different ways to approach changing the display of images in the DOM (see colors.webpage.darkmode.policy.images).

both of these fail to render git-scm.com in a dark mode -- more specifically, it works for text and many other elements, like anchor links, but fails with others because of the background images set via CSS using the background property (e.g. the masthead, and body background).

to get around this, i wrote a very tiny greasmonkey script and placed it in ~/.local/share/qutebrowser/greasemonkey/git-scm-background.js:

// ==UserScript==
// @name        Qutebrowser dark mode overrides for git-scm.com
// @version     0.0.0-alpha
// @author      sudoforge
// @license     Apache 2.0
// @include     https://git-scm.com/*
// @run-at      document-end
// ==/UserScript==

// I do this even though i have colors.webpage.darkmode enabled, because
// git-scm.com has a CSS property that sets the `background` prop using a
// light-colored image.
document.body.style.background = "#181818";

// This `background` prop for this element is originally set to transparent,
// with a light colored image.
masthead = document.getElementById("masthead");
if (masthead != null) {
    masthead.style.background = "#242424";
}

this is not a comprehensive rewrite at all. as you can see, it's just getting rid of the two largest annoyances for me. hope it helps.

[sudoforge]

there's also a large WIP effort to refactor away from RoR to a static site built with hugo (#1804), after which, it will hopefully be much easier for the team to add a native dark mode.

[dscho]

there's also a large WIP effort to refactor away from RoR to a static site built with hugo (#1804), after which, it will hopefully be much easier for the team to add a native dark mode.

That is my hope as well.

[To1ne]

That is my hope as well.

@dscho Did you just nerd snipe me without knowing it? 😄

It's easy to make it look dark, but it's a lot of work to make everything look good. But I'm happy to collaborate on this.

[dscho]

@To1ne hehe, in retrospect it sounds like a fantastic idea to nerdsnipe you. I'm game for collaborating on that!

[dscho]

@To1ne I found this very nice resource, which I believe should make this quest doable. The really nice thing is that the color scheme seems to have been defined centrally already, in variables.scss, just like the article suggests.

[dscho]

@To1ne so I could not resist the temptation any longer. Here is a very drafty draft of the beginnings of dark mode support. Please do not scream at me for the poor choice of colors; I am distinctly not a designer. But this should provide a good start to get the ball rolling. Are you interested in playing around with it a bit?

[To1ne]

@vitaly-zdanevich With #1888 initial support for dark mode is provided.

@dscho Shall we close?

[dscho]

Yep.

What a short ticket, what a lot of work for the PR, eh?