New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark UI Theme #164

Closed
buzzrick opened this Issue Jan 18, 2016 · 55 comments

Comments

Projects
None yet
@buzzrick
Copy link

buzzrick commented Jan 18, 2016

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

This comment has been minimized.

Copy link
Owner

jakob commented Jan 20, 2016

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).

@buzzrick

This comment has been minimized.

Copy link

buzzrick commented Jan 20, 2016

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

@josefdlange

This comment has been minimized.

Copy link

josefdlange commented Jan 26, 2016

@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

This comment has been minimized.

Copy link
Owner

jakob commented Jan 26, 2016

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.

@bistacos

This comment has been minimized.

Copy link

bistacos commented Apr 4, 2016

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

@zethussuen

This comment has been minimized.

Copy link

zethussuen commented Apr 11, 2016

Just for funsies

artboard 1

@jakob

This comment has been minimized.

Copy link
Owner

jakob commented Apr 11, 2016

@zethussuen Nice, thanks :)

@buzzrick

This comment has been minimized.

Copy link

buzzrick commented Apr 11, 2016

Looks great @zethussuen!

@4chen500

This comment has been minimized.

Copy link

4chen500 commented Nov 4, 2016

I'd love this feature, FWIW

@MarkASwanson

This comment has been minimized.

Copy link

MarkASwanson commented Nov 7, 2016

+1 for this feature.

@zethussuen

This comment has been minimized.

Copy link

zethussuen commented Nov 7, 2016

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 :)

@bleonard33

This comment has been minimized.

Copy link

bleonard33 commented Nov 16, 2016

+1

4 similar comments
@balajikvijayan

This comment has been minimized.

Copy link

balajikvijayan commented Apr 4, 2017

+1

@VitaliyPetroff

This comment has been minimized.

Copy link

VitaliyPetroff commented Sep 8, 2017

+1

@fufufukakaka

This comment has been minimized.

Copy link

fufufukakaka commented Oct 19, 2017

+1

@stitchthanadams

This comment has been minimized.

Copy link

stitchthanadams commented Oct 24, 2017

+1

@giulianok

This comment has been minimized.

Copy link

giulianok commented Nov 5, 2017

Any progress on this?

@jakob

This comment has been minimized.

Copy link
Owner

jakob commented Nov 6, 2017

@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.

@zethussuen

This comment has been minimized.

Copy link

zethussuen commented Nov 6, 2017

@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

This comment has been minimized.

Copy link
Owner

jakob commented Nov 7, 2017

@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.

@ssnkhan

This comment has been minimized.

Copy link

ssnkhan commented Dec 25, 2017

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

@RayRenteria

This comment has been minimized.

Copy link

RayRenteria commented Feb 7, 2018

+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.

@victorgama

This comment has been minimized.

Copy link

victorgama commented Mar 24, 2018

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

@ricpar11

This comment has been minimized.

Copy link

ricpar11 commented Mar 26, 2018

+1

@ghost

This comment has been minimized.

Copy link

ghost commented Jun 7, 2018

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

This comment has been minimized.

Copy link
Owner

jakob commented Jun 8, 2018

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...

@natanrolnik

This comment has been minimized.

Copy link

natanrolnik commented Aug 28, 2018

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

@martinlatrille

This comment has been minimized.

Copy link

martinlatrille commented Sep 17, 2018

+1 !

@dannolan

This comment has been minimized.

Copy link

dannolan commented Sep 26, 2018

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

This comment has been minimized.

Copy link
Owner

jakob commented Sep 26, 2018

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!

@sfcgeorge

This comment has been minimized.

Copy link

sfcgeorge commented Oct 17, 2018

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

This comment has been minimized.

Copy link
Owner

jakob commented Oct 17, 2018

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

@jakob

This comment has been minimized.

Copy link
Owner

jakob commented Oct 17, 2018

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?

@sfcgeorge

This comment has been minimized.

Copy link

sfcgeorge commented Oct 17, 2018

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

This comment has been minimized.

Copy link
Owner

jakob commented Oct 17, 2018

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

@sc-chad

This comment has been minimized.

Copy link

sc-chad commented Oct 25, 2018

@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?

@sfcgeorge

This comment has been minimized.

Copy link

sfcgeorge commented Oct 25, 2018

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.

@sc-chad

This comment has been minimized.

Copy link

sc-chad commented Oct 25, 2018

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.

@sfcgeorge

This comment has been minimized.

Copy link

sfcgeorge commented Oct 25, 2018

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

This comment has been minimized.

Copy link
Owner

jakob commented Dec 11, 2018

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

This comment has been minimized.

Copy link
Owner

jakob commented Dec 18, 2018

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 :)

@jakob jakob closed this Dec 18, 2018

@devlemire

This comment has been minimized.

Copy link

devlemire commented Dec 18, 2018

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

@martinjankoehler

This comment has been minimized.

Copy link
Collaborator

martinjankoehler commented Dec 18, 2018

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

@devlemire

This comment has been minimized.

Copy link

devlemire commented Dec 18, 2018

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.

@ssnkhan

This comment has been minimized.

Copy link

ssnkhan commented Dec 18, 2018

@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.

@devlemire

This comment has been minimized.

Copy link

devlemire commented Dec 18, 2018

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

@zethussuen

This comment has been minimized.

Copy link

zethussuen commented Dec 18, 2018

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

@devlemire

This comment has been minimized.

Copy link

devlemire commented Dec 18, 2018

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

@ssnkhan

This comment has been minimized.

Copy link

ssnkhan commented Dec 18, 2018

I believe it is:

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

@devlemire

This comment has been minimized.

Copy link

devlemire commented Dec 18, 2018

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?

@rmgpinto

This comment has been minimized.

Copy link

rmgpinto commented Dec 19, 2018

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

@brunnopleffken

This comment has been minimized.

Copy link

brunnopleffken commented Dec 20, 2018

Perhaps a dropdown:

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

This comment has been minimized.

Copy link
Owner

jakob commented Dec 21, 2018

@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?

@devlemire

This comment has been minimized.

Copy link

devlemire commented Dec 21, 2018

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

@brunnopleffken

This comment has been minimized.

Copy link

brunnopleffken commented Dec 21, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment