vue3实现自定义主题色切换功能

目录

1.添加theme样式文件

文件内容如下:

css 复制代码
html[data-theme="light"]{
  --text-color: #000000;
  /* 写需要切换的样式 */
}
html[data-theme="dark"]{
  --text-color: #ffffff;
  /* 写需要切换的样式 */
}

2.引入样式文件

在main.js中引入文件:

javascript 复制代码
import './styles/theme.css'

3.使用变量设置css样式

使用var(自定义的变量名)来设置动态的css样式

css 复制代码
.text {
  color: var(--text-color);
 }

4.设置主题样式

在index.html文件里设置默认样式

5.切换方法

javascript 复制代码
<button @click="changeTheme">切换</button>
const theme = ref('dark')
const changeTheme = () =>{
	document.documentElement.setAttribute("data-theme", theme.value == "dark" ? "light" : "dark")
	theme.value = theme.value == 'dark' ? 'light' : 'dark'
}
相关推荐
kymjs张涛9 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵14 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian62226 分钟前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失94932 分钟前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧42 分钟前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net
cccyi71 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆2 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
Sun_light2 小时前
5 个理由告诉你为什么有了 JS 还要用 TypeScript
前端·typescript