Re: Dark mode styling for the website

From: "Jonathan S(dot) Katz" <jkatz(at)postgresql(dot)org>
To: Dave Page <dpage(at)pgadmin(dot)org>
Cc: "David G(dot) Johnston" <david(dot)g(dot)johnston(at)gmail(dot)com>, Dago A Carralero <tocarralero(at)gmail(dot)com>, Vik Fearing <vik(at)postgresfriends(dot)org>, PostgreSQL WWW <pgsql-www(at)lists(dot)postgresql(dot)org>
Subject: Re: Dark mode styling for the website
Date: 2023-01-05 14:59:16
Message-ID: 4aa3c547-0ee8-16ec-e936-826f3c9436cd@postgresql.org
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgsql-www

On 1/5/23 5:21 AM, Dave Page wrote:
>
>
> On Thu, 5 Jan 2023 at 01:43, Jonathan S. Katz <jkatz(at)postgresql(dot)org
> <mailto:jkatz(at)postgresql(dot)org>> wrote:
>
> On 1/4/23 5:18 AM, Dave Page wrote:

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

I believe this was my repo getting out of sync. Per off-list delivery of
patch, this looks correct to me now.

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

I understand this interface style. My comment was that around the web
for how people handled light/dark mode toggles, i.e. the trend was to
show the "current" state. There are of course sites that follow the
"music player" style interface as well.

I'll +0 this.

However, I'll +1 the application of the patch, with noted +0s above.

Thanks,

Jonathan

In response to

Responses

Browse pgsql-www by date

  From Date Subject
Next Message Dave Page 2023-01-05 16:29:14 Re: Dark mode styling for the website
Previous Message Dave Page 2023-01-05 10:21:25 Re: Dark mode styling for the website