Vue使用CSS變數實現切換主題功能-css教學-PHP中文網

首頁

web前端

css教學

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

angryTom

Nov 29, 2019 pm 04:47 PM

css變數主題

主題化管理經常能在網站上看到，一般的想法都是將主題相關的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中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

Flexbox vs Grid：我應該學習兩者嗎？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

軌道力學（或我如何優化CSS KeyFrames動畫）May 09, 2025 am 09:57 AM

重構自己的代碼看起來是什麼樣的？約翰·瑞亞（John Rhea）挑選了他寫的一個舊的CSS動畫，並介紹了優化它的思維過程。

CSS動畫：很難創建它們嗎？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles