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'
}
相关推荐
Vicky&James12 分钟前
WPF到Web的无缝过渡:英雄联盟客户端项目OpenSilver迁移实战
前端·wpf
m0_7482336415 分钟前
RabbitMQ 进阶
android·前端·后端
不想有bug的小菜鸟24 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_7482386325 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u01005596025 分钟前
前端代理,解决跨域问题讲解
前端
quitv30 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238139 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星41 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-1 小时前
iOS 将GIF图分享至微信
前端·ios
graywen1 小时前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端