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

Environment

None

Status

Assignee

Sarken

Reporter

Sarken

Roadmap

Skins

Priority

High

Affects versions

Fix versions

None

Components

BackEnd

Difficulty

Easy

Required Access Level

None

Milestone

Internal 0.9
Configure