Vue項目使用CSS變量實現主題化

時間 2019-11-24

標籤 vue 項目使用 css 變量實現主題欄目 CSS 简体版

原文原文鏈接

主題化管理常常能在網站上看到，通常的思路都是將主題相關的CSS樣式獨立出來，在用戶選擇主題的時候加載相應的CSS樣式文件。如今大部分瀏覽器都能很好的兼容CSS變量，主題化樣式更容易管理了。最近，使用CSS變量在Vue項目中作了一個主題化實踐，下面來看看整個過程。css

Github項目地址
 演示地址html

可行性測試

爲了檢驗方法的可行性，在public文件夾下新建一個themes文件夾，並在themes文件夾新建一個default.css文件：vue

:root {
  --color: red;
}

在public文件夾的index.html文件中引入外部樣式theme.css，以下：webpack

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-skin-peeler-demo</title>
    <!-- 引入themes文件夾下的default.css -->
    <link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

而後，在Home.vue中使用CSS變量：git

<template>
  <div class="home">
    <div :class="$style.demo">變紅色</div>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

<style module lang="scss">
  .demo {
    color: var(--color);
  }
</style>

而後，運行項目並在瀏覽器中打開頁面，頁面顯示效果正常。github

注意：@vue/cli使用link標籤引入css樣式可能報錯「We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.」。這是由於@vue/cli將src目錄下的文件都經過webpack打包所引發，因此，靜態文件資源要放在public（若是是@vue/cli 2.x版本放在static）文件夾下。web

實現主題切換

這裏主題切換的思路是替換link標籤的href屬性，所以，須要寫一個替換函數，在src目錄下新建themes.js文件，代碼以下：npm

// themes.js
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.type = 'text/css'
    document.querySelector('head').appendChild($link)
    return $link
  }
})()

/**
 * 主題切換函數
 * @param {string} theme - 主題名稱, 默認default
 * @return {string} 主題名稱
 */
const toggleTheme = (theme = 'default') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}

export default toggleTheme

而後，在themes文件下建立default.css和dark.css兩個主題文件。建立CSS變量，實現主題化。CSS變量實現主題切換請參考另外一篇文章初次接觸css變量瀏覽器

兼容性

IE瀏覽器以及一些舊版瀏覽器不支持CSS變量，所以，須要使用css-vars-ponyfill，是一個ponyfill，可在舊版和現代瀏覽器中爲CSS自定義屬性（也稱爲「 CSS變量」）提供客戶端支持。因爲要開啓watch監聽，因此還有安裝MutationObserver.js。服務器

安裝：

npm install css-vars-ponyfill mutationobserver-shim --save

而後，在themes.js文件中引入並使用：

// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'

cssVars({
  watch: true
})

const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.type = 'text/css'
    document.querySelector('head').appendChild($link)
    return $link
  }
})()

/**
 * 主題切換函數
 * @param {string} theme - 主題名稱, 默認default
 * @return {string} 主題名稱
 */
const toggleTheme = (theme = 'default') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}

export default toggleTheme

開啓watch後，在IE 11瀏覽器點擊切換主題開關不起做用。所以，每次切換主題時都從新執行cssVars()，仍是沒法切換主題，緣由是開啓watch後從新執行cssVars()是無效的。最後，只能先關閉watch再從新開啓。成功切換主題的themes.js代碼以下：

// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'

const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.type = 'text/css'
    document.querySelector('head').appendChild($link)
    return $link
  }
})()

/**
 * 主題切換函數
 * @param {string} theme - 主題名稱, 默認default
 * @return {string} 主題名稱
 */
const toggleTheme = (theme = 'default') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  cssVars({
    watch: false
  })
  setTimeout(function () {
    cssVars({
      watch: true
    })
  }, 0)
  return theme
}

export default toggleTheme

查看全部代碼，請移步Github項目地址。