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或改變全局變量賦值來實現。

1. 法一設置不一樣的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);
}
複製代碼