search

privacytests / privacytests.org

Source code for privacytests.org. Includes browser testing code and site rendering.
https://privacytests.org
MIT License
797 stars 23 forks source link

Add automatic light/dark theme switching #210

Open tedgravlin opened 2 months ago

tedgravlin commented 2 months ago

This PR isn't fully completed yet as I need some info before I continue.

This PR adds automatic light/dark theme based on the user's system theme. For example, if someone's computer is set to dark mode then the site will automatically load in dark mode. This is achieved just by using the @media (prefers-color-scheme: dark) CSS feature along with some CSS variables. This PR also moved the CSS into a separate file rather than leaving it inline.

So far I was able to get this working perfectly on the /website/index.html page, and I also updated render.js and template.js accordingly.

Theoretically, these changes should already work for new pages going forward (as it appears they are generated using a script) but I'm not entirely sure as I don't know how those scripts are run. I suppose you could attempt generating a new release locally from this branch to see if it works properly.

If you could provide some insight into how this all works I might be able to get everything working properly, thanks!

Light Mode Dark Mode
image image
arthuredelstein commented 1 month ago

Thanks @tedgravlin! This looks very interesting.

In general I am injecting stylesheets inline in the render script, rather than linking them as subresources, in order to keep the page loading time as low as possible and to prevent reflows. Also it would be good to make sure that the lightmode/darkmode CSS is properly integrated with the existing CSS files and we don't have redundant styling commands.

If you want to test more test results pages, you can use the render script directly, e.g.: ./node render ../website/archive/issue80/nightly-private.json