Add options for prefers-color-scheme media queries when making site skins
Description
prefers-color-scheme media queries allow you to set CSS that is only applied if you are using your device's dark or light color theme option: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
In the Advanced section of the skins form, we should add two checkboxes to the @media section: one for prefers-color-scheme: dark and one for prefers-color-scheme: light.
High priority because this provides users a way to make Android’s automatically-generated dark color theme a bit less unpleasant.
Testing
First, ensure that the checkboxes are there.
Second, make sure they work. For example, you might want to paste in the CSS from Reversi, check the option for prefers-color-scheme: dark, and apply the skin. If you switch your device to dark mode, Reversi should be applied.
Third, make sure they work when combined with other media queries. So you might want to do the steps above and also check the media query for max-width: 42em. If you do that, you should see Reversi applied when the device is in dark mode or when the screen/browser window is narrow. (Our media queries are set up to behave as “or” not “and” at the moment.)
Activity
1. The checkboxes exist on the skin editor and they work, options (checked/unchecked) are saved correctly.
2. For desktop Firefox (72.0.2), to simulate the system's preference for a dark or light theme, go to about:config, add a new entry ui.systemUsesDarkTheme, type integer, set its value to 0 (light) or 1 (dark). Wish they made this easier. Before testing on the Archive, I tried it out on a website known to work: Firefox's bug tracker. View https://bugzilla.mozilla.org/show_bug.cgi?id=1494034 while switching the option back and forth and the page changes style accordingly.
On the Archive, created a new site skin, with CSS copied from Reversi, media "(prefers-color-scheme: dark)" checked. Used the skin, and the site only turned dark when system preferences say so.
3. Edited the same skin, checked "only screen and (max-width: 42em)".
When system prefers dark, the site is dark at all sizes.
When system prefers light, the site is only dark when the window is shrunk less than 42em wide.
Looks good.
1) the checkboxes are there.
2) used a skin with reversi's css and the "prefers-color-scheme: dark" option. switched to dark mode in the phone's settings. the site displays with the reversi skin
3) switched out of dark mode in phone settings. unchecked "prefers-color-scheme:dark" and checked "only screen and (max-width: 42em)" and reversi now displays in portrait mode only
looks good!
