Re: Dark mode styling for the website

From: Vik Fearing <vik(at)postgresfriends(dot)org>
To: Dave Page <dpage(at)pgadmin(dot)org>, PostgreSQL WWW <pgsql-www(at)lists(dot)postgresql(dot)org>
Cc: Dago A Carralero <tocarralero(at)gmail(dot)com>
Subject: Re: Dark mode styling for the website
Date: 2022-10-12 01:58:08
Message-ID: d73b1e4c-a40e-a987-7eb1-1dcc0829f9a7@postgresfriends.org
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgsql-www

On 10/10/22 18:07, Dave Page wrote:
> Inspired by Dago A Carralero's email earlier today, I started looking into
> what it would take to actually add a dark mode to the entire website. Turns
> out it's not actually that difficult; the attached patch took just a couple
> of hours of fiddling.
>
> It leaves the existing styling as the default, and uses CSS media queries
> to override certain styles if the browser reports that dark mode is
> preferred. Colours are loosely based on the dark theme for pgAdmin (which
> is of course, based on PostgreSQL blue), with a few other new ones added
> where there were no suitable ones in the pgAdmin palette.
>
> Of course, this is a PoC at this point, for review and comments. I may have
> missed some styles, and the actual colors used are obviously a matter for
> some serious bikeshedding.
>
> Thoughts, comments, and paint colour suggestions welcome.

I fully support a dark mode on our website. However, I do not like this
implementation.

There should be a :root selector that defines variables for all of the
colors, and then this patch would just override that. This would
harmonize the whole of the styling (avoiding typos and other random
coloring), and future-proof having to override everything everywhere and
cluttering the sheet.

I agree with Jonathan that the !important flags are unfortunate. The
best would be to integrate Bootstrap into the build system so that it
can pick up our theme colors at the source, but that is not a job for
this patch. It should perhaps be done before this patch, though.
--
Vik Fearing

In response to

Responses

Browse pgsql-www by date

  From Date Subject
Next Message Daniel Gustafsson 2022-10-12 06:24:56 Re: Use proper en dash typography for ranges
Previous Message Vik Fearing 2022-10-12 01:34:03 Use proper en dash typography for ranges