掌握 Vue3、Vite 和 SCSS 实现一键换肤的魔法步骤

前言

一个网站的换肤效果算是一个比较常见的功能,尤其是在后台管理系统中,我们几乎都能看到他的身影,这里给大家提供一个实现思路。

搭建项目

vite+vue3搭建项目这里就不演示了,vite官网里面讲得很清楚。

注:这里使用的css预处理器是sass,使用前要先安装他的依赖:npm i sass

处理项目目录结构

src目录下的assetscomponents文件夹删除,新建src/theme/index.scss

在这里插入图片描述

把App.vue里的代码改成:

<template>  <div></div>  
</template>  <script setup>  
</script>  <style lang="scss" scoped>  
</style>

把src/style.css里的代码改成:

body {  margin: 0;  display: flex;  place-items: center;  min-width: 320px;  min-height: 100vh;  
}  button {  border-radius: 8px;  border: 1px solid transparent;  padding: 0.6em 1.2em;  font-size: 1em;  font-weight: 500;  font-family: inherit;  cursor: pointer;  transition: border-color 0.25s;  outline: none; //消除默认点击蓝色边框效果  
}  #app {  max-width: 1280px;  margin: 0 auto;  padding: 2rem;  text-align: center;  
}

说明: 这里只是实现一个基础的换肤效果,所以文件结构尽量简单化,因此就不引入路由或者其他的项目基础工具。

主要问题

我们在实现一个换肤效果的时候,最重要的一个问题是如何通知系统要使用哪种主题方案,这个其实很好解决,用 document.documentElement.setAttribute 在html标签上进行标记就行。

修改App.vue代码:

<template>  <div>  <form>  主题切换:  <input type="radio" name="gender" v-model="type" value="light" checked @change="onChange"/>light  <input type="radio" name="gender" v-model="type" value="dark" @change="onChange" />dark  </form>  </div>  
</template>  <script setup>  import {ref} from "vue";  const type = ref('light')  function onChange(e) {  document.documentElement.setAttribute('theme-mode', type.value)  }  
</script>  <style lang="scss" scoped>  </style>

很简单的一段代码,用单选框模拟主题切换。当选中不同的主题时,在浏览器控制台Elements里你就会看到,html标签自动添加了一段theme-mode=dark

效果:

在这里插入图片描述
在这里插入图片描述

里面theme-modetheme-mode里的值都是可以自定义的。

这里就是通过这样区分不同的主题配色方案的。

抽离css变量

在src/theme/index.scss里抽离css变量

代码:

:root,  
:root[theme-mode='light'] {--bg-color: #0052d9;
}:root[theme-mode='dark'] {--bg-color: #2c2c2c;
}

这里有两种主题的配色方案lightdark,实际项目中可以把他抽离到不同的文件下,这里只是提供一个思路,代码比较简单就不做抽离处理。

在src/main.js里引入:

import { createApp } from 'vue'  
import './style.css'  
import './theme/index.scss'  
import App from './App.vue'

使用主题

到这里就可以使用这些抽离出来的css变量了,这里拿一个按钮举例:

