• 记录uniapp切换主题色能在抖音小程序上无效问题


    东西很简单,就是一个data-theme="light"这种,就可以换不同的主题色

    但是运行到抖音小程序无效,但是改成 class=“theme-light” 就可以,但是仅限于页面层级的,组件的也不行

    不知道现在怎么回事,也不知道该咋改了
    css

    $themes: (
      light: (
        // 主题色 不会变化
        mian-color: #f6f6f6,
        mian-color-dk: #9c7a4b,
        mian-color-light: #e8dfcc,
    
        // 主色辅助色 不会变化
        sub-color-dk: #c4a97d,
        sub-color-light: #f8edc7,
    
        // 配色
        color-red: #930000,
        color-gray: #999999,
        color-dark: #222222,
        color-white: #f3f3f3,
    
        // 文字颜色
        text-color: #9c7a4b,
        text-color-dk: #9c7a4b,
        text-color-red: #e66262,
        text-color-dark: #222222,
        text-color-white: #f3f3f3,
        text-color-light: #f8edc7,
        text-color-gray: #999999,
    
        // bg
        bg-color: #f6f6f6,
        bg-color-shade: rgba(#222222, 0.7),
        bg-color-shade-light: rgba(#f3f3f3, 1),
        bg-color-white: #ffffff,
        bg-color-dark: #222222,
        bg-color-dk: #9c7a4b,
        bg-color-gray: rgb(218, 218, 218),
        // 边框颜色
        border-color: #9c7a4b,
        border-color-dk: #9c7a4b,
        border-color-none: rgba(#fff, 0),
        // img
        img-bg: #444,
        img-bg-light: #f3f3f3,
        img-bg-dk: #999,
    
        // 按钮
        btn-primary-color: #1b170d,
        btn-primary-color-hover: #1b170d,
    
        btn-primary-border: #bba27a,
        btn-primary-border-hover: #bba27a,
    
        btn-primary-background: linear-gradient(20deg, #bba27a, #a98f63),
        btn-primary-background-hover: linear-gradient(20deg, #aa8954, #a8874e),
        btn-green-color: #7b9c4b,
    
        // btn-success-color: linear-gradient(20deg, #C17452, #AB5F36),
        // btn-warning-color: linear-gradient(20deg, #BBA27A, #A98F63),
        // btn-info-color: linear-gradient(20deg, #BBA27A, #A98F63),
        // btn-shadow: 0px 15px 16px 0px rgba(121, 115, 95, 0.26),
        // $--color-success: #67c23a !default;
        // $--color-warning: #e6a23c !default;
        // $--color-danger: #f56c6c !default;
        // $--color-info: #909399 !default;,,
      ),//声明一个根据Key获取颜色的function
    @function themed($key) {
        @return map-get($theme-map, $key);
    }
    
    //获取背景颜色
    @mixin background_color($color) {
        @include themeify {
            background-color: themed($color) !important;
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    html

    data-theme="light" class="theme-light"
    
    • 1
  • 相关阅读:
    计算机毕业设计 SSM校园二手交流系统 大学二手交易平台系统 二手物品交易平台Java Vue MySQL数据库 远程调试 代码讲解
    【MySQL】表的基础增删改查
    无代码开发部门入门教程
    C++ map和set
    “清华女神”回国,赤子之心,如愿以偿
    今年​计算机考研形势如何,408还是大趋势么?
    【力扣算法简单五十题】08.删除排序链表中的重复元素
    浅谈 CRTP:奇异递归模板模式
    servlet的简单使用总结
    【精通Java】集合类体系之Collection
  • 原文地址:https://blog.csdn.net/weixin_43073383/article/details/132756571