@simonebortolin and @Alexander-Taran Many thanks for this PR! The Netlify preview appears to work perfectly in Firefox and Safari (on macOS) when switching the system preference between light and dark.

The existing buttons in the theme docs for "Preview dark color scheme" work correctly, but their label might be a bit confusing: if the website is already dark, only the label changes.

As @mattxwang mentioned, we also want this feature to be statically configurable. To avoid breaking existing sites that only use a single color scheme, the feature should be off by default.

For sites that have more than the light and dark schemes provided by JtD, I think it would also be useful to be able to set the names of the schemes used for the light and dark preferences. Note that W3C doesn't distinguish between preference for "light" and no preference, so the existing color_scheme setting can be used for the light preference.

Moreover, we'll also need to support some way of dynamically setting or toggling a website between the light and dark schemes. Let's discuss that further in #234.

The existing buttons in the theme docs for "Preview dark color scheme" work correctly, but their label might be a bit confusing: if the website is already dark, only the label changes.

this is easily solved, if I am not mistaken I already have the script that solves this problem.

Just to comment - this is on my radar, but the beginning of the quarter has me a bit swamped. I'm not looking to merge this before releasing v0.4.0 anyways (though a quick v0.5 after is completely in the cards).

Note: think we need to adjust some of the defaults for the dark theme. Seems too inaccessible - for example, the green callout on the homepage is hard for me to read personally (from a contrast perspective). Same thing with the copyright footer, etc.

Just to check my understanding - I feel like #1086 would supersede this. Is that correct?

Or, was the idea that we'd merge this first, and then #1086?

@mattxwang

Or, was the idea that we'd merge this first, and then #1086?

Regardless of any particular PR that supports auto-switching between different color schemes, I think it is essential to include a toggle.

If I'm browsing a website and I don't like its dark theme, I shouldn't need to switch my system preference to use the light scheme!

And as a website maintainer, I should never assume that my personal color scheme preferences coincide with those of its visitors.

Or, was the idea that we'd merge this first, and then #1086?

No.

Just to check my understanding - I feel like #1086 would supersede this. Is that correct?

This PR was only done to show my fix to the pr #858, as requested in #234

@pdmosses I think it would be helpful if @simonebortolin could submit a PR based on https://github.com/simonebortolin/just-the-docs/tree/prefers-color-scheme (or merge that branch into @Alexander-Taran's PR #858) so that we get a preview of it, to facilitate reviewing and comparison with #560.

and is totally replaced by PR #1086, this PR can be closed without merge.

IMHO can be closed #858 without merge. Perhaps even #560 can be closed.

Thanks for the quick response, I'll close this PR.

I'll clean up the other stabs at color scheme toggles if we do end up merging your PR in, but don't want to jump the gun just yet!