vue3简单快速实现主题切换功能

原创 已于 2024-06-01 13:53:23 修改 · 2k 阅读 · 91 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

于 2024-06-01 13:49:38 首次发布

⛰️个人主页:     蒾酒

🔥系列专栏：《vue3实战》

目录

内容概要

实现步骤

1.定义不同主题的css样式变量

2.入口main.ts中引入这个样式文件

3.主题样式css变量引用

4.设置默认主题样式 

5.实现点击按钮主题切换

总结

  最近发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。

    点击跳转到学习网站

内容概要

本文介绍一种基于css变量的主题切换实现方式，这种是最简单，最直接，最容易理解的方式。

实现的原理就是定义不同的HTML根标签元素的样式，通过data属性来区分不同主题css变量样式，通过修改根元素的data属性值来加载不同的css变量，实现主题切换。

实现步骤

1.定义不同主题的css样式变量

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

最低0.47元/天 解锁文章

200万优质内容无限畅学
《Vue3笔记》第44节：Vue3基于CSS变量实现亮色和暗色主题切换功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
07-30 165
本文介绍了基于CSS变量实现Vue3项目亮色/暗色主题切换的方法。主要思路是：定义两套CSS变量（亮色和暗色主题），通过切换html根元素的data-theme属性来改变变量值；使用localStorage存储当前主题实现持久化。实现步骤包括：1)定义CSS变量；2)创建useTheme.js管理主题状态；3)在组件中使用CSS变量和切换方法。案例展示了通过开关按钮切换主题的效果，颜色和背景会相应变化。该方法简单高效，适用于Vue3项目中的主题切换需求。
Vue UI框架主题切换的实现方法
loop_git667的博客
09-25 429
一个常见的需求是在应用程序中实现主题切换功能，允许用户在不同的主题之间进行选择。本文将介绍如何使用Vue框架来实现主题切换功能，并提供相应的源代码示例。接下来，我们需要选择一个Vue UI框架来构建我们的应用程序。通过监听子组件的事件，我们可以在父组件中更新主题，并应用相应的样式。通过这种方式，用户可以方便地切换应用程序的主题。至此，我们已经完成了Vue UI框架主题切换功能的实现。用户现在可以通过下拉选择框切换应用程序的主题，对应的样式将会被应用。文件引入到应用程序中，以便在页面中应用不同主题的样式。
vue在线动态切换主题色方案
10-15
主要介绍了vue在线动态切换主题色方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue实现项目主题切换
最新发布
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
07-09 156
vue实现项目主题切换
VUE3中实现主题颜色切换
阿琰a_的博客
04-19 2235
root{这里定义了两套CSS主题，:root会选择到根元素，也就是会选择到Html元素，所以在Html下的元素都可以引用创建好的变量，实现共用颜色主题，这个文件可以直接在main.ts文件中import引入。
Vue3 + Element Plus 项目实现自定义主题切换
m0_65029152的博客
12-19 8687
vue3 + Element Plus 实现自定义主题切换
vue切换主题色
A_rui_的博客
04-15 3625
vue+scss切换主题色 1.创建global.scss样式文件，在app.vue 引入 @import '@/assets/style/global.scss'; 2.dark.scss和light.scss为两个主题色样式配置变量文件，在global.scss中引入。两个文件定义样式变量，分别引用theme.scss,用于定义类名使用样式 //globals.scss @import "./theme/light.scss"; @import "./theme/dark.scss"; //dar
Vue3 + Scss 实现主题切换效果
再渺小的星光，也有属于它的光芒
11-27 1501
先给大家看一下主题切换的效果：像这样的效果实现起来并不难，只是比较麻烦，目前我知道的有两种方式可以实现，分别是CSS变量、样式文件切换，下面是该效果的核心实现方法。
vue3.0-vite-antd 实现动态切换主题.zip
10-29
在Vue3.0框架中，配合Vite构建工具和Ant Design Vue 2.0库，实现动态主题切换是一项常见的需求，特别是在开发具有高度定制化界面的Web应用时。本项目"vue3.0-vite-antd 实现动态切换主题.zip"提供了一种实现方式，...
electron+vue3实现桌面端应用开发
08-18
将两者结合，开发者可以利用Vue3的强大功能来设计用户界面，同时借助Electron实现桌面应用的特性，如本地存储、系统交互等。 接下来，我们探讨`vite`在其中的作用。Vite采用了按需编译的理念，它在开发时直接提供...
vue主题颜色切换
王兆镇的博客
06-08 2608
/ 蓝色 /***********************************************************************************************************************/ .Blue {// 左侧整体背景颜色} //左侧导航背景//左侧导航背景.el-menu {} //左侧导航背景鼠标焦点颜色 --el-color-primary-light-9 : #3656b5;} // logo颜色。
vue 切换主题颜色
weixin_48199777的博客
08-25 450
切换背景色–sass // test.sass $bmg1:red; $bmg2:black; $bmg3:green; $bmg4:purple; @mixins changes($color){ background:$color; [data-theme='backgroundcolor1']&{ background:$bmg1; } [data-theme='backgroundcolor2']&{ background:$bmg2; } [data-theme
vue 项目切换主题颜色
收集、分享
04-01 566
vue 项目切换主题颜色
Vue3切换项目主题（包含字体颜色，背景图片）
weixin_51951576的博客
01-31 1471
至此就完成了，由于涉及公司机密，实际效果就不放出来了，其实说到底就是通过预设好对应class类名下的自定义变量属性，再通过切换类名，使得其中的变量属性也更改，但是引用变量名的地方并没有改变，因此就产生了主题切换的效果，并且由于只是使用css来切换，因此不单单是vue项目，这个也可以用在js，jq，react项目里，当然这些我并没有实际去使用也只是猜测而已，哈哈！此方法并不支持由用户自定义主题，只支持用户选择开发者一开始就定义好的主题，即用户只能选择使用定义好的主题样式而非自定义主题样式。
Vue项目实现切换主题色思路
zongmaomx的博客
11-03 8376
需求：用户通过取色器选择自己喜欢的颜色，替换项目中的主题色 实现效果： 实现思路： 在项目中使用的是less，使用@themeColor定义了主题色，便想着尝试用js修改less的变量即可，但查询了一下只知道有less.modifyVars方法可以修改，但没有详细的说明，顺便查到了可以修改js可以修改原生css的变量，而且简单易懂，便尝试使用css来定义主题色并设置修改。 首先在App.vue中设置主题色： <style lang="less"> #app { --the
vue项目实现主题切换
weixin_45956954的博客
09-15 1496
vue项目使用scss实现主题切换
vue3实现主题切换功能
前端菜鸡的博客
12-01 3182
使用 vue3+vite+scss实现主题切换功能
vue3 vite 前端项目主题切换（ECharts、Element Plus、图片、icon图标）解决方案
a1518079148的博客
08-01 1258
vue3 vite 前端项目主题切换（ECharts、Element Plus、图片、icon图标）解决方案
Vue3.0结合Vite实现antd主题动态切换教程
在Vue中，可以通过Vue的响应式系统和动态类绑定来实现主题的动态切换。通过存储当前主题状态，并提供切换接口，可以触发组件的重新渲染和主题样式的更新。 5. Ant Design动态引入知识点： 在Vue3.0中，动态引入...
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蒾酒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值