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

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

Thank you. Works nicely on Windows 11 Chrome and iPad Chrome.

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.

The only issue I can find at the moment is that this will effectively disable dark mode entirely for users that don't have Javascript enabled.

I suppose you'd have to make the button into a hyperlink that requests the same page from the server again but with a URL parameter specifying explicitly whether to supply a CSS with darkmode enabled or disabled (the resulting page would just use the complementary URL parameter value).  Though the initial page would be an issue since I'm guessing the server has no idea what system preference has been chosen.  We'd probably have to simply discard adhering to the system setting at all, return the light page by default, and, probably via a cookie, change the default through the GUI widget.  With cookies disabled you could still request your current page in dark mode but the system would not remember the choice - though maybe referrer and/or URL rewriting could provide the necessary information and link munging capability respectively.