主题配置

Zenkuai UI 提供了完整的主题配置系统，包含了主题色、背景色、文字颜色等多个维度的颜色定义。

自定义主题

配置文件位置

uni_modules/zenkuai-ui/libs/config/config.js

修改示例

const config = {
    version,
    themePresets: {
        light: {
            // 修改亮色主题
            primary: '#1890ff',      // 修改主题色
            bgCard: '#fafafa',       // 修改卡片背景色
            // ... 其他颜色保持默认
        },
        dark: {
            // 修改暗色主题
            primary: '#177ddc',      // 修改暗色主题色
            bgPage: '#141414',       // 修改暗色页面背景
            // ... 其他颜色保持默认
        }
    }
}

颜色配置

主题色

primary #2979ff 主要按钮、重要信息突出显示
secondary #5856D6 次要按钮
success #19be6b 成功提示
warning #ff9900 警告提示
error #fa3534 错误提示
info #909399 信息提示
link #2979ff 链接颜色
danger #fa3534 危险操作

背景色

bgPage #f5f5f5 页面背景
bgCard #ffffff 主卡片背景
bgCard1 #f8fafc 副卡片背景
bgInput #f1f1f1 输入框背景
bgMask rgba(0, 0, 0, 0.4) 遮罩背景
BgNavbar #ffffff 导航栏背景
bgSwipeAction #ffffff 滑动操作背景

文字颜色

textPrimary #303133 主要文字
textRegular #606266 常规文字
textSecondary #909399 次要文字
textPlaceholder #c0c4cc 占位文字
textDisabled #c0c4cc 禁用文字

边框颜色

borderBase #dcdfe6 基础边框
borderLight #e4e7ed 浅色边框
borderLighter #ebeef5 更浅边框
borderExtra #f2f6fc 特别浅边框
borderColor #c0c4cc 通用边框

交互颜色

hover #ecf5ff 悬停态
selected #e6f7ff 选中态
focus #79bbff 聚焦态
disabled #c0c4cc 禁用态

渐变色

gradientPrimary linear-gradient(45deg, #2979ff, #79bbff)
gradientSuccess linear-gradient(45deg, #19be6b, #85ce61)
gradientWarning linear-gradient(45deg, #ff9900, #ffd161)
gradientError linear-gradient(45deg, #fa3534, #ff6b6b)

状态背景色

lineBg #f5f5f5 步骤条线条背景
successBg #67c23a 成功状态背景
finishBg #f0f9eb 完成状态背景
processBg #ecf5ff 进行中状态背景
skeletonBg #f2f3f5 骨架屏背景

导航和标签栏

navBgColor #ffffff 导航背景色
tabBarColor #999999 标签栏文字颜色
tabBarSelectedColor #007AFF 标签栏选中文字颜色
tabBarBgColor #ffffff 标签栏背景色

基础颜色

fillBase #eeeeee 基础填充色
white #ffffff 白色

使用方法

1. 在模板中使用

<template>
    <view class="container">
        <!-- 使用主题色 -->
        <view :style="{ 
            color: theme.textPrimary,
            background: theme.bgCard,
            borderColor: theme.borderBase 
        }">
            主题色示例
        </view>

        <!-- 使用渐变色 -->
        <view :style="{ background: theme.gradientPrimary }">
            渐变背景示例
        </view>

        <!-- 使用状态颜色 -->
        <view :style="{ background: theme.successBg }">
            成功状态背景
        </view>
    </view>
</template>

<script>
export default {
    computed: {
        theme() {
            return uni.$store.state['zk-global'].theme.current
        }
    }
}
</script>

<style>
.container {
    padding: 20rpx;
}
</style>

2. 在 JS 中动态使用

// 获取主题配置
const theme = uni.$store.state['zk-global'].theme

// 使用示例
uni.showToast({
    title: '操作成功',
    backgroundColor: theme.successBg
})

// 动态设置样式
this.$refs.myComponent.style.backgroundColor = theme.bgCard
this.$refs.myComponent.style.color = theme.textPrimary

注意事项

  • 主题色会自动适应明暗模式切换
  • 建议使用计算属性获取主题配置，以确保响应式更新
  • 渐变色只能用于背景，不能用于文字颜色
  • 某些特殊场景可能需要考虑颜色的对比度