更新记录

1.0.0（2025-12-15） 下载此版本

1. 移植 Material Design 3 颜色系统，生成系列颜色。

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

其他

kh-material-color

插件说明：

移植 Material Design 的颜色插件

使用种子颜色生成一系列颜色，观感更舒适。

Material Design 颜色系统

支持的颜色：

export type MaterialScheme = {
    primary: string
    onPrimary: string
    primaryContainer: string
    onPrimaryContainer: string
    secondary: string
    onSecondary: string
    secondaryContainer: string
    onSecondaryContainer: string
    tertiary: string
    onTertiary: string
    tertiaryContainer: string
    onTertiaryContainer: string
    error: string
    onError: string
    errorContainer: string
    onErrorContainer: string
    background: string
    onBackground: string
    surface: string
    onSurface: string
    surfaceVariant: string
    onSurfaceVariant: string
    surfaceContainerHighest: string
    surfaceContainerHigh: string
    surfaceContainer: string
    surfaceContainerLow: string
    surfaceContainerLowest: string
    inverseSurface: string
    inverseOnSurface: string
    surfaceTint: string
    surfaceTintColor: string
    outline: string
    outlineVariant: string
}

使用方法：

1. 引入插件

import { generateMaterialScheme } from '@/uni_modules/kh-material'

2. 设置 Material Design 颜色方案

// 设置 Material Design 颜色方案的种子颜色
const seedColor = ref('#6750A4')
// 是否为暗色模式
const isDark = ref(false)

3. 生成 Material Design 颜色方案

// 生成 Material Design 颜色方案
const materialScheme = generateMaterialScheme({
    seedColor: seedColor.value,
    isDark: isDark.value
})

// 动态计算 Material Design 颜色方案
const scheme = computed(() => {
    return generateMaterialScheme({
        seedColor: seedColor.value,
        isDark: isDark.value
    })
})

参数说明：

4. 使用 Material Design 颜色方案

<!-- 使用.操作符 -->
<view :style="{ backgroundColor: scheme.surface }"></view>
<!-- 或者[""]下标 -->
<view :style="{ backgroundColor: scheme['surface'] }"></view>

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助