<template>  <div>  <button class="btn">按钮</button>  <form>  主题切换:  <input type="radio" name="gender" v-model="type" value="light" checked @change="onChange"/>light  <input type="radio" name="gender" v-model="type" value="dark" @change="onChange"/>dark  </form>  </div>  
</template>  <script setup>  import {ref} from "vue";  const type = ref('light')  function onChange(e) {  document.documentElement.setAttribute('theme-mode', type.value)  }  
</script>  <style lang="scss" scoped>  .btn {  background-color: var(--bg-color);  color: #fff;  }  
</style>

按钮的样式 background-color: var(–bg-color); 里的 –bg-color 就是上面抽离出来的css变量,效果如下:

在这里插入图片描述
在这里插入图片描述

源码附件:​​点此下载​​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/726400.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决跨域问题的FastAPI应用及常见报错解析

介绍&#xff1a; 跨域问题在前后端分离的Web应用中经常会遇到。FastAPI作为一个快速、现代化的Python Web框架&#xff0c;在处理跨域问题上也提供了一些解决方案。本文将介绍如何使用FastAPI来解决跨域问题&#xff0c;并分析一些常见的报错及解决方法。 正文&#xff1a; …

【Java项目介绍和界面搭建】拼图小游戏——作弊码、查看完整图片

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

实现qq音乐歌词滚动效果

闲来无事&#xff0c;听音乐的时候&#xff0c;突发奇想 实现该效果中&#xff0c;包含了根据声音高低生成音波的功能&#xff0c;有兴趣的直接下载代码即可 这是启动后的效果。

泛微OA本地部署项目

泛微OA本地部署 本文演示脱离公司服务器&#xff0c;在本地搭建泛微 OA。 本次演示的版本如下&#xff1a; ecology&#xff1a;e-9sql server 版本&#xff1a;2012jdk 版本&#xff1a;1.8 一、安装 VmWare、Centos 7 对于 VmWare、Centos 7的安装&#xff0c;此处不再一一…

力扣515. 在每个树行中找最大值(BFS,DFS)

Problem: 515. 在每个树行中找最大值 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1&#xff1a;BFS 套用BFS模板&#xff0c;直接在遍历树的某一层时将当前层的最大值存入数组中 思路2&#xff1a;DFS 回溯思想&#xff0c;在递归时不断更新可选列表&#xff08;根据…

前端每日一练:三栏布局,包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。

介绍 在网页开发中&#xff0c;三栏布局是一种常见的结构&#xff0c;通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏以及一个自适应宽度的主要内容区域。本文将介绍使用不同的布局方式实现三栏布局&#xff0c;包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。 …

计算机组成原理面试题

计算机组成原理是计算机科学的基础课程之一&#xff0c;涉及计算机系统的基本结构和工作原理。以下是一些可能出现在面试中的计算机组成原理相关题目&#xff1a; 1. **什么是冯诺依曼体系结构&#xff1f;** - 冯诺依曼体系结构是一种计算机组织架构&#xff0c;它将程序指…

【Flink网络数据传输(3)】RecordWriter的能力:实现数据分发策略或广播到下游InputChannel

文章目录 一.创建RecordWriter实例都做了啥1. 根据recordWrites数量创建不同的代理类2. 创建RecordWriters3. 单个RecordWriter的创建细节 二. RecordWriter包含的主要组件1. RecordWriter两种实现类分别实现分发策略和广播2. ChannelSelectorRecordWriter的发送策略2.1. Chann…

ArmSoM规划开发基于RK3576的开发套件

ArmSoM正计划推出一款新的产品&#xff0c;这款产品将采用强大的RK3576芯片。 本文将为您介绍我们的新产品搭载的RK3576性能参数&#xff0c;以及它如何为您提供卓越的性能和功能。 RK3576处理器 RK3576处理器是一款强大的处理器&#xff0c;具备出色的性能和多样化的功能&a…

8、Linux-软件安装:rpm和yum;配置yum阿里云镜像源

一、介绍 Linux安装软件有两种方式&#xff0c; ①rpm&#xff1a;安装已有的安装包&#xff0c;类似于Windows中双击exe的安装包程序 ②yum&#xff1a;拉取远程仓库的文件&#xff0c;类似于python的pip install 区别&#xff1a;假设软件A依赖软件B&#xff0c;软件B依赖…

速盾网络:cdn加速技术和云计算的区别

CDN加速技术和云计算是两种不同的技术&#xff0c;虽然都与网络性能和可扩展性有关&#xff0c;但它们在功能和应用方面存在一些不同之处。 首先&#xff0c;CDN加速技术&#xff08;Content Delivery Network&#xff09;是一种通过将网站内容分布到全球各地的服务器上&#…

【C++庖丁解牛】C++内存管理 | new和delete的使用以及使用原理

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 1. C/C内存分布2. C语…

【C语言】走迷宫之推箱子

前言&#xff1a; 在上一篇文章当中我介绍了一个走迷宫的写法&#xff0c;但是那个迷宫没什么可玩性和趣味性&#xff0c;所以我打算在迷宫的基础上加上一个推箱子&#xff0c;使之有更好的操作空间&#xff0c;从而增强了游戏的可玩性和趣味性。 1. 打印菜单 void menu() {…

Day12:信息打点-Web应用源码泄漏开源闭源指纹识别GITSVNDS备份

目录 开源-CMS指纹识别源码获取方式 闭源-习惯&配置&特性等获取方式 闭源-托管资产平台资源搜索监控 思维导图 章节点 Web&#xff1a;语言/CMS/中间件/数据库/系统/WAF等 系统&#xff1a;操作系统/端口服务/网络环境/防火墙等 应用&#xff1a;APP对象/API接口/微…

ArmSoM Rockchip系列产品 通用教程 之 Ethernet 使用

1. Ethernet 简介​ ArmSoM系列产品主要使用到了两款以太网芯片 RTL8211F&#xff0d;CGRTL8125B 2. RTL8211F&#xff0d;CG芯片​ 在ArmSoM系列产品中&#xff0c;ArmSoM-Aim7使用的是RTL8211F&#xff0d;CG千兆以太网芯片 2.1 驱动​ drivers/net/ethernet/stmicro/s…

Spring MVC RequestParamMethodArgumentResolver原理解析

在Spring MVC框架中&#xff0c;RequestParamMethodArgumentResolver是一个核心的类&#xff0c;它负责解析HTTP请求中的参数&#xff0c;并将其绑定到处理器方法的参数上。这对于从请求中获取数据并将其传递给后端业务逻辑是至关重要的。本文将详细解析RequestParamMethodArgu…

Flink JobGraph构建过程

文章目录 前言JobGraph创建的过程总结 前言 在StreamGraph构建过程中分析了StreamGraph的构建过程&#xff0c;在StreamGraph构建完毕之后会对StreamGraph进行优化构建JobGraph&#xff0c;然后再提交JobGraph。优化过程中&#xff0c;Flink会尝试将尽可能多的StreamNode聚合在…

Vue 导出前端数据报表为xlsx文件

文章目录 前言一、添加依赖包二、新建导出功能按钮组件三、使用示例前言 导出数据报表基本上有两种形式,第一种是前端请求数据之后,后端将数据导出为文件,前端再将文件下载下来;第二种是前端请求数据之后,前端将数据保存到文件。 本文将讲解第二种方法,前端请求数据之后…

Sharding-JDBC源码解析与vivo的定制开发

作者&#xff1a;vivo IT 平台团队 - Xiong Huanxin Sharding-JDBC是在JDBC层提供服务的数据库中间件&#xff0c;在分库分表场景具有广泛应用。本文对Sharding-JDBC的解析、路由、改写、执行、归并五大核心引擎进行了源码解析&#xff0c;并结合业务实践经验&#xff0c;总结…

vue3之Prop特性注意点

1、Ts中接收父组件传递参数prop的定义写法&#xff1a; <script setup lang"ts">defineProps<{title?: stringlikes?: number}>() </script>2、所有的 props 都遵循着单向绑定原则&#xff0c;props 因父组件的更新而变化&#xff0c;子组件中不…