Re: Dark mode styling for the website

On Thu, Nov 3, 2022 at 7:19 AM Dave Page <dpage(at)pgadmin(dot)org> wrote:

>
>
> On Wed, 26 Oct 2022 at 20:03, David G. Johnston <
> david(dot)g(dot)johnston(at)gmail(dot)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.

Just some, possibly dated, thoughts (haven't done website work in a long
while).

David J.