Night Mode or Dark Theme

[khashayarxy]

Describe the new feature

Night Mode or Dark Theme it would be great if you add this and I think many people want it.

[justinclift]

Good news @khashayarxy. Support for a dark mode / night theme type of thing was added a while ago by @mgrojo, in #1324.

If you're on macOS, Windows, or Ubuntu, it's in our nightly builds:

    https://github.com/sqlitebrowser/sqlitebrowser#nightly-builds

Would you be ok to try that out and let us know how it goes for you? :smile:

[khashayarxy]

yeah, I've tried nightly builds before, but I didn't find this option. and still can't find it... should I use a dark theme for my windows to get this feature?

[mgrojo]

Yes, @khashayarxy It follows the theme configured in the operating system. Remember also to "Restore Defaults" in Preferences for the editor to get appropriate colours for the theme.

[khashayarxy]

I wanted something like this so that I don't have to do that.

[justinclift]

Hmmm, yeah. That does sound like a better approach.

@mgrojo Is it feasible to have a toggle or selection to switch between light/dark theme?

[mgrojo]

Is it feasible to have a toggle or selection to switch between light/dark theme? If we are talking about the SQL editor, it would be feasible to have a combo box for selecting the light or the dark theme. That would allow the users to change the editor colours without restoring defaults.

But I'm unsure about the Qt widgets. They generally follow the desktop theme, as everyone would expect.

I wanted something like this so that I don't have to do that.

What is what you wouldn't like to do? Restoring the defaults or applying a dark theme to all the system?

[justinclift]

Ahhh. Most applications that support dark and light themes seem to have either a toggle or selector. When the user makes a change of the appropriate button or selector, the theme for the entire app changes to light or dark (as selected). That's what @khashayarxy was likely meaning.

Saying that because I often use dark mode in applications, and that's the way I've generally seen it done.

Our current approach does work, but it has the downside of also resetting all of a users other settings too, not just adjusting the theme. It might be better to break out the theme adjustment into it's own button or something anyway, just to avoid resetting everything else too. :smile:

[khashayarxy]

@mgrojo Applying a dark theme to all the system

@justinclift That is exactly my point.

[mgrojo]

Most applications that support dark and light themes seem to have either a toggle or selector.

But probably they don't have then options for every possible colour, like we have for the editor. That adds complexity for the settings management.

By the way, in the Linux desktop the theme is usually selected centrally. I find that the sanest approach, although one can find application that doesn't look good in dark themes.

Our current approach does work, but it has the downside of also resetting all of a users other settings too, not just adjusting the theme.

If we didn't let the user modify the editor colours, then it would be easy to follow the system theme without restoring the defaults. But I guess that wouldn't be very welcome.

[khashayarxy]

@mgrojo Well, we can use this idea of having light and dark theme only in the official release. This way everyone is happy.

[justinclift]

But probably they don't have then options for every possible colour, like we have for the editor.

Hmmm, the JetBrains IDE's do. But yeah, that's a good point. Hadn't thought of that.

I wonder if the solution would be to have the colours be stored "per profile"? eg a "Dark" profile, and if the user edits the colours then they only affect that one.

If they switch to a (for example) "light" profile afterwards that hasn't been edited, it'd just be the default "light" profile colours. If they change those ones, the changes get kept for the light profile only.

That way a user can have both dark and light themes, and be able to tweak them to suit. For bonus points we could probably add some way to create extra profile/themes too.

[ghost]

Maybe I'm missing something but with Version 3.10.99 (Aug 10 2018), Qt Version 5.8.0, Windows 10's Dark mode isn't having any effect.

[mgrojo]

@voltagex Is the application still in a ligth mode, or is only some widgets? Could you publish a screenshot?

[khashayarxy]

@voltagex I have the latest build of Windows 10 and that Dark/Light mode is just for settings and doesn't affect applications or Windows itself. You should change the theme of Windows to see the change.

[ghost]

@khashayarxy it seems to affect Windows, but I think dark Explorer is coming later.

https://stackoverflow.com/questions/38734615/how-can-i-detect-windows-10-light-dark-mode

[mgrojo]

My knowledge of Windows is pretty basic, but I guess that this Dark Mode will only affect to "apps", not traditional desktop applications, like DB4S is.

https://stackoverflow.com/questions/13220962/what-is-the-difference-between-windows-desktop-apps-and-windows-store-apps

[mgrojo]

Let's understand this as a request for a dark theme implemented specifically for DB4S. The current implementation is adapting to the theme selected by the operating system. Maybe someone wants to contribute this.

It could be made adding a dark stylesheet like, for example: https://github.com/ColinDuquesnoy/QDarkStyleSheet

[stamminator]

@voltagex Same situation for me. My Windows theme is set to dark via the Settings app, just like in your screenshot, but my DB4S 3.11.0 alpha 1 client is not picking it up. Tried toggling Windows settings and restoring defaults in DB4S several times with no success.

[wmertens]

FYI, in macOS dark mode is pretty hard to read:

[mgrojo]

@wmertens Could you restore the defaults in Preferences and see if it improves? I don't understand how you came to that combination. With the current version, it should either have default values, and then the it should adapt to OS theme, or have saved preferences for the editor colours, and in such case, it should have saved your colours are the defaults for the dark/llight theme that was running when you last saved the preferences. That is, the colour combination for the editor should always be coherent, even though it could be light theme in a general dark theme, or viceversa.

[wmertens]

Ok, resetping defaults fixed the editor colors, that leaves the menu. I suppose I once changed an editor color to try?

[mgrojo]

I suppose I once changed an editor color to try?

With a current version, the background and foreground colours are saved, so it doesn't explain this anormal combination. Maybe the last time that the preferences were saved was with an old version (3.10 or nightly from several months?), which didn't saved the background colours.

[fah]

I tried with the Version 3.10.202 (Dec 13 2018):

Reset does not help for me. Still the headers are like in https://github.com/sqlitebrowser/sqlitebrowser/issues/1493#issuecomment-449565973

In addition: The combination dark blue on dark grey is also hard to read.

For visual impaired this is really a problem. Some just can work with dark backgrounds.

Could you offer a high contrast colors option?

[mgrojo]

I tried with the Version 3.10.202 (Dec 13 2018)

Then try using the latest beta. It has the following improvements:

• Avoid any hard coded colours and query system colours wherever possible. In practice this adds support for dark themes (#1324)
• Fix style of web links in UI (#1286)

[fah]

I downloaded this beta actually. But copied the info field with the outdated info.

So this is not helping as the other apps (at my Mac) don't have this color combination. I checked the mac settings and didn't find anything to change it. So I guess these two fonts are still hard coded. (Next to the icons and the pragma tab)

[mgrojo]

We aren't setting any style in the toolbars nor in the pragma tab. The links might be becuase the combination "regular window background" + "link foreground" is uncommon and that theme does not give good combination, but the text in the toolbars is very strange. That is what Qt and/or MacOS are doing. Are there other dark themes for testing?

[justinclift]

@wmertens @fah If you have the time to test it, the recent (from two days ago) Win64 nightly builds are created with a different Qt version. If the behaviour changes due to that, it would be useful to know. :smile:

• https://nightlies.sqlitebrowser.org/latest/DB.Browser.for.SQLite-win64.msi

[wmertens]

@justinclift could you do a MacOS build?

[justinclift]

@wmertens Done. The macOS builds are now using Qt 5.11.3, same as the Win64 ones. The nightly build has since re-run again, so the latest ones are ok to test:

    https://nightlies.sqlitebrowser.org/latest/

Lets see if that makes any useful difference. :smile:

[wmertens]

Well, it became more readable and less themed:

[justinclift]

*sigh*

Well, this is shaping up to be a weird one.

[fah]

For the Mac nightly In addition to https://github.com/sqlitebrowser/sqlitebrowser/issues/1493#issuecomment-449860143: Still the Pragma tab screen is dark blue on black. In Settings -> Data Browser -> All fields are white on white.

[mgrojo]

Still the Pragma tab screen is dark blue on black.

Then the default theme colours are not prepared for the combination: foreground for hiperlinks and general window background. I suppose the link foreground has been thought for text document backgrounds. Maybe we should add an icon with the link beside the text, so we don't depend on a good combination for that unusual case.

[mgrojo]

Something like this: (Only changed the first three cases as demo. The icon could also be the globe meaning WWW)

[mgrojo]

By the way, the "now" link in https://github.com/sqlitebrowser/sqlitebrowser/issues/1493#issuecomment-449860143 looks good. Do the links in pragmas actually look worse?

[fah]

Response to https://github.com/sqlitebrowser/sqlitebrowser/issues/1493#issuecomment-450513736 : Makes more sense for me also. I would not expect a hyperlink in an application. The question mark is much clearer what to expect when you click on it.

Is it something you can change in css at a central place?

[mgrojo]

Is it something you can change in css at a central place?

No, it requires source code changes (Qt UI file). If nobody has arguments against that new style, I'll made the change in the master branch.

[justinclift]

If nobody has arguments against that new style, I'll made the change in the master branch.

No argument from me. It's the development branch after all, whose purpose is to try stuff out in. :smile:

[mgrojo]

Done. This is how it looks now:

[justinclift]

Cool. :smile:

Visually that looks more welcoming to me.

Hopefully our users do find that a better approach. Guess we'll find out over time. :grinning:

[fah]

Thank you, Manuel. Looks really good!

[wmertens]

Hmmm, even with the latest macOS nightly (Version 3.11.99 (Jan 7 2019)), the data browser looks like this, with white text on a white background:

Would it be possible to add a theme selector to Preferences, or at least a dark/light/system toggle?

[mgrojo]

@wmertens

Would it be possible to add a theme selector to Preferences, or at least a dark/light/system toggle?

Yes, it would be possible, that is why this issue is still open, but it won't happen soon unless someone volunteers for developing it.

In any case the screenshots that you are pasting are worrying and can be considered a bug somewhere. Is that the norm for Qt applications in macOS? Some of the widgets have inconsistent colour combinations. Not only those that we apply our own style to, like the table cells, but also the table headers and the toolbars, which we don't alter in any way. Does the 3.11 beta look the same?

@justinclift Maybe we're missing some theme-related file in the macOS package?

[justinclift]

@justinclift Maybe we're missing some theme-related file in the macOS package?

And totally didn't see this. That's what I get for ignoring heaps of outstanding notifications, then deleting most of my GitHub account a while back. :innocent:

It's unlikely to be some theme related file in the macOS package. Worse, the only version of macOS (the most recent) with "proper" dark mode support... is too new for our mac mini. So, can't even put it on that and experiment.

An alternative approach may be for someone to set up a Hackintosh with macOS Mojave on it, and experiment with that. Not something I'm going to look into personally though. :wink:

[mgrojo]

Are we affected by this: https://openradar.appspot.com/41206326 ?

Seen from https://bugreports.qt.io/browse/QTBUG-68850

The main bug reported here - existing binaries have a mixed color palette - is something that must fixed in macOS and is out of scope for Qt. Thanks for the report though!

Improved support for Dark Mode in Qt is in scope and is tracked in QTBUG-68891.

So I guess is work in progress in macOS and Qt.

[justinclift]

Are we affected by this: https://openradar.appspot.com/41206326 ?

Not 100% sure. It does sound relevant though.

[justinclift]

@wmertens @revolter @fah Would any of you have time to test an initial build of DB4S built on macOS Mojave + using Qt 5.12.1:

• https://nightlies.sqlitebrowser.org/osx-onceoffs/DB.Browser.for.SQLite-issue1493v1.dmg

In my testing just now, on the same Mojave VM it was built in, it seems almost ok:

The only thing standing out as really wrong / hard to read (for me) are the tool bar labels along the top. Not sure how to fix those, but it seems like the "build it on Mojave" approach might be the right direction.

[StevenSorial]

I got the Same result. I'm using Mojave 10.14.3 on a MacBook Pro.

[justinclift]

Excellent. If we can figure out how to get those tool bar label colours changed, so they're readable, do you reckon it'll be ok? :smile:

[sky5walk]

Dark theme is eagerly awaited by my tired eyes. How do I implement a dark theme in DB4S on Windows? Can I cut and paste the colors into a settings file or do I click and clack the DB4S gui?