Vue使用CSS變數實現切換主題功能
主題化管理經常能在網站上看到，一般的想法都是將主題相關的CSS樣式獨立出來，在使用者選擇主題的時候載入對應的CSS樣式檔。現在大部分瀏覽器都能很好的相容CSS變量，主題化樣式更容易管理了。最近，使用CSS變數在Vue專案中做了一個主題化實踐，以下來看看整個過程。
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'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><template>
<div>
<div :class="$style.demo">变红色</div>
</div>
</template>
<script>
export default {
name: 'home'
}
</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）資料夾下。
實作主題切換
themes.js文件，程式碼如下：
// 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 toggleThemedefault.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
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// 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記住主題
實現記住主題這個功能，一是可以向伺服器儲存主題，一是使用本機儲存主題。為了方便，這裡主要使用本地儲存主題的方式，即使用localStorage儲存主題。具體實現請移步Github專案位址。 本文來自PHP中文網，CSS教學專欄，歡迎學習
以上是Vue使用CSS變數實現切換主題功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
主題背景位於 Windows 11 中的什麼位置？
Aug 01, 2023 am 09:29 AM
Windows11具有如此多的自訂選項，包括一系列主題和桌布。雖然這些主題以自己的方式是美學，但有些用戶仍然想知道他們在Windows11上的後台位置。本指南將展示造訪Windows11主題背景位置的不同方法。什麼是Windows11預設主題背景？ Windows11預設主題背景是一朵盛開的抽象寶藍色花朵，背景為天藍色。這種背景是最受歡迎的背景之一，這要歸功於作業系統發布之前的預期。但是，作業系統還附帶了一系列其他背景。因此，您可以隨時變更Windows11桌面主題背景。主題背景儲存在Windo
如何詳細介紹win10主題資料夾的位置
Dec 27, 2023 pm 09:37 PM
最近很多朋友覺得win10的主題不符合自己的審美，想更換主題，在網路上下載以後，發現找不到資料夾了，那麼接下來小編就帶你們去如何尋找win10主題在哪裡資料夾吧。 win10主題在哪個資料夾：一、Win10系統桌布預設存放路徑位置：1.微軟將這些圖片保存在C：\Windows\Web\Wallpaper這個路徑中，其下有是三個不同主題的圖片的預設保存位置，2、花朵和線條和顏色的主題圖片也保存在同名資料夾下！命名原則就是imgXXX，我們只要按照這個原則更改我們希望設定的相關圖片的名稱，將圖片貼到
如何在 Windows 11 中取消套用主題（變更或刪除）
Sep 30, 2023 pm 03:53 PM
主題對於希望修改Windows體驗的使用者起著不可或缺的作用。它可能會更改桌面背景、動畫、鎖定螢幕、滑鼠遊標、聲音和圖示等。但是，如果您想在Windows11中刪除主題怎麼辦？這同樣簡單，並且有一些選項可用，無論是當前使用者設定檔還是整個系統，即所有使用者。此外，您甚至可以刪除Windows11中的自訂主題，如果它們不再用於該目的。如何找到我目前的主題？按+開啟「設定」應用程式>從導覽窗格中前往「個人化」>點選「主題」>目前主題將列在右側。 WindowsI如何
win10主題背景圖片位置
Jan 05, 2024 pm 11:32 PM
有的朋友想要找到自己系統主題圖片，但不知道win10主題圖片存放在哪裡，其實我們只要進入c盤的Windows資料夾，就可以找到主題圖片位置了。 win10主題圖片存放位置答：win10主題圖片存放在c盤的「themes」資料夾。 1.首先我們進入「此電腦」2、接著開啟「c碟」（系統碟）3、然後進入其中的「Windows」資料夾。 4、在其中找到並開啟「resources」資料夾。 5.進入後，打開「themes」資料夾。 6.在資料夾裡就能看到win10主題圖片了。 Windows主題圖片是特殊的格式，
如何調整WordPress主題避免錯位顯示
Mar 05, 2024 pm 02:03 PM
如何調整WordPress主題避免錯位顯示，需要具體程式碼範例WordPress作為一個功能強大的CMS系統，受到了許多網站開發者和站長的喜愛。然而，在使用WordPress建立網站時，經常會遇到主題錯位顯示的問題，這對於使用者體驗和頁面美觀都會造成影響。因此，合理調整WordPress主題以避免錯位顯示是非常重要的。本文將介紹如何透過具體的程式碼範例來進行主題調
找win10主題的資料夾位置
Jun 30, 2023 pm 12:57 PM
win10主題在哪個資料夾怎麼找？最近很多小夥伴都覺得win10的主題不符合他們自己的審美，想要改變主題，在網路上下載後，發現找不到資料夾，然後小邊會帶你去找如何找到win資料夾的主題在哪裡？ win10主題在哪個資料夾詳細介紹一、Win10系統壁紙預設存放路徑位置：1、微軟將這些圖片保存在C：WindowsWebWallpaper這個路徑中，其下有是三個不同主題的圖片的預設保存位置，2、鮮花和線條和顏色的主題圖片也保存在同名資料夾下！命名原則就是imgXXX，我們只要按照這個原則更改我們希望設定的
微信變成黑色主題怎麼調回來
Feb 05, 2024 pm 02:12 PM
微信軟體中我們可以使用黑色主題模式也可以使用預設主題模式，那麼有的用戶微信變成黑色主題了，想要調回來要怎麼操作呢？現在就來看看-微信變成黑色主題調回來方法。 1.先打開微信進入到首頁之後點選右下角的【我的】；2、然後在我的頁面點選【設定】；3、接著來到設定的頁面中點選【通用】；4、進入到通用的頁面中點選【深色模式】；5、最後在深色模式的頁面中點選【普通模式】即可；
VSCode 中文設定：個人化你的編輯器
Mar 25, 2024 pm 05:00 PM
標題：VSCode中文設定：個人化你的編輯器在現今的程式設計師工作中，一款強大、靈活且個人化的程式碼編輯器是必不可少的工具。 VisualStudioCode(簡稱VSCode)作為一款免費開源的現代化程式碼編輯器，受到了廣大開發者的喜愛。與許多軟體一樣，VSCode也支援多語言，包括中文。本文將介紹如何在VSCode中設定中文環境，讓你的編輯器更
