重复

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

摘要 💡

我想使用CSS的 color-mix 函数为我的调色板颜色创建所有主要/浅色/深色变体，以简化此过程。然而，似乎 decomposeColor 函数尚不支持此功能。

示例 🌈

const DARKEN_PERCENT = 33;
const LIGHTEN_PERCENT = 33;

const makeColor = (color: string, contrast: string) => ({
    main: color,
    light: `color-mix(in hsl, ${color} ${LIGHTEN_PERCENT}%, #fff)`,
    dark: `color-mix(in hsl, ${color} ${DARKEN_PERCENT}%, #000)`,
    contrastText: contrast,
});

export const theme = createTheme({
    palette: {
        mode: 'dark',
        primary: makeColor(..., '#fff'),
        secondary: makeColor(..., '#000'),
        error: makeColor(..., '#000'),
        warning: makeColor(..., '#000'),
        info: makeColor(..., '#000'),
        success: makeColor(..., '#fff'),
    },
    ...
});

动机 🔦

允许我们使用原生的 color-mix CSS 函数简化新主题的创建。