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.)