实现在vue中自定义主题色彩切换

1. 效果

2. 引言

一般某些网站, 以及应用都会有自定义主题颜色切换的功能, 这可以很大程度上面提高用户的应用体验感,通过自定义主题色彩,可以满足大多用户对色彩方面的需求.

比如说:

网易云PC端:

QQ PC端

3. 本次demo介绍

本次demo 我们采用的是vue3 进行展示.

实现的功能:

• 纯色主题切换
• 渐变色彩主题切换

4. Demo 搭建

4.1 前期工作

• 使用vite内置的指令快速搭建基础vue3项目结构
• 删除不需要的代码以及文件
• 启动项目

我们采用vite构建工具,使用内置的指令快速搭建vue3 项目.

更多内置模板指令, 可以查看官网cn.vitejs.dev/guide/

代码语言：javascript复制

pnpm create vite my-vue-app --template vue

然后安装项目依赖

代码语言：javascript复制

pnpm install

最后启动项目

代码语言：javascript复制

pnpm run dev

然后我们将app.vue自带的基础代码框架进行删除即可. components 的组件也可以删除, 因为完全用不到.自带的style.css 里面的代码也可以删除, 编写我们自己的.

最后我们打开浏览器应该是这空白的.

4.2 布局和思路分析

先看下效果:

布局页面分析:

1. 左上角的svg 和色板 是一个整体,存放于一个大的容器里面
2. 大容器设置固定定位, position:fixed
3. svg 图标下面为一个色板. 色板内部分为上下两部分, 纯色 和 渐变色
4. 纯色盒子里面是一个个的不同色块盒子

大家看下我手画的图, 有点难看