jakob/Postico

Dark UI Theme

Closed this issue Β· 55 comments

Is it possible to have a Dark UI theme? I have all of my development apps with dark themes to reduce eye strain, but Postico is one of the few apps that lights up my screen with a bright white background, and it is especially obvious (and painful) when switching between apps.

jakob commented

I understand your concern. I recently tried using dark themes, but gave up when only few apps supported it. Some of the apps with dark themes only partially support dark themes, and that looks really bad.

If I add a dark theme I want to do it properly, which would mean lots of design work to get everything to look right. I would probably also need to replace a few standard controls with custom ones if they don't support dark mode properly. All in all, this would probably be a pretty big project.

Anyway, I can't do this right now, but it's something I'm definitely interested in. So if you have examples of apps with nice dark mode, please let me know about them (screenshots welcome).

Thanks for the feedback.
I'm currently using the following apps on my work Mac

PyCharm - "Darcula" color scheme. This is my best example of a dark theme. (Also the same for Android Studio which uses the same editor)
Sublime Text - "Monokai" color scheme
XCode - "Dusk" color scheme (this isn't a very good example)

I agree with you about some apps only partically supporting dark themes (such as XCode) however it is a step in the right direction, because it does keep some of the glaring brightness off my screen

Here's what my PyCharm colors look like
screen shot 2016-01-21 at 11 07 02 am

@buzzrick PyCharm and Sublime are also bad examples. They are not native apps -- not in the true sense of the word. They use their own UI toolkits to paint their views onscreen. Admittedly, they've considered color flexibility as a positive things as opposed to Apple who does their best to ensure overall consistency in their theming. You'll note that while Xcode's editor can be themed, the overall UI is not so easily modified.

@jakob it's been a while since I've dug into AppKit but this seems possible to a degree. You're totally right that it's a pain in the butt. Perhaps GRProKit might come in handy, though to be fair you'd have to have switching logic for every control that you encounter, or your own subclasses for every view to decide which implementation to use.

Not a great solution but there are options at least!

jakob commented

I've did some initial testing, and it looks like the parts with translucent background work reasonably well when I just set the visual effects view to dark. (eg. the sidebar)

However, the rest, I need to pretty much redesign from scratch (eg. the grid view, etc.). GRProKit looks interesting, but the screenshots are a bit dated.

Maybe I could get away with leaving the title bar normal (eg. Atom does that and it looks quite nice)

Anyway, I'm not sure if a dark mode will ever look fully "native" on OS X. Even Apple's Pro Apps like Final Cut look a bit dated now (judging from screenshots). But lots of people like dark UIs, and adding a dark mode would be something that makes Postico unique (I know no other database app with a dark mode)

But it's too much work to start on this right now.

Just throwing in my two cents that this would be a wonderful-to-have. Thanks for maintaining this awesomeness!

Just for funsies

artboard 1

jakob commented

@zethussuen Nice, thanks :)

Looks great @zethussuen!

I'd love this feature, FWIW

+1 for this feature.

if @jakob or another maintainer wants to actually spec this out, I can refine some of the UI mocks. The original was done a bit hastily. Would aim to improve the contrast and colors a bit :)

Any progress on this?

jakob commented

@giulianok Sorry, there's no progress on Dark Mode.

I understand that it is a popular request -- it is currently # 6 on the list of popular feature requests for Postico.

But as I've been thinking more about Dark Mode, I've come to the conclusion that it is more of a "nice to have" feature rather than something essential. And since there are a bunch of things missing in Postico that I do consider essential, I really don't want to spend a couple of weeks/months working on Dark Mode right now.

@jakob how does theming currently work? If you maintain a themes file for color definitions, I can definitely dig in and help define hex/hsla/rgba values. But if it's hardcoded in a certain way, this is definitely a nice-to-have feature which should be deprioritized.

jakob commented

@zethussuen Unfortunately there is no theming system in place. At the moment, most of the colors just use system defaults, some colors are defined in interface builder, some colors are hard coded...

Making Postico theme-able might be a good first step towards a dark mode; we could start small (eg. allow theming only for the colors in the query editor) and then expand from there, until a full dark mode is possible.

Just to add my two cents, but Paw has a gorgeous dark mode: https://paw.cloud

+1 Thanks for the great product Jakob. Good work. You get another vote for a dark theme. Perhaps you could tell us how much $$ it would take to bump it up in priority and we could start a kickstarter or patreon for that feature.

Just to increment @ssnkhan's comment, @luckymarmot (the company behind Paw) open-sourced their theming framework. It can be found here.

+1

Well, seems like Apple is moving along. Just for the record, if this can give some inputs: https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface

jakob commented

Thanks @tomspce, we're aware of that :)

I tried building Postico on 10.14, here's what it looks like in dark mode:
bildschirmfoto 2018-06-08 um 11 16 01

I think we still have some work to do...

@jakob looking forward to see Postico have support for dark theme in macOS Mojave!

+1 !

Just registering support/desire for the functionality but as with everything Postico I know it'll be well done and considered, so no rush!

jakob commented

Just a quick update on dark mode:

We were hoping to have something ready by the time Mojave ships, but we didn't make it -- sorry about that. Making sure every control looks good in Dark Mode turned out to be more work than expected. We are working on support for dark mode, and Postico will eventually support it, but it'll still take some time.

Our current plan is to support Dark Mode in the next major version of Postico. It's still too early to show anything (lots of essential features missing / broken), but we are looking for Beta testers to test the new version as soon as it is more stable.

If you are interested in Beta testing, please email us at postico@eggerapps.at!

You must have released a version built on the latest SDK because the app does launch in dark mode and is unusable. Lots of places with black text on a black background.

