搜尋

首頁 >web前端 >css教學 >Vue使用CSS變數實現切換主題功能

Vue使用CSS變數實現切換主題功能

angryTom
angryTom轉載
2019-11-29 16:47:053678瀏覽

主題化管理經常能在網站上看到，一般的想法都是將主題相關的CSS樣式獨立出來，在使用者選擇主題的時候載入對應的CSS樣式檔。現在大部分瀏覽器都能很好的相容CSS變量，主題化樣式更容易管理了。最近，使用CSS變數在Vue專案中做了一個主題化實踐，以下來看看整個過程。

Vue使用CSS變數實現切換主題功能

Github專案網址 https://github.com/JofunLiang/vue-project-themable-demo

示範網址 https://jofunliang.github .io/vue-project-themable-demo/

可行性測試

為了檢驗方法的可行性，在public資料夾下新建一個themes資料夾，並在themes資料夾新建一個default.css檔案：

:root {
  --color: red;
}

推薦學習：CSS視訊教學

##在public資料夾的index.html檔案中引入外部樣式

theme.css，如下：

<!DOCTYPE html>
<html>
  <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&#39;re sorry but vue-skin-peeler-demo doesn&#39;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變數：

<template>
  <div>
    <div :class="$style.demo">变红色</div>
  </div>
</template>
<script>
export default {
  name: &#39;home&#39;
}
</script>
<style module>
  .demo {
    color: var(--color);
  }
</style>

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

注意：@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）資料夾下。

實作主題切換

這裡主題切換的想法是取代link標籤的href屬性，因此，需要寫一個替換函數，在src目錄下新建

themes.js文件，程式碼如下：

// themes.js
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  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 &#39;mutationobserver-shim&#39;
import cssVars from &#39;css-vars-ponyfill&#39;
cssVars({
  watch: true
})
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  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 &#39;mutationobserver-shim&#39;
import cssVars from &#39;css-vars-ponyfill&#39;
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement(&#39;link&#39;)
    $link.rel = &#39;stylesheet&#39;
    $link.type = &#39;text/css&#39;
    document.querySelector(&#39;head&#39;).appendChild($link)
    return $link
  }
})()
/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = &#39;default&#39;) => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  cssVars({
    watch: false
  })
  setTimeout(function () {
    cssVars({
      watch: true
    })
  }, 0)
  return theme
}
export default toggleTheme

查看所有程式碼，請移步Github專案位址。

記住主題

實現記住主題這個功能，一是可以向伺服器儲存主題，一是使用本機儲存主題。為了方便，這裡主要使用本地儲存主題的方式，即使用localStorage儲存主題。具體實現請移步Github專案位址。 

本文來自PHP中文網，

CSS教學專欄，歡迎學習  

以上是Vue使用CSS變數實現切換主題功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除
上一篇：CSS定位怎麼理解？下一篇：CSS定位怎麼理解？

相關文章

看更多