Add automatic light/dark theme switching#210
Draft
tedgravlin wants to merge 3 commits intoprivacytests:masterfrom
Draft
Add automatic light/dark theme switching#210tedgravlin wants to merge 3 commits intoprivacytests:masterfrom
tedgravlin wants to merge 3 commits intoprivacytests:masterfrom
Conversation
* Just for index.html for now
Collaborator
|
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.: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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.htmlpage, and I also updatedrender.jsandtemplate.jsaccordingly.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!