# 材质主题生成器 ## 概述以编程方式从任何源颜色生成完整的 Material Design 3 颜色主题。此技能使用“@material/material-color-utilities”（与 Google 的 [Material Theme Builder]() 相同的颜色算法库）生成可访问的明/暗调色板、色调范围和设计标记，为 CSS、JSON 或任何框架做好准备。 **关键字**：Material 主题生成器、颜色生成、动态颜色、主题导出、@material/material-color-utilities、HCT、色调调色板、源颜色、品牌颜色、CSS 令牌、JSON 导出 ## 何时使用 *“根据我的品牌颜色生成 M3 主题” *“从 #FF9800 创建 M3 颜色标记” *“将 M3 调色板导出为 CSS 自定义属性” * 创建一个新的M3项目并需要完整的颜色令牌集 * 将十六进制品牌颜色转换为完整的 M3 调色板 * 以编程方式生成浅色和深色主题令牌 ## 它是如何工作的 Material Color Utilities 使用 **HCT 色彩空间**（色调、色度、色调）（一种基于 CAM16 和 L* 构建的感知统一的颜色模型）从单一源颜色生成五个色调调色板： 1. **原色** — 源自源颜色的色调 2. **Secondary** — 源色调的去饱和变体 3. **第三级** — 对比互补色 4. **中性** — 表面和背景的色度非常低 5. **中性变体** — 轮廓略带中性色彩每个调色板包含色调 0–100。特定色调映射到语义颜色角色（例如，“主要”= 浅色色调 40，深色色调 80）。 ## 安装 npm 安装@material/material-color-utilities ## 生成主题使用此技能目录中的“generate-theme.mjs”脚本： nodegenerate-theme.mjs "#FF9800" # CSS 输出（默认 tonal-spot）节点生成主题.mjs "#FF9800" --json # JSON 输出 nodegenerate-theme.mjs "#FF9800" --schemeexpressive # 表达方案变体 ### 可用的方案变体 `--scheme` 标志从 [material-color-utilities]() 中定义的 9 种动态颜色策略中进行选择：方案|描述 ---|--- `色调点` |默认 — 平衡、通用（由 Android Material You 使用） `内容` |忠实于来源的颜色，适合基于照片的主题 `富有表现力` |故意脱离源头，打造大胆、有趣的调色板 `保真度` |对源色调的高保真度，色度上限以方便访问 `水果沙拉` |偏移色调带来充满活力、俏皮的二级和三级效果 `单色` |消色差 — 所有调色板的色度为零 `中立` |近消色差 — 色度非常低，适用于微妙、柔和的主题 `彩虹` |广泛的色调分布在小学、中学和大学 `充满活力` |色调点的饱和、多彩变体 ### 快速入门 (Node.js) 导入{ argbFromHex, hexFromArgb, 主题来自源颜色，来自“@material/material-color-utilities”； // 从任何十六进制源颜色生成 const 主题 = themeFromSourceColor(argbFromHex("#FF9800")); // 提取光照方案 const light = theme.schemes.light.toJSON(); for (const [role, argb] of Object.entries(light)) { console.log(`${角色}: ${hexFromArgb(argb)}`); } ### 带有 Surface 容器的完整主题基础 `themeFromSourceColor` 提供核心角色。表面容器色调源自特定色调的中性调色板：导入{ argbFromHex, hexFromArgb, 主题来自源颜色，来自“@material/material-color-utilities”； const 主题 = themeFromSourceColor(argbFromHex("#FF9800")); const中性= theme.palettes.neutral; const 主要 = theme.palettes.primary; const secondary = theme.palettes.secondary; const tertiary = theme.palettes.tertiary; // 浅色表面容器（每个 M3 规范的色调值） const lightSurfaces = { 表面：neutral.tone(98), surfaceDim: 中性.tone(87), 表面亮度：neutral.tone(98), surfaceContainerLowest:中性.tone(100), surfaceContainerLow: 中性.tone(96), 表面容器：neutral.tone(94), surfaceContainerHigh: 中性.tone(92), surfaceContainerHighest:中性.tone(90), }; // 深色表面容器常量暗表面 = { 表面：neutral.tone(6), surfaceDim: 中性.tone(6), 表面亮度：neutral.tone(24), surfaceContainerLowest:中性.tone(4), surfaceContainerLow: 中性.tone(10), surfaceContainer: 中性.tone(12), surfaceContainerHigh: 中性.tone(17), surfaceContainerHighest: 中性.tone(22), }; // 固定颜色（明暗一致）常量固定 = { PrimaryFixed: Primary.tone(90), onPrimaryFixed: Primary.tone(10), PrimaryFixedDim: Primary.tone(80), onPrimaryFixedVariant：primary.tone（30）， secondaryFixed: secondary.tone(90), onSecondaryFixed: secondary.tone(10), secondaryFixedDim: secondary.tone(80), onSecondaryFixedVariant: secondary.tone(30), tertiaryFixed: tertiary.tone(90), onTertiaryFixed: tertiary.tone(10), tertiaryFixedDim: tertiary.tone(80), onTertiaryFixedVariant: tertiary.tone(30), }; ## 导出格式 ### CSS 自定义属性函数schemeToCss（方案，选择器=“：根”）{ const 条目 = Object.entries(scheme.toJSON()); const props = 条目 .map(([key, argb]) => { const token = key.replace(/([A-Z])/g, "-$1").toLowerCase(); 返回 ` --md-sys-color-${token}: ${hexFromArgb(argb)};`; }) .join("\n"); 返回 `${selector} {\n${props}\n}`; } console.log(schemeToCss(theme.schemes.light)); console.log(schemeToCss(theme.schemes.dark, '[data-theme="dark"]')); ### JSON 函数schemeToJson(scheme) { 常量结果 = {}; for (const [key, argb] of Object.entries(scheme.toJSON())) { 结果[键] = hexFromArgb(argb); } 返回结果； } 常量输出 = { 来源：“#FF9800”，光：schemeToJson（主题.schemes.light），黑暗：schemeToJson（主题.schemes.dark）， }; console.log(JSON.stringify(输出, null, 2)); ### 应用于 DOM 从“@material/material-color-utilities”导入{ applyTheme }； const systemDark = window.matchMedia("(首选颜色方案：深色)").matches; applyTheme(主题, { target: document.body, dark: systemDark }); ## 自定义颜色（扩展调色板）添加与生成的主题相协调的品牌特定颜色： const 主题 = themeFromSourceColor(argbFromHex("#FF9800"), [ { 名称：“品牌-绿色”，值：argbFromHex(“#4CAF50”)， Blend: true, // 与源颜色协调 }, { 名称：“警告”，值：argbFromHex（“#FFC107”）， Blend: false, // 保持准确的色调 }, ]); // 访问自定义颜色 for (const custom of theme.customColors) { console.log(`${custom.color.name}:`); console.log(` 灯光: ${hexFromArgb(custom.light.color)}`); console.log(` 黑暗: ${hexFromArgb(custom.dark.color)}`); } ## 平台库平台|套餐 ---|--- 打字稿 | `@material/material-color-utilities` (npm) 飞镖 | `material_color_utilities` (pub.dev) Java/Kotlin |内置于 MDC-Android 中斯威夫特 |来源“material-color-utilities”存储库 C++ |来源“material-color-utilities”存储库 ## 清单 * 选择源颜色（品牌原色或用户提供的十六进制） * 安装了`@material/material-color-utilities` * 通过 `themeFromSourceColor` 生成浅色和深色方案 * 源自中性调色板色调的表面容器标记 * 固定强调色源自主要/次要/第三调色板色调 * 以目标格式（CSS、JSON 或框架配置）导出的令牌 * 如果需要添加自定义/扩展颜色（协调） * 浅色和深色主题均经过 WCAG 对比度合规性测试 ## 资源 * Material 主题生成器（网络）： * Material 主题生成器（repo）： * 材质颜色实用程序： * 官方 M3 CSS 令牌（基线）： * npm： * M3设计代币概述： * M3颜色系统： * HCT色彩空间：

材质主题生成器

包含技能