Add automatic light/dark theme switching #210
Draft
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!