MDUI v2 Material Color Utilities

MDUI v2自带的配色工具太丑了，配出来的颜色不如Google的原版material-color-utilities好看，于是有了这个项目，将Google原版配色工具应用到mdui v2中。

这是一个基于 @material/material-color-utilities 的包装库，用于在 MDUI v2 中方便地应用 Material Design 3 的动态颜色主题。

安装

npm install mdui-v2-material-color-utilities

使用方法

基本用法

import { argbFromHex, themeFromSourceColor, mduiApplyTheme } from 'mdui-v2-material-color-utilities';

// Get the theme from a hex color
const theme = themeFromSourceColor(argbFromHex('#f82506'), [
  {
    name: "custom-1",
    value: argbFromHex("#ff0000"),
    blend: true,
  },
]);

// Print out the theme as JSON
console.log(JSON.stringify(theme, null, 2));

// 应用主题到整个文档
mduiApplyTheme(theme);

// 应用主题到特定元素
mduiApplyTheme(theme, {
  target: document.querySelector('.my-element')
});

// Check if the user has dark mode turned on
const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

// 应用暗色主题
mduiApplyTheme(theme, {
  dark: systemDark
});

高级用法

你可以同时生成亮色和暗色主题的 CSS 变量：

mduiApplyTheme(theme, {
  brightnessSuffix: true
});

这将生成如下格式的 CSS 变量：

• --mdui-color-* - 当前主题的颜色
• --mdui-color-*-light - 亮色主题的颜色
• --mdui-color-*-dark - 暗色主题的颜色

API

mduiApplyTheme(theme, options?)

应用主题到指定元素。

参数：

• theme: Material Design 主题对象
• options: 可选配置
  • dark: 是否使用暗色主题（默认：false）
  • target: 目标 HTML 元素（默认：document.body）
  • brightnessSuffix: 是否同时生成亮色和暗色主题的 CSS 变量（默认：false）

直接访问原始工具

该库导出了所有来自 @material/material-color-utilities 的工具函数，你可以直接使用它们：

import { argbFromHex, themeFromSourceColor } from '@mdui/material-color-utilities';

License

MIT