Desktop: Dark mode

[pgodschalk]

Add a dark mode that also respects system wide settings.

Related PR: #1439

---

macOS

It'd be great if the systemwide dark mode setting for macOS Mojave was respected. This feature is available in Qt 5.12: https://bugreports.qt.io/browse/QTBUG-68891

[skewty]

Intelligent dark mode switching on Linux would also be nice.

[jancborchardt]

@pgodschalk @skewty @yoshi2889 @artem-sidorenko @LPkkjHD dark mode is being worked on in the pull request at https://github.com/nextcloud/desktop/pull/1439 → it would be great if you could give it a test run and provide feedback! :)

[misch7]

@pgodschalk @skewty @Yoshi2889 @artem-sidorenko @LPkkjHD dark mode is being worked on in the pull request at #1439 → it would be great if you could give it a test run and provide feedback! :)

And please have a look at our 2.6.1 RC1, it has a first preview of a mostly working dark mode:
https://download.nextcloud.com/desktop/prereleases/Mac/Nextcloud-qt5.12.5-2.6.1.20191018rc1.pkg

[artem-sidorenko]

@jancborchardt @misch7 looks very promising for me :) many thanks!

[Yoshi2889]

Sorry for my late reply, I've only gotten around to testing it today.

It looks great and the overall app fits in better with the macOS theme in my opinion :)

The only issue I have is that some icons aren't very visible, like in the Share Options dialog. Other than that it really looks great though :)

EDIT: Screenshot below:

[jancborchardt]

@artem-sidorenko @Yoshi2889 thanks so much for your screenshots, it helps a lot in finding and fixing the issues! :)

@misch7 let me know if you need any help with the icons, but I think we did that during the meeting? The activity icon, then confirm.svg, public.svg, add.svg

[rakekniven]

The activity icon (the flash) is too dark IMHO

[jancborchardt]

@rakekniven of course in dark mode the activity icon should be white, as should the 3-dot menu icon. :) And all icons in the share dialog as well: confirm, share link, plus icon.

[claell]

@pgodschalk I edited your description and title, so this issue reflects the request for a dark mode in general, since a request for Windows and also Linux came up.

[tmechen]

there is a coloring problem in osx dark mode: highlighted text needs another color maybe ;)

[rakekniven]

@tmechen which version are you using?

[tmechen]

Version 2.6.2stable (build 20191224).
sry, just saw there is a newer one (did i miss an upgrade notification?)
will try again with latest

[tmechen]

okay, updateded to 2.6.5(macOS) but the problem still exists :(

this is the error message while trying to set up folder sync when chosing a non-empty folder
i inverted the colors of the image to read the message:

[rakekniven]

@tmechen And which Mac OS version?

[tmechen]

yesterday i tested both with the macOS Catalina 10.15.5 and the newest update 10.15.6

[jancborchardt]

So what are the things left to do for dark mode in version 3.0?

[er-vin]

@misch7 we should be good on the widget side right?

On the QML side I expect that it just doesn't handle it at all, AFAICT the palette is enforced there.

[misch7]

@er-vin There are some minor widget problems left, for example in the share widget like shown in this comment: https://github.com/nextcloud/desktop/issues/1287#issuecomment-549046296
I didn't yet figure out why the colours are not getting adopted by the embedded child widget under some circumstances, maybe you have an idea? ;-)

Regarding the QML side you are right. Some time ago I did experiments with theme/Style/Style.qml but some hard-coded colour values have to be moved and implemented there, plus some logic for automatic dark/light contrast font colour picking, like I once did in the Theme class (background colour detection for widgets, also for correctly colouring error fonts on red backgrounds etc.).

[er-vin]

@er-vin There are some minor widget problems left, for example in the share widget like shown in this comment: #1287 (comment)
I didn't yet figure out why the colours are not getting adopted by the embedded child widget under some circumstances, maybe you have an idea? ;-)

Making a guess: there's a CSS on said widget or one of its parent?

This tends to break styles and palettes in "interesting" ways (no I'm not a huge fan of the CSS in widgets, beside I suspect this feature is barely maintained, handle with care).

Regarding the QML side you are right. Some time ago I did experiments with theme/Style/Style.qml but some hard-coded colour values have to be moved and implemented there, plus some logic for automatic dark/light contrast font colour picking, like I once did in the Theme class (background colour detection for widgets, also for correctly colouring error fonts on red backgrounds etc.).

OK, let's ignore that for now and focus on fixing the remaining widget palette issues. The QML code will need some cleanup anyway before we can properly handle a dark mode there.