Re: Dark mode styling for the website

From: Dago A Carralero <tocarralero(at)gmail(dot)com>
To: "David G(dot) Johnston" <david(dot)g(dot)johnston(at)gmail(dot)com>
Cc: "Jonathan S(dot) Katz" <jkatz(at)postgresql(dot)org>, Dave Page <dpage(at)pgadmin(dot)org>, 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: 2022-10-28 05:08:48
Message-ID: 78FEFC34-E820-489A-9D43-D5DA1784DE04@gmail.com
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgsql-www

Looks like it’s more work than actually I thought when i hacked my own dark styles. I will really like to help to tackle down those a11y issues. How could i do that ?

Also i think will be ideal for most people to setup a little widget for the color scheme setting:
• 💻 OS Default
• ☀️ Light
• 🌚 Dark

In the css could be approached by setting a color theme class on the html element.

For instance serve the docs with:
• <html class=“color-os”> & keep the styles as they are, :root { /* light vars */ } and @media (prefers-color-scheme: dark) { :root { /* dark vars */} }
Then after user selection:
• <html class=“color-light”> & set the styles: .color-light { /* light vars */}
• <html class=“color-dark”> & set the styles: .color-dark { /* dark vars */}

You can see a simple example of this setting on the MDN docs website.

> On 26 Oct 2022, at 20:03, David G. Johnston <david(dot)g(dot)johnston(at)gmail(dot)com> wrote:
>
> On Tue, Oct 25, 2022 at 7:03 AM Dago A Carralero <tocarralero(at)gmail(dot)com> wrote:
> It looks amazing with the dark mode, awesome job.
>
> > On 20 Oct 2022, at 12:54, Jonathan S. Katz <jkatz(at)postgresql(dot)org> wrote:
> >
> > On 10/20/22 6:53 AM, Dave Page wrote:
> >> On Thu, 20 Oct 2022 at 09:40, Dave Page <dpage(at)pgadmin(dot)org <mailto:dpage(at)pgadmin(dot)org>> wrote:
> >> On Thu, 20 Oct 2022 at 02:08, Jonathan S. Katz <jkatz(at)postgresql(dot)org
> >> <mailto:jkatz(at)postgresql(dot)org>> wrote:
> >> On 10/18/22 11:43 AM, Dave Page wrote:
> >> > Hi
> >> >
> >> > I've put a note in my calendar to commit this at or after
> >> 11AM UK time
> >> > on Thursday. Unless I hear objections before then, I'll do that.
> >> Here's a diff with the discussed color changes.
> >> There were some places where swapping the PG default with the
> >> lighter
> >> shade would be a bit too bright, so I focused mainly on the
> >> text/buttons. I did move the topbar to using the color, since
> >> that is
> >> something we do want to draw attention to.
> >> Thanks. Demo site updated. I'll push the changes to prod in 1:30
> >> hours or thereabouts. And... done!
> >> Thanks folks.
> >
> > Thanks everyone!
> >
> > Jonathan
> >
>
>
> So, Reddit peeps have noticed the change:
>
> https://www.reddit.com/r/PostgreSQL/comments/ye4719/did_postgresqlorg_just_flip_to_dark_mode/
>
> 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).
>
> David J.

In response to

Browse pgsql-www by date

  From Date Subject
Next Message Нурдаулет Лесбек 2022-10-28 10:00:06
Previous Message David G. Johnston 2022-10-27 00:03:21 Re: Dark mode styling for the website