Server: Adapt dark mode based on system settings

[MariusBluem]

macOS Mojave is supporting dark mode and the Safari Technology Preview 68 is supporting automatically setting dark mode for homepages if set in system-settings. This seems to be handled via CSS prefers-color-scheme media query. Is it easy to support this? 🤔

Ref.: https://trac.webkit.org/changeset/237156/webkit

@skjnldsv @nextcloud/designers

[nextcloud-bot]

GitMate.io thinks possibly related issues are https://github.com/nextcloud/server/issues/1692 (Dark mode accessibility ), https://github.com/nextcloud/server/issues/11884 (Pretty URLs Breaks Dark Mode on Apache), https://github.com/nextcloud/server/issues/11656 (Dark Theme), https://github.com/nextcloud/server/issues/3289 (No WebDav Error when system is in single user mode), and https://github.com/nextcloud/server/issues/7218 (No feedback after password (re)set).

[skjnldsv]

@MariusBluem I've indeed seen a doc passed by last week.
We'll need to wait for this to land on safari stable I guess :)

[MorrisJobke]

@MariusBluem I've indeed seen a doc passed by last week.
We'll need to wait for this to land on safari stable I guess :)

Not that hard: https://developer.apple.com/safari/technology-preview/ 😉

[MorrisJobke]

Looks like this needs to wait for 17.

[j-ed]

Heise.de just reported (unfortunately only in German) that Apple asks website administrators to support the new function. Since end of April a first editors draft CSS specification "CSS Color Adjust Module Level 1" exists which describes this feature.

[juliushaertl]

I just found that Safari, Chrome and Firefox already seem to support that:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

[skjnldsv]

I like the day/night switch :)
Though if this is a css switch, it means we need to ship the two css and can't have such toggle via php. Though if we just differently declare css variables, the two should not be heavy to load :wink:

Shall we do this for 18?
As well as switching to day/night icon instead of svg api?

[stefan-niedermann]

@skjnldsv wouldn't it be possible to @import via css depending on the switch the right css-file? So one would be able to keep the css files separate instead of loading both always. Of course this would be a separate request and one had to check whether this costs more time than loading one big file or not.

[skjnldsv]

@stefan-niedermann I thought about it, but it doesn't really matter :)
We should only need to change a few of our variables to completely change the theme :)

[raimund-schluessler]

As far as I understand it #21366 is only for guest access and doesn’t implement this feature for authenticated users. Should we actually keep the issue open for this reason?

[nickvergessen]

Yeah the autoclose was not intended, see comments on the PR

[skjnldsv]

https://caniuse.com/#search=prefers-color-scheme
Fully supported now.

[mcnesium]

As a quick workaround, I added this to core/css/server.css of the theme I use:

/* dark mode */
@media (prefers-color-scheme: dark) {
    #content {
        filter: invert(1) hue-rotate(180deg);
    }
    #content img {
        filter: invert(1) hue-rotate(180deg);
    }
}

This inverts everything, but then rotates the hue half around so that e.g. red stays red(ish), but black goes white and white goes black. Then, images are inverted back and again hue-rotated, so that they keep their original appearance.

[skjnldsv]

This would make the pages barely usable for lots of apps.
Wide filters like those are crazy expensive on the browser when rendering.

[nickvergessen]

Well if you want a workaround replace:
https://github.com/nextcloud/server/blob/291640273dfc17aa240a48d7d4a1553d76d54e41/apps/accessibility/lib/AppInfo/Application.php#L55-L73

with:

    public function injectCss() {
        $userValues = ['dark'];

        $hash = md5(implode('-', $userValues));
        $linkToCSS = $this->urlGenerator->linkToRoute(self::APP_NAME . '.accessibility.getCss', ['md5' => $hash]);
        \OCP\Util::addHeader('link', ['rel' => 'stylesheet', 'media' => '(prefers-color-scheme: dark)', 'href' => $linkToCSS]);
    }

then no matter what you select in the settings, the browsers system preference will be used.

[mcnesium]

@skjnldsv: True, that's why I called it a "workaround".

@nickvergessen: sounds fairly easy. Is there a way to implement that without screwing everything up and losing it on the next update?

[nickvergessen]

No, because that ignores the users preference set in the settings.