更新记录

1.2.0（2025-12-18） 下载此版本

1. 新增：颜色方案缓存，
2. 新增：颜色方案缓存相关方法

1.1.0（2025-12-17） 下载此版本

1. 移除颜色：

   • background：旧版颜色，使用 onSurface 颜色代替
   • onBackground：旧版颜色，使用 onSurface 颜色代替
   • surfaceTintColor：命名规则与其他不一致，改为使用 surfaceTint
   • surfaceTint：此标记已不再使用，其功能/用途已被 primary 颜色所取代

2. 新增组件相关颜色：

   • addonsPrimaryFixed
   • addonsOnPrimaryFixed
   • addonsPrimaryFixedDim
   • addonsOnPrimaryFixedVariant
   • addonsInversePrimary
   • addonsSecondaryFixed
   • addonsOnSecondaryFixed
   • addonsSecondaryFixedDim
   • addonsOnSecondaryFixedVariant
   • addonsTertiaryFixed
   • addonsOnTertiaryFixed
   • addonsTertiaryFixedDim
   • addonsOnTertiaryFixedVariant
   • addonsSurfaceBright
   • addonsSurfaceDim
   • addonsScrim
   • addonsShadow

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 GenerateMaterialScheme = (options: MaterialOptions) => MaterialScheme
// 传入 种子颜色 移除 对应颜色方案缓存
export type RemoveMaterialScheme = (seedColor: string) => boolean
// 清空颜色方案缓存
export type ClearMaterialScheme = () => void

使用方法：

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>

支持与赞赏

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

支付宝赞助	微信赞助