Re: Dark mode styling for the website - Mailing list pgsql-www

On Thu, 3 Nov 2022 at 11:09, David G. Johnston <david.g.johnston@gmail.com> wrote:

On Thu, Nov 3, 2022 at 8:04 AM Dave Page <dpage@pgadmin.org> wrote:

On Thu, 3 Nov 2022 at 10:40, David G. Johnston <david.g.johnston@gmail.com> wrote:

On Thu, Nov 3, 2022 at 7:19 AM Dave Page <dpage@pgadmin.org> wrote:

On Wed, 26 Oct 2022 at 20:03, David G. Johnston <david.g.johnston@gmail.com> wrote: 

I agree that the blue-black contrast (e.g., navigation) doesn't seem big enough and also that having the option to flip dark mode on or off on the website itself (cookie memory) would be especially nice.  Having the only control (that I know of) be a system-wide dark mode setting is not desirable for me.

I do appreciate the option and the work that has gone into it.  Just needs a few more tweaks IMO (and some others).

I haven't yet looked into increasing the contrast, but I have pushed the beginnings of a patch to my dev branch that implements manual switching that can override the auto-detected preference. It will use local storage to record your preference for the next visit. You can try it out at:

http://ec2-18-170-0-35.eu-west-2.compute.amazonaws.com

The sun icon looks very similar to the settings cog icon, which maybe gets the outcome (someone clicking it to see how to change the darkmode setting), but was a tiny bit confusing at first.  The feature is new enough to me that I'm not really sure what the conventions are.  Having the moon always visible but only a label, and then a left-right option toggle widget is maybe a bit uglier but seems more explicit in how to interact with it.

Another icon thought, to leave the widget as just an icon, would be to always show a moon but use inverted color schemes.  The existing dark moon in light mode then a light moon on dark background(with a white box border) while in dark mode.

That's certainly doable, though it would require more CSS of course. Another option would be to simply change the icon. There's a lightbulb one that could work: https://fontawesome.com/v4/icon/lightbulb-o ?

The moon-only with coloring would just be two different icons as well (though it would be a custom icon versus two different standard ones so definitely not as easy).  I do like the lightbulb over the sun icon.  I'd go with it as the easier solution at this point.

I've pushed this change to the dev branch and test site.