用途:为同一 UI 组件创建结构完全一致的浅色与深色两套变体,并通过颜色 token 对照表保持配色一致。适合构建双主题组件、浅/深色 UI 配对等场景。
主要能力:提供基础 token 映射(卡片背景、边框、内容区、主/次/弱文本、图标、标签、强调色、阴影、悬停态)、渐变与嵌套卡片 token、徽章 token、分隔符 token,并给出实现模板与辅助组件模式。
使用方式:先分别创建 ComponentLight 与 ComponentDark,二者结构必须完全镜像,仅替换颜色类;再导出一个统一组件,按 variant prop 选择渲染哪套,例如 variant === "dark" ? <ComponentDark /> : <ComponentLight />。当组件含重复子元素时,按同样思路创建配对辅助组件(如 InfoRowLight / InfoRowDark)。
限制与要求:资料仅涉及配色与结构映射,未提供安装命令、依赖版本、框架要求或具体效果数据;需自行确保文本对比度满足可访问性指南,并为两套主题分别定义悬停/聚焦状态和合适的阴影。