记录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;
    }
}

html

data-theme="light" class="theme-light"
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

给钱,谢谢!

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值