@jakob You need to add the plist entry NSRequiresAquaSystemAppearance to tell Mojave the app's not compatible with dark mode, this post explains well.

For users finding the app unusable you can manually add that plist entry until there's an update:

defaults write at.eggerapps.Postico NSRequiresAquaSystemAppearance true
jakob commented

@sfcgeorge What build of Postico are you using? Please check in the Postico menu -> About Postico.

jakob commented

The current latest version is Version 1.4.2 (2845)

I've just tested it on macOS 10.14 (18A391) and it works fine in dark mode. (ie. it doesn't support it, but isn't broken)

We built it against the 10.13 SDK.

Can you share screenshots what specifically is broken?

Oooh I'm really sorry, I was half way through taking screenshots (much like yours above) and I figured out what I did. I used to use the dark menu bar and dock mode and thought full dark mode was over the top, so I did this to emulate the old look:

defaults write -g NSRequiresAquaSystemAppearance -bool Yes

Then I thought I should give dark mode a fair chance so I reverted that:

defaults write -g NSRequiresAquaSystemAppearance -bool No

Wrong! That actually forces every app to appear dark even those that don't support it. I should have done this:

defaults delete -g NSRequiresAquaSystemAppearance

Sorry for wasting your time. Postico is one of my favourite designed apps, I know if and when you support dark mode it'll look great.

jakob commented

@sfcgeorge Thanks for getting back to me. That is a very confusingly named preference.

@sfcgeorge None of those options seem to do anything to postico. Is there a method to tell the OS not to use dark theme for this app?

Yes? But you shouldn't need to unless you've already messed with the defaults like I did.

  1. Postico hasn't yet been updated to look good in dark mode. If you set Mojave to Dark Mode then Postico will still be in light mode.
    a. Unless you have set the global default like I did to force every app to use Dark Mode, which I don't recommend doing.
  2. You can force Postico to use Dark Mode, but it will look bad.
    a. You can equally force Postico to use light mode but you shouldn't need to unless you've set the global default as above.

To force Postico to use Dark Mode:

defaults write at.eggerapps.Postico NSRequiresAquaSystemAppearance false

To force Postico to use Light Mode:

defaults write at.eggerapps.Postico NSRequiresAquaSystemAppearance true

To unset the setting and let Postico decide for itself (which will be Light Mode):

defaults delete at.eggerapps.Postico NSRequiresAquaSystemAppearance

It makes sense if you parse it. "Aqua" is the name of Apple's UI design dating back to 2001 β€” it's light. Requiring Aqua means requiring light mode. These settings can either be app specific, or global (-g). If you set or unset globally you'll need to reboot. App specific you need to restart the app.

Ah I think you solved a couple problems for me.

I guess originally I had done something like:

defaults write -g NSRequiresAquaSystemAppearance -bool NO

Which now I believe basically tells all apps to use Dark Mode correct?

So doing your last step of:

defaults delete -g NSRequiresAquaSystemAppearance

Actually resolved the issue and Postico is now back to using Aqua theme. I didn't realize when I had set the previous default that it was global. Not sure why it didn't dawn on me then, but much appreciated.

That sounds about right. It's confusing that NO is not the same as no value set - it's tri-state logic. Like NULL/true/false in SQL. It took me a minute too ;) Glad it's fixed for you now.

jakob commented

We're almost done with dark mode!

About a month two weeks ago, we sent out first beta builds of Postico with Dark Mode. We've now fixed the remaining issues, and are quite happy with the result.

We're planning to release Postico 1.5 with Dark Mode some time next week.

You can download a prerelease build here: postico-4009.zip

Dark Mode requires macOS 10.14 (Mojave). This build also includes our brand new automatic crash reporter (see the docs for details).

Thanks to everyone for all your feedback and support!

jakob commented

Postico 1.5 with dark mode is now released!

Download from https://eggerapps.at/postico/

Thanks everyone for your patience! I'm glad to finally be able to close this issue :)

But where do you activate the dark mode? I have 1.5 and didn't see anything regarding it in postico preferences?

@devlemire
To activate, just open System Preferences > General and choose appearance "Dark"
(macOS 10.14 Mojave is required)

Why not leave it as a toggle for the app settings? It's kind of lame that you have to change your entire system to get one app to be dark? Don't get me wrong I appreciate the effort and this way better than nothing.

@devlemire Not lame -- this is standard Mojave behaviour. Even native macOS apps don't provide granular options to set Dark Mode independently of the System setting.

That is lame for the users that don't want their entire system dark. Β―_(ツ)_/Β―

You can set this manually via terminal on a per-app basis. I don't think Apple wanted to deal with the UX nightmare that would be a list of apps and checkboxes to toggle night mode on/off. See: https://stackoverflow.com/questions/52562383/is-there-a-way-to-toggle-dark-mode-on-off-for-individual-apps-in-macos-mojave

And how do you go about determining the parameter name for apps? That link is great stuff thanks a million @zethussuen

I believe it is:

defaults write at.eggerapps.Postico NSRequiresAquaSystemAppearance false -- Enable Dark Mode
defaults write at.eggerapps.Postico NSRequiresAquaSystemAppearance true -- Disable Dark Mode

That unfortunately didn't work for me. Let me guess, I need to have dark mode on for the system, and then go toggle what apps I want and don't want dark?

I'm interested in the same behaviour as @devlemire described.

Perhaps a dropdown:

  • Light
  • Dark
  • Auto (default option)
jakob commented

@devlemire @rmgpinto @brunnopleffken We're adding a setting for dark mode to the preferences. You can try a prerelease build here: Postico 4087.zip

Does that work for you?

Sweeeeet. Thanks. Can’t wait for the full release!

Nice, works fine, even when that hack defaults write -g NSRequiresAquaSystemAppearance -bool Yes is enabled (my case).