快捷導(dǎo)航

vue3快速實(shí)現(xiàn)主題切換功能的步驟詳解

更新時(shí)間：2024年06月04日 10:57:09 作者：蒾酒

本文介紹一種基于css變量的主題切換實(shí)現(xiàn)方式,這種是最簡(jiǎn)單,最直接,最容易理解的方式,實(shí)現(xiàn)的原理就是定義不同的HTML根標(biāo)簽元素的樣式,通過data屬性來區(qū)分不同主題css變量樣式,感興趣的朋友可以參考下

內(nèi)容概要

本文介紹一種基于css變量的主題切換實(shí)現(xiàn)方式，這種是最簡(jiǎn)單，最直接，最容易理解的方式。

實(shí)現(xiàn)的原理就是定義不同的HTML根標(biāo)簽元素的樣式，通過data屬性來區(qū)分不同主題css變量樣式，通過修改根元素的data屬性值來加載不同的css變量，實(shí)現(xiàn)主題切換。

實(shí)現(xiàn)步驟

1.定義不同主題的css樣式變量

一般把該css文件放在styles目錄下的theme.css里面

代碼如下：

/* 淺色色主題 */
html[data-theme="light"]{
	--page-bg: #ecf4fd;
	--bg1: #ffffff;
	--bg2: #ffffff;
	--txt-color: #000000;
	--prominent-txt-color :#ffffff;
	--prominent-color :#000000;
}
/* 暗色主題 */
html[data-theme="dark"]{
	--page-bg: #06142a;/*頁面級(jí)背景色*/
	--bg1: #06142a;/*菜單導(dǎo)航欄級(jí)背景色*/
	--bg2: #06142a;/*按鈕控件等小組件背景色*/
	--txt-color: #ffffff;
	--prominent-txt-color :#000000;
	--prominent-color :#ffffff;
}

2.入口main.ts中引入這個(gè)樣式文件

3.主題樣式css變量引用

在頁面各種根據(jù)主題變化的地方，如頁面背景色，導(dǎo)航欄背景色，文字顏色等引用這些css變量

比如：

通過var()來引用css變量

此時(shí)全部的前置工作已經(jīng)完成。

4.設(shè)置默認(rèn)主題樣式

在index.html設(shè)置默認(rèn)樣式。如圖設(shè)置的是深色主題

代碼如下：

<!DOCTYPE html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico" rel="external nofollow" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的工具箱</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

此時(shí)你的頁面就變成深色主題了。

5.實(shí)現(xiàn)點(diǎn)擊按鈕主題切換

準(zhǔn)備一個(gè)主題切換按鈕

js部分代碼：

//當(dāng)前主題
const theme=ref('dark')
//切換主題
const toggleTheme=()=>{
//獲取根元素并設(shè)置屬性
document.documentElement.setAttribute('data-theme',theme.value=='dark'?'light':'dark')
theme.value=theme.value=='dark'?'light':'dark'
}

html部分：

 <div class="theme" @click="toggleTheme()">
            <div class="theme-img">
                <a href="#" rel="external nofollow" >
                   
                    <div v-if="theme==='light'">
                        <img src="../../assets/月亮 .png" alt="">
                    </div>
                    <div v-if="theme==='dark'">
                      
                        <img src="../../assets/太陽.png" alt="">
                    </div>
                    
                </a>
            </div>
        </div>

效果：

點(diǎn)擊切換即可。

總結(jié)

這種實(shí)現(xiàn)主題切換的原理就是通過 HTML 的 data 屬性和 CSS 變量來動(dòng)態(tài)改變頁面的樣式，從而實(shí)現(xiàn)不同主題下的樣式切換。當(dāng)用戶切換主題時(shí)，只需改變 HTML 標(biāo)簽上的 data 屬性的值，頁面的樣式會(huì)自動(dòng)更新為對(duì)應(yīng)主題下的樣式。

以上就是vue3快速實(shí)現(xiàn)主題切換功能的步驟詳解的詳細(xì)內(nèi)容，更多關(guān)于vue3主題切換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: