更新记录

1.0.3（2025-12-08） 下载此版本

修复上个版本的错别字

1.0.2（2025-12-08） 下载此版本

更新下项目的readme, 增加对 根据背景色设置适应的字体颜色 的函数 描述

1.0.1（2025-12-06） 下载此版本

优化 对于 vue2版本的兼容

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.16)

双主题切换方案

只在微信小程序/vue3版本测试了, 但是这个项目主要是颜色输出, 应该是比较兼容的

开始使用

1. 在 uni.scss 引入主题

// uni.scss
@import "@/uni_modules/yy-theme/common/theme.scss";

2. 在 App.vue 引入初始化主题

// App.vue
<script>
    // 这里需要引入
    import themeManager from '@/uni_modules/yy-theme/common/theme-manager.js'
    export default {
        onLaunch() {
            // 这里需要初始化
            themeManager.initTheme()
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

3. 在 你的.vue文件种的 结构布局

// 页面上使用

<template>
    <!-- 每个页面都需要定义   class="page-root" :class="rootClass"   虽然有些样式给到了根元素但是不定义page-root就没有主题切换动画了 -->
    <view class="page-root" :class="rootClass">

        <!-- 你的其他代码 -->

    </view>
</template>

<script>
    // 每个页面都需要引用
    import themeManager from '@/uni_modules/yy-theme/common/theme-manager.js'

    export default {
        data() {
            return {
                isSwitching: false
            }
        },

        computed: {
            // 每个页面都定义
            theme() {
                return themeManager.state.theme
            },
            // 每个页面都定义
            rootClass() {
                return themeManager.getRootClass()
            }
        },
        onLoad() {},
        watch: {
            theme(val) {
                try {
                    uni.setStorageSync('WMA_THEME', val)
                } catch (e) {}
            }
        },
        methods: {
            onThemeChange(e) {
                const target = e.detail.value ? 'dark' : 'light'
                themeManager.switchThemeWithAnimation(target)
            },
            onPrimaryClick() {},
        }
    }
</script>

4. 在 theme.scss 中有几个变量

修改这几个 颜色 整体主题都会变

这个函数 ( build-theme-vars() ) 会生成对应的主题的颜色变量

build-theme-vars() 的参数描述

只讲第一个参数,其他都是下面的变量

$ns 这是 变量名的前缀,在 页面用的 时候 var(--你定义的前缀-[实际想用的颜色])

关于 [实际想用的颜色] 如果在 theme-calc.scss 定义的不够 可以自己加

// 青春女主 主题色
$wma-primary: #ffb7c3;
$wma-success: #5ac8b0;
$wma-warning: #ffb86b;
$wma-danger: #ff6a88;
$wma-info: #7f9cff;

// 这里是页面的基础颜色
$wma-page-bg-light: #fff7fb; // 页面背景：很浅的粉白
$wma-card-bg-light: #ffffff; // 卡片保持纯白，内容更清晰
$wma-page-bg-dark: #120c16; // 整体背景：深紫红黑，偏女生感
$wma-card-bg-dark: #1e1524; // 卡片稍微比页面亮一点

5. 再讲一个函数 surface-by()

// surface-by()  
// 在 theme-calc.scss 的 131行, 后期更新版本可能不在这一行,但是在这一个页面
// 其目的是为了给你想用其他颜色,但是又不是常用,或是后期又想加的时候
// 反正是一个可以跟随 主题的 生成 样式的那么一个函数示例
// 我这个函数就是 输入2个颜色,  生成一个卡片样式的 类似 class 的一个函数

6. 再讲一个函数 on-info-color()

如何让文本根据背景调整颜色

调用这个函数 参数放背景色 color: on-info-color(你的颜色变量); 这样也可以 如果你有几个统一的背景色,那么 再 4阶段 的 build-theme-vars() 函数中 去调用这个函数 统一赋值变量 --#{$ns}tc1: on-info-color(你的颜色变量); 用的时候 color: var(--你的前缀-tc1)

还有一个 函数 on-color() 是返回 浅色/深色 2种颜色的 函数, 传入背景色