Re: Dark mode styling for the website

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

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.
The reason for that is that as far as I can tell, I would need to duplicate
the color vars for dark mode auto and dark mode manual in the CSS, and then
we'd have to keep them in sync forever. Specifically, we currently have:

media (prefers-color-scheme: dark) {
:root {
--a-fg-color: #2b6da3;
....
}
}

To toggle manually, I've changed that to:

[data-theme="dark"] {
--a-fg-color: #2b6da3;
...
}

I can't find any way to avoid that duplication, if we care about non-JS
users. Maybe someone cleverer than me knows a way?

There's also some ugly JS duplication, as apparently we have different base
templates for the docs and the rest of the site. I'd probably push the JS
into shared files in a more polished patch.

Code is at https://github.com/dpage/pgweb/tree/darkmode.

Thoughts/comments appreciated.

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

EDB: https://www.enterprisedb.com