带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（10）https://developer.aliyun.com/article/1340887?groupCode=taobaotech
如果你对减弱动效效果这方面技术感兴趣的话，还可以阅读：
- Revisiting prefers-reduced-motion, the reduced motion media query
（地址：https://css-tricks.com/revisiting-prefers-reduced-motion/）
（地址：https://css-tricks.com/revisiting-prefers-reduced-motion/）
（地址：https://css-tricks.com/revisiting-prefers-reduced-motion/）
- Meeting “2.2.2 Pause, Stop, Hide” with prefers-reduced-motion
（地址：https://hidde.blog/meeting-2-22-pause-stop-hide-with-prefers-reduced-motion/）
（地址：https://hidde.blog/meeting-2-22-pause-stop-hide-with-prefers-reduced-motion/）
而 color-scheme 这个 CSS 属性和的name为theme-color是相同的。它们都是让开发者更容易根据用户的喜好设置来控制Web应用或页面的主题，即允许开发者根据用户喜好设置添加特定的主题样式。其实color-scheme 属性和 相应的标签与prefers-color-scheme相互作用，它们在一起可以发挥更好的作用。最重要的一点是， color-scheme完全决定了默认的外观，而prefers-color-scheme则决定了可样式化的外观 。
假设你有下面这样的一个简单页面：
<head> <meta name="color-scheme" content="dark light"> <style> fieldset { background-color: gainsboro; } @media (prefers-color-scheme: dark) { fieldset { background-color: darkslategray; } } </style> </head> <body> <p> Lorem ipsum dolor sit amet, legere ancillae ne vis. </p> <form> <fieldset> <legend>Lorem ipsum</legend> <button type="button">Lorem ipsum</button> </fieldset> </form> </body>
页面上<style>中的CSS代码，把<fieldset>元素的背景颜色设置为gainsboro，如果用户更喜欢暗色模式，则根据prefers-color-scheme媒体查询，将<fieldset>的背景颜色设置为darkslategray。
通过<metaname="color-scheme"content="darklight">元数据的设置，页面告诉浏览器，它支持深色
（dark）和亮色（light）主题，并且优先选择深色主题。
根据操作系统是设置为深色还是亮色模式，整个页面在深色上显示为浅色，反之亦然，基于用户代理样式表。开发者没有额外提供 CSS 来改变段落文本或页面的背景颜色。
1. Respecting Users’ Motion Preferences
（地址：https://www.smashingmagazine.com/2021/10/respecting-users-motion-preferences/）
2. Designing With Reduced Motion For Motion Sensitivities
（地址：https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/）
3. Accessible Web Animation: The WCAG on Animation Explained
（地址：https://css-tricks.com/accessible-web-animation-the-wcag-on-animation-explained/）
4. Accessible Animations in React
（地址：https://www.joshwcomeau.com/react/prefers-reduced-motion/）
带你读《2022技术人的百宝黑皮书》——下一代响应式Web设计： 组件驱动式Web设计（12）https://developer.aliyun.com/article/1340884?groupCode=taobaotech
