Ensure the Twenty Twenty One theme is AMP compatible

[pierlon]

Feature description

Development of the Twenty Twenty One theme has recently begun. As it is a core theme, we should ensure that it is AMP compatible and listed as a Reader theme.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[adamsilverstein]

Quick note that I have been testing twentytwentyone for core and when I enabled the AMP plugin I noticed the following issues:

• 7 inline or included scripts removed.
• Dark mode detection did not work (theme changes if user's device is set to dark mode); otherwise things seemed to work fine.

[pierlon]

Thanks @adamsilverstein. I have a fix for those 7 script issues underway. As for dark mode, I'll have to follow up on that. Last time I checked it was supposed to be a plugin, right?

Edit: Dark mode plugin for twentytwentyone: https://github.com/WordPress/twentytwentyone-dark-mode

[adamsilverstein]

The team has switched a couple times. Last time I checked, the dark mode worked out of the box in core (no plugin required) and they were seeking help testing. You have to enable it in the Customizer to get it working.

I would test with the 5.6 release candidate: https://wordpress.org/news/2020/11/wordpress-5-6-release-candidate/ - if you see the dark mode there, it is likely to be included in 5.6.

[pierlon]

At the moment (as far as I know), it's not possible to fetch the user's preference from localStorage and update the body element with the necessary classes to enable dark mode (see ampproject/amphtml#20951). I also was looking into the possibility of using cookies instead to save the state, but that does not seem not to be possible in AMP either: ampproject/amphtml#25670.

The best we can do for now is to make use of the prefers-color-scheme media query, where we would inject the necessary CSS based on whether the "Dark Mode support" Customizer preference is enabled or not.