企业官网建设流程全解析

本文将带你用material-3-skill动态色方案，理解 Material Design 3（Material You）的完整机制：只需提供一个种子色，就能自动生成强调色、表面色、轮廓色等全套配色，深色模式主题也会自动派生出来。无论你是做 Android 应用还是 Web 页面，都能快速掌握动态色与深色模式的实现思路。

material-3-skill 是什么

📦material-3-skill是一个面向 AI 编程助手的 Material Design 3 技能包，把 Google 官方的 MD3 设计规范沉淀成了结构化文档：30+ 组件、设计令牌（Design Tokens）、主题生成、响应式布局，还内置了 MD3 合规审计模式。

对于新手来说，它的价值在于：把"动态色怎么算、深色模式怎么映射"这类容易查错资料的细节，直接写进了 AI 能读懂的参考文档里。核心内容分布在这两个位置：

• 主技能文件：SKILL.md
• 动态色与主题参考：theming-and-dynamic-color.md

安装和使用方式可以在 README.md 的 Installation 一节查到，支持npx skills一键安装。

动态色原理：种子色如何变成整套配色

💡 MD3 的动态色（Dynamic Color）本质是一条三步流水线：

第一步：选定种子色。一个 16 进制色值（如#6750A4）代表品牌色或用户壁纸色。

第二步：生成 5 条色调色板。种子色会派生出 Primary、Secondary、Tertiary、Neutral、Neutral-Variant 五条调色板，每条在 0–100 的明度轴上取 16 个关键色阶（Tonal Stops）。

第三步：按浅/深主题分配角色。同一套调色板，浅色和深色主题取不同的色阶，这就是深色模式"自动生成"的秘密：

一句话总结规律：浅色主题用浅表面（80–100）+ 深强调（10–40），深色主题正好镜像。角色之间的配对关系（如primary必须配on-primary）保证对比度始终达标，完整色阶映射表见 color-system.md。

深色模式实现：三大平台同一套思路

Web：CSS 变量 + 媒体查询自动跟随系统

Web 端把整套主题写成 CSS 自定义属性（--md-sys-color-*），深色模式只需在媒体查询里覆盖一批变量：

@media (prefers-color-scheme: dark) { :root { --md-sys-color-primary: #D0BCFF; --md-sys-color-surface: #141218; /* …其余深色令牌… */ } }

如果还想支持手动切换，只需把同一批变量挂到一个.dark-theme类上即可。静态基准色值（浅色 + 深色全套令牌）可直接从 color-system.md 复制使用。

Jetpack Compose：一行代码启用 Material You

🎨 在 Android 12（API 31）及以上，Compose 可以直接读取用户壁纸提取的种子色：

val colorScheme = if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)

这就是"每个用户看到的颜色都不一样"的 Material You 体验来源；低版本系统则回退到lightColorScheme/darkColorScheme静态主题，完整写法见 theming-and-dynamic-color.md。

Flutter：ColorScheme.fromSeed 双主题

Flutter 端用同一个seedColor分别生成Brightness.light和Brightness.dark两套ColorScheme，传入ThemeData(useMaterial3: true)即自动完成深浅主题切换。

三档对比度：让颜色"读得清"

🔍 2025 年 5 月起，MD3 新增用户可调的三档对比度，通过contrast参数控制：

调高对比度只是拉大primary与on-primary这类配对角色之间的色调距离，整体色调感觉不变，是兼顾个性化与可读性的好设计。

壁纸之外：从内容提取动态色

Material You 还有一类更有趣的动态色：内容驱动（Content-Based）。比如音乐 App 从专辑封面、阅读 App 从书籍封面提取主色作为种子色，让界面随内容"换装"。

Web 端可以用@material/material-color-utilities中的QuantizerCelebi量化图片像素、Score.score打分选出最佳种子色，完整流程参考 theming-and-dynamic-color.md。

避坑提示：动态色最常见的错误

⚠️ 结合 SKILL.md 中的 Anti-Patterns 清单，新手最容易踩两个坑：

• 硬编码色值：写死#RRGGBB会同时破坏动态换色、深色模式和对比度调整，务必使用--md-sys-color-*令牌
• 乱配颜色：颜色只能按官方配对使用（如surface-container配on-surface），随意组合在深色或高对比模式下会立刻穿帮

总结

material-3-skill 把 MD3 动态色的核心逻辑讲得很透：一个种子色 → 五条色调色板 → 浅深两套主题自动派生。掌握"色阶镜像"这个规律后，你就理解了 Material You 深色模式为什么不需要单独设计——它是同一套调色板的另一种取法。更多主题进阶内容（品牌色融合、作用域主题）可以继续查阅 theming-and-dynamic-color.md。