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

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

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

內容概要

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

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

實現(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;/*頁面級背景色*/
	--bg1: #06142a;/*菜單導航欄級背景色*/
	--bg2: #06142a;/*按鈕控件等小組件背景色*/
	--txt-color: #ffffff;
	--prominent-txt-color :#000000;
	--prominent-color :#ffffff;
}

2.入口main.ts中引入這個樣式文件

3.主題樣式css變量引用

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

比如：

通過var()來引用css變量

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

4.設置默認主題樣式

在index.html設置默認樣式。如圖設置的是深色主題

代碼如下：

<!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>

此時你的頁面就變成深色主題了。

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

準備一個主題切換按鈕

js部分代碼：

//當前主題
const theme=ref('dark')
//切換主題
const toggleTheme=()=>{
//獲取根元素并設置屬性
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>

效果：

點擊切換即可。