vue3 vite ant deign vue黑暗模式實(shí)現(xiàn)過(guò)程
更新時(shí)間：2026年04月29日 09:23:02 作者：yangliweigauguagua
該文章介紹了如何通過(guò)CSS變量和全局CSS文件實(shí)現(xiàn)黑暗模式,主要內(nèi)容包括：創(chuàng)建`dark.less`和`light.less`文件對(duì)應(yīng)黑暗和白天模式,使用CSS變量替換原有數(shù)值,編寫(xiě)切換CSS函數(shù)及切換黑暗/白天模式的函數(shù),使用此方法,只需調(diào)用切換函數(shù)即可實(shí)現(xiàn)模式切換
1、實(shí)現(xiàn)黑暗模式
主要是對(duì)css變量的抽取和全局css的替換
2、編寫(xiě)一個(gè)全局的css變量css文件
:root{
--page-bg-color: #fff;
--head-bg-color: rgba(255, 255, 255, 0.7);
--text-color:rgba(0, 0, 0, 0.85);
--line-color: #e8e8e8;
--content-bg-color:#f0f2f5;
}
3、創(chuàng)建dark.less和light.less文件對(duì)應(yīng)黑暗和白天
dark.less
@import "../../node_modules/ant-design-vue/dist/antd.dark.less"; @import "./index.css"; @import "./base.less"; @import "./vars.css";
light.less
@import "../../node_modules/ant-design-vue/dist/antd.less"; @import "./index.css"; @import "./base.less"; @import "./vars.css";
4、在less和css中用變量替換掉原本的數(shù)值
.pagemodal {
background: white;
background: var(--page-bg-color);
border-radius: 5px;
padding: 10px;
}5、編寫(xiě)切換css函數(shù)
// 切換css
export const changeTheme = (theme: string) => {
const head = document.head;
document.getElementById("theme")?.remove();
const styleDom = document.createElement("style");
styleDom.id = "theme";
styleDom.innerHTML = theme;
head.appendChild(styleDom);
};
// 改變css變量
export const changeCss = (css: string, value: string) => {
const body = document.body.style;
body.setProperty(css, value);
};
6、編寫(xiě)一個(gè)切換黑暗白天模式的函數(shù)
//引入ant design vue的css 白色和黑色的less文件都要引入
import light from "../less/light.less";
import dark from "../less/dark.less";
// 切換黑暗模式或者白天模式
export const DarkMode = (isDark: boolean) => {
if (isDark) {
changeTheme(dark);
changeCss("--page-bg-color", "#141414");
changeCss("--head-bg-color", "rgba(0, 0, 0, 0.5)");
changeCss("--line-color", "#2e2e2e");
changeCss("--content-bg-color", "rgb(255 255 255 / 4%)");
changeCss("--text-color", "rgba(255, 255, 255, 0.85)");
} else {
changeTheme(light);
changeCss("--page-bg-color", "white");
changeCss("--head-bg-color", "rgba(255, 255, 255, 0.7)");
changeCss("--line-color", "#e8e8e8");
changeCss("--content-bg-color", "#f0f2f5");
changeCss("--text-color", "rgba(0, 0, 0, 0.85)");
}
};
7、使用的時(shí)候只要
// 白色 DarkMode(false); // 黑色 DarkMode(true);
效果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue3+vite+antd如何實(shí)現(xiàn)自定義主題
- vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案
- 解決vue3+vite配置unplugin-vue-component找不到Vant組件
- vue3+vite+vant4手機(jī)端項(xiàng)目實(shí)戰(zhàn)記錄
- vue3+vite項(xiàng)目中按需引入vant報(bào)錯(cuò):Failed?to?resolve?import的解決方案
- 使用Vite+Vue3+Vant全家桶快速構(gòu)建項(xiàng)目步驟詳解
- Vite中使用Ant?Design?Vue3.x框架教程示例
相關(guān)文章
很多時(shí)候?yàn)榱俗屘岣哂脩?hù)的體驗(yàn)感,在頁(yè)面上添加緩存,是十分有必要的,?下面這篇文章主要給大家介紹了關(guān)于vue3.0列表頁(yè)面做緩存的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue prop傳值類(lèi)型檢驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式
這篇文章主要介紹了vue項(xiàng)目中vant tab改變標(biāo)簽顏色方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2022-04-04
vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解（部分校驗(yàn),全部校驗(yàn)）
validate（)可以指定校驗(yàn)范圍內(nèi)，或者是全局的 字段。而validateAll()只能校驗(yàn)全局。這篇文章主要介紹了vue+VeeValidate 校驗(yàn)范圍（部分校驗(yàn)，全部校驗(yàn)） ,需要的朋友可以參考下2018-10-10
vue3 reactive定義的引用類(lèi)型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問(wèn)題
這篇文章主要介紹了vue3 reactive定義的引用類(lèi)型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue實(shí)現(xiàn)購(gòu)物車(chē)拋物線(xiàn)小球動(dòng)畫(huà)效果的方法詳解
這篇文章主要介紹了vue實(shí)現(xiàn)購(gòu)物車(chē)拋物線(xiàn)小球動(dòng)畫(huà)效果的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了vue.js實(shí)現(xiàn)拋物線(xiàn)動(dòng)畫(huà)效果購(gòu)物車(chē)功能相關(guān)原理與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問(wèn)題
這篇文章介紹了解決vue頁(yè)面刷新vuex中state數(shù)據(jù)丟失的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
Element的Pagination分頁(yè)sync問(wèn)題小結(jié)
本文主要介紹了Element的Pagination分頁(yè)sync問(wèn)題小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
本篇文章主要介紹了詳解基于mpvue的小程序markdown適配解決方案，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
vue3深入學(xué)習(xí)?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學(xué)習(xí)?nextTick和historyApiFallback，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08