Material UI 颜色体系实战从 Material Design 调色板到 createTheme 的调色方案【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui本文以 Material UIMUI官方文档 Color 页面 为主体系统讲解如何用 Material Design 颜色体系为你的 React 应用设计品牌色主题。读完后你将掌握mui/material/colors调色板的结构Hue/Shade与引用方式、createTheme()中palette配置的完整写法、createTheme()如何自动推导light/dark/contrastText的底层机制对应源码 createPalette.js以及如何对照 WCAG 2.2 调整对比度阈值。1. Material Design 颜色系统概述Material UI 开箱即用地实现了 Google Material Design 指南中的全部颜色。你可以基于 Material Design 颜色体系构建一个反映品牌或产品风格的色彩主题。核心概念只有两个Palette调色板一组由色相hue及其深浅shade组成的颜色集合。Material UI 提供了 Material Design 指南中的全部颜色且这些颜色在设计上彼此协调。Hue Shade色相与深浅调色板中的单个颜色由一个色相如 red和一个深浅如 500共同标识。red 50 是最浅的红偏粉色red 900 是最深的红。此外大多数色相还带有一组以A为前缀的 accent 深浅A100/A200/A400/A700。2. 引用 2014 版 Material Design 调色板这套调色板最初由 Material Design 于 2014 年创建由一组设计上和谐共处的颜色组成可直接用于开发品牌调色板。若要生成自己的一套和谐调色板可使用第 3 节的调色板生成工具。给定一个色相HUE如 red、pink和一个深浅SHADE如 500、600可以这样导入颜色import { red } from mui/material/colors; const color red[500];仓库中该调色板的实现位于 packages/mui-material/src/colors/ 目录。以 red.js 为例每个颜色文件导出一个以深浅为键、以 HEX 值为值的对象const red { 50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, };调色板全貌从 index.js 的导出可以看到MUI 共内置 20 个色相调色板色相camelCase 导出名说明色相camelCase 导出名说明red/pink红 / 粉green/lightGreen绿 / 浅绿purple/deepPurple紫 / 深紫lime/yellow青柠 / 黄indigo/blue靛蓝 / 蓝amber/orange琥珀 / 橙lightBlue/cyan浅蓝 / 青deepOrange/brown深橙 / 棕teal蓝绿grey/blueGrey灰 / 蓝灰另外还有一个 common.js仅含两个基础色black: #000与white: #fff。每个色相的深浅结构在官方示例 Color.js 中体现得很清楚主深浅序列为50, 100, 200, 300, 400, 500, 600, 700, 800, 900accent 序列为A100, A200, A400, A700。引用示例例如引用互补的主色 red 500 和强调色 purple A200import { purple, red } from mui/material/colors; const primary red[500]; // #f44336 const accent purple[A200]; // #e040fb const accent purple.A200; // #e040fb等价写法3. 挑选颜色Picking colors3.1 官方调色工具Material Design 团队提供了一个官方的调色板配置工具material.io/resources/color/。它可以帮助你为 UI 创建调色板并测量任意颜色组合的无障碍等级。工具的输出可以直接填入createTheme()函数import { createTheme } from mui/material/styles; const theme createTheme({ palette: { primary: { light: #757ce8, main: #3f50b5, dark: #002884, contrastText: #fff, }, secondary: { light: #ff7961, main: #f44336, dark: #ba000d, contrastText: #000, }, }, });3.2 文档内 PlaygroundMaterial UI 文档内置了一个交互 Playground实现见 ColorTool.js可以在文档站点上直接测试颜色方案通过色相单选按钮huesred、pink、purple、deepPurple、indigo、blue、lightBlue、cyan、teal、green、lightGreen、lime、yellow、amber、orange、deepOrange与深浅滑块50900 及 A100A700选择颜色也可以直接在 Primary / Secondary 输入框中输入 HEX 或rgb()值输入框会做正则校验isRgb/isHex仅合法颜色才会应用到主题。Playground 生成的palette输出可以直接粘贴到createTheme()函数配合ThemeProvider使用import { createTheme } from mui/material/styles; import { purple } from mui/material/colors; const theme createTheme({ palette: { primary: { main: purple[500], }, secondary: { main: #f44336, }, }, });只需要提供main深浅除非你想进一步定制light、dark或contrastText其余颜色由createTheme()自动计算。如果你直接传入 Material 调色板对象如primary: purplecreateTheme()会从该调色板中选取对应的默认深浅填充 main、light、dark——这一点由源码中的augmentColor逻辑保证见下文第 5 节。3.3 社区工具官方文档还推荐了这些社区调色工具用于快速生成、预览和编辑 MUI 主题mui-theme-creator帮助设计与定制 Material UI 主题的工具内置多种站点模板展示各组件受主题影响的效果MUI Theme Builder生成、预览、编辑 Material UI 主题的工具Material palette generator即官方调色板生成器可为任意输入颜色生成一套调色板MUI Theme Customizer让实验和生成 Material UI 主题更加便捷的工具。4. 底层原理createTheme 如何增强你的颜色文档说只需提供main其依据在 createPalette.js 的augmentColor函数中。它的工作流程如下补全main若你只传了primary: red即传入了完整调色板对象augmentColor({ color, mainShade 500, ... })会取color[500]作为mainsecondary 则默认取A400light 取A200、dark 取A700校验颜色对象必须含有main或500属性且color.main必须是字符串否则会抛出带修复建议的错误错误信息中直接给出了primary: green与primary: { main: green[500] }两种正确写法推导light/dark由addLightOrDark调用 colorManipulator 的lighten/darken按tonalOffset默认0.2dark 方向乘以 1.5把main的亮度上移/下移约两档推导contrastText由getContrastText(color.main)完成即在黑rgba(0,0,0,0.87)与白#fff之间选择对比度更高的一方达到contrastThreshold默认 3。默认调色板的取值也在同一文件中定义light 模式下primary为 blue 700/400/800secondary为 purple 500/300/700error为 red 700/400/800warning、info、success分别基于 orange、lightBlue、green 调色板dark 模式则整体改用更亮的深浅如 primary 取 blue 200/50/400。若你什么都不配置主题就是这套默认值。Playground 中色条预览展示的三个方块dark/main/light正是调用theme.palette.augmentColor({ color: { main } })得到的结果见 ColorTool.js 中colorBar函数这与createTheme()内部走的完全是同一条代码路径。5. 无障碍对比度AccessibilityWCAG 2.2 Success Criterion 1.4.3 建议文本与图片文本的视觉呈现至少保持4.5:1的对比度。Material UI 当前仅强制3:1的对比度。从源码看这一阈值就是createPalette中的contrastThreshold 3默认参数getContrastText用它判断黑白二选一且在非 production 环境下若最终对比度仍低于 3:1会向控制台打印警告指明 WCAG 2008 版对比度条款。若希望达到 WCAG 2.2 Level AA 合规可以在createTheme的palette中调高最小对比度阈值具体方法见官方 Theme customizationpalette 页面的 Accessibility 小节import { createTheme } from mui/material/styles; const theme createTheme({ palette: { contrastThreshold: 4.5, // 提高至 WCAG 2.2 AA 建议值 }, });6. 小结用import { red } from mui/material/colorsred[500]的Hue Shade方式从 2014 版 Material 调色板中取色共 20 个色相、每色相 10 档主深浅 4 档 A 深浅主题配置只需给palette.primary/secondary的maincreateTheme()会经augmentColor自动推导light、dark、contrastText推导逻辑见 createPalette.js选色可用 Material Design 官方调色工具、MUI 文档内 Playground 及多个社区主题工具需要 WCAG 2.2 AA 对比度时调高palette.contrastThresholdMUI 默认为 3:1。【免费下载链接】material-uiMaterial UI: Comprehensive React component library that implements Googles Material Design. Free forever.项目地址: https://gitcode.com/GitHub_Trending/ma/material-ui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考