uniapp主题色切换

前言

1. 实现uniapp主题色自由切换，第一个联想到的就是使用css中的var函数直接全局修改。
2. var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。
3. 我们使用的是uniapp开发，所以需要考虑H5以及微信小程序兼容方案。

var变量

// 注册var变量
:root {
    --theme-color: #f00;
}
// 引用颜色变量
.bg-color{
  background: var(--theme-color);
}

实现的效果

全局修改方式（不考虑小程序的方式）

// 直接操作dom,可以考虑直接修改全局style
const root = document.querySelector(':root');
root.style.setProperty('--theme-color', '#0f0');

uni兼容方式处理

<!-- 通过每个页面根节点传入样式变量实现，覆盖了:root的var变量 -->
<view :style="style">
    <view class="bg-color">
      背景颜色
    </view>
    <view @click="change">
      改变
    </view>
</view>

  data() {
    return {
      style: '--theme-color: #00f;',
    };
  },
  methods: {
    change() {
      this.style = '--theme-color: #0f0';
    },
  },

.bg-color{
  background: var(--theme-color);
}

uview实现主题色修改

//  uni.scss
// 全局引入uview，我们查找uview的源码可以发现
@import 'uview-ui/theme.scss';

// uview-ui/theme.scss
// 使用了scss的变量，打包出来以后的css是不能变化的，只存在编译时可变化， 而不同于css原生变量在打包以后仍可动态变化

...
$u-type-success: #19be6b;
$u-type-success-disabled: #71d5a1;
$u-type-success-dark: #18b566;
$u-type-success-light: #dbf1e1;
...

// uni.scss
// 我们在引入@import 'uview-ui/theme.scss';
// 把scss的变量修改成为css原生变量

:root {
    --theme-color: #19be6b;
}
@import 'uview-ui/theme.scss';
$u-type-success: var(--theme-color);
// 包括饿了么等ui框架的主题色也可以通过提取scss文件的变量，进行覆盖，不过需记得引入scss不是css

总结

1. 需要用到主题色的地方使用var变量统一编写
2. 在最外层的view节点使用行内样式的进行覆盖全局变量，通过继承先后顺序的方式来查找最近的var变量位置
3. 在小程序组件中，往外找是可以找到page之下第一个view上的变量，不需要再次声明
4. 把var变量声明，放在每个页面最外层的view上是折中方案，小程序没有全局可以动态修改的根节点
5. 欢迎有更好的idea讨论

最终效果展示

H5

小程序