这是一个高度可扩展、以性能为中心的设计系统样板设置，具有可配置的标记、智能主题、强类型和自动生成的css变量。
您可以使用服务器呈现主题，而无需考虑运行时问题。此页面是服务器呈现的轻主题。在禁用JavaScript后尝试重新加载页面，您'；我们将看到服务器呈现的主题正在运行。
设计系统是用一组约束构建的，这些约束允许我们静态编译主题定义和构建灵活的API。
预先定义你所有的主题。i、 e没有运行时主题创建。这允许我们使用css变量静态定义主题，并创建强类型主题标记。强类型有助于组件API中的完全自动完成支持。如。
标识令牌组并基于系统UI主题规范。颜色、空间、字体大小等。
把你的代币组放平。唐'；不要将您的令牌嵌套在令牌组中。颜色。初选是允许的。颜色。主要的，重要的成功是不允许的。
所有主题都应该有相同的标记集。黑暗主题不能有'；它在灯光主题中不可用。
使用CSS自定义属性（CSS变量）设置主题。这使得切换或服务器渲染主题变得很容易，而无需考虑运行时问题。代币。颜色。primary在多个主题之间具有相同的css变量，可以轻松地静态定义样式，而不是在运行时基于主题定义样式。背景：${tokens.colors.primary}而不是背景：${（prop）=>；prop.theme.colors.primary}。
css变量--theme colors primary value的作用域基于body元素中的数据属性-<；身体数据主题="；光和#34>；
主题化完全由css驱动。所有主题都是使用标记静态定义的，然后将这些标记转换为css变量。当前主题是基于body元素上的html属性确定的。例如<；身体数据主题="；光和#34>；。因此，服务器呈现主题只是将正确的主题名称呈现为body属性。
所有主题都使用相同的css变量名作为标记值。因此，您可以静态定义样式，而无需运行时主题道具。
获取当前主题就像查询DOM属性一样简单。你没有'；你不需要上下文或花哨的钩子来为你提供价值。
切换主题就像在body元素上设置主题名称一样简单。由于主题是完全由css驱动的，因此可以在不重新渲染整个树的情况下更改主题。
注意：如果有必要，还可以使用useTheme（）钩子在主题更改时重新呈现整个树。