Re: Dark mode styling for the website

On Thu, 5 Jan 2023 at 01:43, Jonathan S. Katz <jkatz(at)postgresql(dot)org> wrote:

> On 1/4/23 5:18 AM, Dave Page wrote:
> > FYI, I will commit this tomorrow, unless any more issues are raised.
>
> I do have a few issues.
>
> > On Tue, 13 Dec 2022 at 11:17, Dave Page <dpage(at)pgadmin(dot)org
> > <mailto:dpage(at)pgadmin(dot)org>> wrote:
> >
> >
> >
> > On Mon, 12 Dec 2022 at 17:48, Jonathan S. Katz <jkatz(at)postgresql(dot)org
> > <mailto:jkatz(at)postgresql(dot)org>> wrote:
> >
> > On 11/4/22 6:52 PM, Dave Page wrote:
> >
> > > Here's a patch that implements the manual switching and
> > contrast changes.
> > >
> > > The light-mode-only issue for users without JS still needs to
> be
> > > resolved (if we actually care).
> >
> > Thanks for pulling this together. A few comments:
> >
> > 1. Should we apply the lightened text to all font, not just the
> > top nav
> > links? I do think it is easier to read.
> >
> >
> > I'm not sure what you mean - maybe the Fontawesome icons? The
> > lightened text is defined in --a-fg-color, which does apply to all
> > links. The rest of the text is off-white.
>
> Any of the blue text. Let's take the homepage for example, The <h2> tags
> use #2b6da3 whereas the links are now #699eca. I think we should be
> consistent.
>

OK, I'm confused. As far as I can see, they are both #699eca.
See --a-fg-color and --header-fg-color in
https://github.com/dpage/pgweb/blob/darkmode/media/css/main.css (yes, I
know the commit has today's date on it, but that's because I rebased).

>
> > 2. There is an inline script that sets the toggle -- we should
> > move that
> > into a JS file. We had move all of our inline scripts in JS
> > files for
> > the CSPs.
> >
> >
> > That's intentional. If it's in a separate file you can get a "flash"
> > of colour change during page load as it can cause the code that
> > changes the theme to what was selected previously to run post-render.
>
> I think this may cause some CSP issues, but we can "see what happens".
>
> >
> > 3. Looking at examples of toggle buttons, the most icon common
> > pattern is:
> >
> > Light - sun
> > Dark - moon
> > (System - computer)
> >
> > Additionally, it will display the icon of the mode you are
> > currently in.
> > I'd suggest we currently follow that convention.
> >
> >
> > As David noted upthread, the issue is that the sun icon looks
> > confusingly similar to a settings cog icon, which I can certainly
> > see. I think the lightbulb is clearer, and just as obvious as to its
> > purpose. I'm fine with not following convention, when the convention
> > is sub-optimal (and note that the yum, zypp, and pgcac sites all use
> > the lightbulb now). I'm not going to fight over it though - I'd
> > rather get this committed ASAP given that the entire patch is driven
> > by user feedback.
>
> I don't buy the argument that "because these sites in the PG family use
> it we should use it here", but I'm not going to die on the hill on it.
> So I'll +0 it.
>

Well you are arguing for consistency above :-)

>
> However, we should show the icon of the mode you're currently in (e.g.
> show the moon while you're in dark mode). That is a very common pattern
> on the web.
>

I think you might be confusing buttons with toggles here. Toggles show the
current state, so yes, most will show a moon icon or similar when you're in
dark mode and a sun when you're in light mode.

Icons on buttons are not the same though. They indicate what will happen
when you click the button; in this case, switch to the indicated mode.

Having a button icon that indicates the current state rather than the state
that will be shown if you click it goes against every example of related
design I can find. A good example is the Play button in Apple Music. It
will show the Play icon (the right-pointing solid triangle) when nothing is
playing, and changes to a pause icon (two vertical rectangles) when
something is playing.

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

EDB: https://www.enterprisedb.com