Thread: Dark mode theme

Dark mode theme

From
Richard Yen
Date:
I'm looking to start a dark mode theme for the PG website.  Attached is my first hack at it--you should be able to replace the /dyncss/base.css reference with /media/css/base_dark.css in base.html and see what it looks like.

Some lingering questions/issues:
  • How can I get my hands on some sample data for /docs? I would need to edit some styles to make sure the colors match up
  • I need to make the javascript to do the toggling on/off of the dark mode.  Most sites out there seem to just swap the stylesheet from *_light.css to *_dark.css, so it shouldn't be too tricky -- who do I talk to re. deciding where to put the button/toggle switch?
  • I'd also think we need to persist the preference, meaning we'd need to use cookies.  Seems like we use cookies for some google analytics, but otherwise the use of cookies seems very sparse--is that by policy?  ok to add another param?
  • I basically hacked the existing base.css, which seems to be an override + extension of the standard bootstrap library.  There are some bootstrap templates for dark mode (i.e., https://bootswatch.com/darkly/), but from the looks of it we may need to toggle two pairs of files instead of one pair.  Who gets to decide on the color scheme, etc.?
Thanks for reading!
--Richard


Attachment

Re: Dark mode theme

From
Magnus Hagander
Date:
On Wed, Feb 26, 2020 at 2:37 AM Richard Yen <richyen3@gmail.com> wrote:
>
> I'm looking to start a dark mode theme for the PG website.  Attached is my first hack at it--you should be able to
replacethe /dyncss/base.css reference with /media/css/base_dark.css in base.html and see what it looks like. 
>
> Some lingering questions/issues:
>
> How can I get my hands on some sample data for /docs? I would need to edit some styles to make sure the colors match
up

The quickest way is to use the docsload script that's in tools/ and
point it at a .tar.gz download of the latest version -- it should be
able to quickly extract the docs there and load them into the
database.


> I need to make the javascript to do the toggling on/off of the dark mode.  Most sites out there seem to just swap the
stylesheetfrom *_light.css to *_dark.css, so it shouldn't be too tricky -- who do I talk to re. deciding where to put
thebutton/toggle switch? 
> I'd also think we need to persist the preference, meaning we'd need to use cookies.  Seems like we use cookies for
somegoogle analytics, but otherwise the use of cookies seems very sparse--is that by policy?  ok to add another param? 

There's a policy against unnecessary cookies, which is why we don't
have any others there. If there is a specific use for it, and this
sounds like one, then it is perfectly fine to use.

> I basically hacked the existing base.css, which seems to be an override + extension of the standard bootstrap
library. There are some bootstrap templates for dark mode (i.e., https://bootswatch.com/darkly/), but from the looks of
itwe may need to toggle two pairs of files instead of one pair.  Who gets to decide on the color scheme, etc.? 

One of the people more involved in the design/layout part of the site
will have to answer your other questions :)

--
 Magnus Hagander
 Me: https://www.hagander.net/
 Work: https://www.redpill-linpro.com/