主题

系统只有一套调色板，有两种读法。深色主题只改语义 token 指向调色板里的哪个颜色，别的都不动；调色板本身永远不变。

怎么实现的

tokens.css 把浅色的值写在 :root 和 [data-theme="light"] 上，深色主题是一个 [data-theme="dark"] 块，只写它改动的 token。属性上的浅色块让深色页面里也能放一段浅色内容。在 token 文件里，深色主题是 theme-dark.tokens.json，由 resolver 的 theme 修饰符应用。

两条规则让深色主题保持一致：

• 深色底仍然是强调色。 深色主题里 --surface-dark 比画布高一级，而不是和画布一样，所以深色卡片、深色的一段和所有 tone="dark" 的组件仍然和页面分得开。
• 珊瑚色不动。 --color-primary、--color-on-primary 和 --focus-ring 在两种主题里都一样。品牌色是主题唯一不能重新解释的东西。

主题和 tone

这是两回事。组件的 tone 指页面里的某一块底色，比如一张深色卡片；主题指整个页面的底。组件从不接收主题参数：它读 token，token 跟着主题变。

切换

CSS 只看 data-theme 属性，没有 prefers-color-scheme 查询。页面在 <head> 里用一小段脚本，在第一次绘制前给 <html> 设好 data-theme="light" 或 data-theme="dark"，所以不会先闪一下错误的主题。“跟随系统”是存起来的一个偏好，脚本用 matchMedia 把它换算成 light 或 dark，这样页面也能在深色的系统里强制用浅色。切换本身没有过渡：渐变会让页面上所有底色同时动起来。

深色主题改了哪些

Token	浅色	深色	说明
--color-primary-disabledcolor.primary-disabled	#e6dfd8指向 --cream-500	#3a3833	主按钮禁用时的填充色。
--text-inktext.ink	#141413指向 --ink-900	#faf9f5指向 --cream-50	标题和最强调的文字。
--text-body-strongtext.body-strong	#252523指向 --ink-800	#f5f0e8指向 --cream-100	强调的正文。
--text-bodytext.body	#3d3d3a指向 --ink-700	#e8e0d2指向 --cream-300	正文。
--text-mutedtext.muted	#6c6a64指向 --ink-500	#a09d96指向 --ink-300	次要文字，例如日期和元信息。
--text-muted-softtext.muted-soft	#8e8b82指向 --ink-400	#7f7c74	最弱的文字：提示和小标签。
--surface-canvassurface.canvas	#faf9f5指向 --cream-50	#181715指向 --night-900	页面底色。
--surface-softsurface.soft	#f5f0e8指向 --cream-100	#1f1e1b指向 --night-850	比画布高一级的浅色区块。
--surface-cardsurface.card	#efe9de指向 --cream-200	#252320指向 --night-800	画布上的卡片。
--surface-cream-strongsurface.cream-strong	#e8e0d2指向 --cream-300	#2b2925	最深的米色，用于卡片内的强调。
--surface-darksurface.dark	#181715指向 --night-900	#2b2925	强调表面：深色卡片、代码窗口、页脚。
--surface-dark-softsurface.dark-soft	#1f1e1b指向 --night-850	#322f2a	比深色表面高一级，例如深色卡片里的代码。
--surface-dark-elevatedsurface.dark-elevated	#252320指向 --night-800	#393631	深色表面上凸起的元素。
--surface-blur-creamsurface.blur-cream	rgb(250 249 245 / 72%)	rgb(24 23 21 / 72%)	12px 背景模糊下的半透明米色，例如滚动后的顶栏。
--surface-blur-cream-opaquesurface.blur-cream-opaque	rgb(250 249 245 / 94%)	rgb(24 23 21 / 94%)	不支持模糊时用的几乎不透明的米色。
--hairlinehairline	#e6dfd8指向 --cream-500	#35332f	边框。看起来是高了一级，而不是一条墨线。
--hairline-softhairline-soft	#ebe6df指向 --cream-400	#2a2823	卡片内更淡的边框。
--hairline-on-darkhairline-on-dark	#31302c	#43413b	深色表面上的边框。
--marker-coralmarker.coral	#f4e2d9	#4d352b指向 --marker-coral-on-dark
--marker-tealmarker.teal	#deede7	#2e453f指向 --marker-teal-on-dark
--marker-ambermarker.amber	#f7ead9	#52412c指向 --marker-amber-on-dark
--marker-redmarker.red	#f1d9d5	#492826指向 --marker-red-on-dark
--marker-coral-on-darkmarker.coral-on-dark	#422c24	#4d352b
--marker-teal-on-darkmarker.teal-on-dark	#273a35	#2e453f
--marker-amber-on-darkmarker.amber-on-dark	#463624	#52412c
--marker-red-on-darkmarker.red-on-dark	#3e2120	#492826
--border-hairlineborder.hairline	1px solid #e6dfd8	1px solid #35332f	分割线和卡片边框。
--border-hairline-softborder.hairline-soft	1px solid #ebe6df	1px solid #2a2823	卡片内更淡的分割线。
--border-hairline-darkborder.hairline-dark	1px solid #31302c	1px solid #43413b	深色表面上的边框。