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

news/2024/7/20 3:21:48 标签: uni-app, 小程序

东西很简单,就是一个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"

http://www.niftyadmin.cn/n/5012784.html

相关文章

docker的登录证书和账号查看

一、环境 docker -vDocker version 23.0.6, build ef23cbc二、查看登录信息 1、查看都登录了哪些仓库 cat /root/.docker/config.json{"auths": {"registry-dev.xxx.johnny.com:18083": {"auth": "YWRtaW46YWRtaW4xMjM"},"reg…

Android 应用程序通过MediaPipe 图片识别

MediaPipe 中使用目标检测模型可以实现实时检测图像或视频中的物体,并标记出物体的位置和类别。MediaPipe 中的目标检测模型基于机器学习算法,经过训练以识别特定的物体类别; 以下是在 Android 应用程序中集成 MediaPipe Object Detection 的…

redis八股1

参考Redis连环60问(八股文背诵版) - 知乎 (zhihu.com) 1.是什么 本质上是一个key-val数据库,把整个数据库加载到内存中操作,定期通过异步操作把数据flush到硬盘持久化。因为纯内存操作,所以性能很出色,每秒可以超过10…

PHP请求API接口案例采集电商平台数据获取淘宝/天猫优惠券查询示例

优惠券查询API接口对于用户和商家来说具有重要作用,可以方便地获取优惠券信息,进行优惠券搜索和筛选,参与活动和促销推广,提供数据分析和决策支持,提升用户体验和忠诚度,为商家增加销售额和市场竞争力。 t…

软件管理 - yum - rpm -本地yum源 - 局域网远程yum源 - 阿里云镜像 - 克隆阿里云镜像源

软件管理 - yum - rpm -本地yum源 - 局域网远程yum源 - 阿里云镜像 - 克隆阿里云镜像源 更换阿里开源镜像网站,手把手教你怎么换,再也不需要求人了 rpm -> centos 的安装包后缀 rpm软件包名称: 软件名称 版本号(主版本、次版本、修订号) 操作系统 --…

概率论与数理统计学习笔记(7)——全概率公式与贝叶斯公式

目录 1. 背景2. 全概率公式3. 贝叶斯公式 1. 背景 下图是本文的背景内容,小B休闲时间有80%的概率玩手机游戏,有20%的概率玩电脑游戏。这两个游戏都有抽卡环节,其中手游抽到金卡的概率为5%,端游抽到金卡的概率为15%。已知小B这天抽…

工具 | XShell的学习与使用

工具 | XShell的学习与使用 时间:2023年9月8日09:03:29 文章目录 工具 | XShell的学习与使用1.下载2.安装 1.下载 1.官网XSHELL - NetSarang Website 2.免费版下载:家庭/学校免费 - NetSarang Website (xshell.com) 3.https://cdn.netsarang.net/de06d10…

【Spring传播机制底层原理】

一、Spring的事务传播机制 Spring的事务传播机制是Spring框架中最核心的机制之一,它能够灵活地控制多个事务方法的执行顺序、提交或回滚等行为。在Spring中,事务是通过TxManager来管理的,TxManager是一个接口,提供了开启、提交、…