css主题适配自己在项目中做过主题适配，以及遇到过一些坑。记录一下目前觉得成熟的主题适配。 css3特性之一css变量横

前言

自己在项目中做过主题适配，以及遇到过一些坑。记录一下目前觉得成熟的主题适配。

方式

主题的适配的姿势蛮多的，能找到一种优雅的姿势能少些不少代码。我更喜欢通过变量来控制主题的切换，而不是针对每一个样式都做主题适配。就像javascript中的函数一样，只需要输入变量值，就会返回相应的计算结果。成年人优雅很重要，下面介绍两种优雅又简单的方式：

css3变量-主题
less变量-主题

css3变量-主题

基础使用

css3特性之一css变量横空出世，用法很简单。声明变量的时候，变量名前面要加两根连词线（--）。CSS变量定义语法是：--color，变量使用语法是：var(--color)，其中color就是变量的名称。例如：

body {
    --color: #eb4339;
    --bk-color: #d2d2d2;
    div {
        font-size: 12px;
        color: var(--color);
        border-color: var(--color);
        background-color: var(--bk-color);
    }
}

在上面的代码中申明了--color和--bk-color两个变量并使用。

作用域

同一个 CSS 变量，可以在多个选择器内声明。读取的时候，优先级最高的声明生效。这与CSS的"层叠"（cascade）规则是一致的。

body {
  --foo: #7F583F;
}

.content {
  --bar: #F7EFD2;
}

上面代码中，变量--foo的作用域是body选择器的生效范围，--bar的作用域是.content选择器的生效范围。

全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们

:root {
  --main-color: #06c;
}

主题适配

基于css作用域，实现主题主题适配的思路是通过环境判断为变量设置不同的值。可以动态通过设置动态class实现，也可以通过javascript设置不同class或改变全局变量赋值来实现。

法一设置不同的class

<!--css-->

.theme_red {
    --color: red;
}
.theme_blue {
    --color: blue;
}

div {
    background-color: var(--color);
}

<!--javascript-->
let theme = 'theme_red'
div.classList.add(theme)
// 支持classList属性的游览器有firefox3.6+和chrome

如果是基于vue动态绑定calss更简单

<div :class="theme"></div>

<!--vue-->
created () {
    if (...) {
        this.theme = 'theme_red'
    }
}

css3变量-主题是一种十分友好的主题适配方式，但也有一个缺点，那就是兼容性，ios9.3+ 、 **android6+**才支持。曾经因为这个不兼容的问题半夜起来临时修复。。。~ ~。修复方案就是采用 less变量-主题。

推给大家一个查询css兼容性的网站：can i user

less变量-主题

less变量主题由less变量和less函数构成，使用更加灵活。通过加载不同的class加载不同的函数,目前是较好的方式。

.theme (@color) {
  button {
    border: 1px solid @color;
    color: @color;
  }
}

.theme_red {
  .theme(@color: red);
}
.theme_blue {
  .theme(@color: blue);
}