Re: Dark mode styling for the website

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

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

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

I'm not overly enthralled by that idea. It would require the server to
inspect every page request and return a different stylesheet if dark mode
is requested. That would immediately make caching less efficient, and it'd
be pretty ugly.

I've asked Vik to take a look for now anyway - hopefully he can see a
better way to avoid duplicating the colour definitions.

--
Dave Page
Blog: https://pgsnake.blogspot.com
Twitter: @pgsnake

EDB: https://www.enterprisedb.com