iview 实现在theme主题中添加某一个新模块的主题颜色切换

最新推荐文章于 2025-06-07 19:00:01 发布
最新推荐文章于 2025-06-07 19:00:01 发布
阅读量7.8k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： iview 文章标签： iview  them 主题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bluefish_flying/article/details/84840356
本文详细介绍了iView Admin 1.3.1版本中主题颜色切换的实现原理及步骤，包括如何修改主题颜色、调整菜单背景色，并在不同环境下设置CSS路径。通过源码定制，实现个性化主题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

背景：直接下载的iview-admin 1.3.1模板

1、iview 自带主题theme 主要有4个颜色组成 分别为 默认的蓝色，其他分别为红色，蓝色，洋红色；然后在根据菜单栏是否为黑色和白色的组合状态所以有8中组合的主题；
2、默认的蓝色的css为node-modules iview/dist/styles/iview.css 需要有新模块的颜色变化可以通过在源码css中重新定义写css颜色样式，最好用ivu作为前缀并且要注意不要和之前的class重复
3、然后分别在src/views/main-components/theme-switch/theme/g.css 和r.css和y.css 这三个css添加之前需要定义的class相对应的颜色值 这样就可以了；

iview-admin 是在选择主题颜色的时候先将菜单背景色黑色和白色作为参数存储到store ----app.js当中 changeMenuTheme
在这里插入图片描述
然后根据选择的主题调用不同的css，根据是否是生产或者开发环境实现设置不同的href路径调用不同的css

在这里插入图片描述

通过js获取查找到link 同时给them设置一个name独立出来以便查找赋值
在这里插入图片描述

但这样实际是改源代码，感觉适用性不是太强

iview 自定义主题样式
晴天有点孤单
02-22 1687
官方地址http://v1.iviewui.com/docs/guide/theme 官方提供了两种方法： 变量覆盖 使用安装工具修改 变量覆盖 在项目中创建一个my-theme文件夹，在该文件夹中创建index.less文件 在index.less文件中写入@import ‘~iview/src/styles/index.less’; 然后将https://github.com/iview/iview/blob/master/src/styles/custom.less 中的默认样式变量复制进来
iview tabs 顶部导航栏和模块切换栏的示例代码
10-17
在现代Web开发中，使用组件化UI框架可以极大提升开发效率和用户体验，iView是一个流行的Vue组件库，它提供了许多预构建的UI组件，可以帮助开发者快速构建页面。在本篇中，我们将关注于iView组件库中的Tabs组件，学习...
iview框架主题色的应用
qq_24428851的博客
06-07 383
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。著作权归作者所有,转载或内容合作请联系作者。less要使用3.0.0以下的版本。
iview----更改主题色
cookie-y的博客
02-08 1780
适用于Vue-Cli3创建的项目。
iview更改主题色及解决.bezierEasingMixin()； ^ Inline JavaScript is not enabled. Is it set in your options?
qq_45279180的博客
05-07 2001
更改iview项目主题色 现在公司用的是iview，最近有个需求就是想更改一下主题色，iview的官网也是给出了解决方案，官网给出的两种方案第一种肯定是最合适的，但是也踩了个坑，这里记录一下。 更改方法 根据官网的步骤首先就是在项目中新建一个文件夹，例如theme文件夹，然后再theme文件夹中创建一个index.less文件。 然后在文件中写入以下代码： @import '~view-design/src/styles/index.less'; @primary-color: #31BA5E; 接着
iview更换主题
从盲流子到程序员
03-21 3512
通过安装工具修改 # 如果没有使用 webpack，可以用我们提供的工具 iview-theme 来编译。 首先需要安装主题生成工具，从 npm 全局或在项目中局部安装，以全局安装为例： npm install iview-theme -g 然后在业务工程里新建一个目录，用来存放主题文件，使用下面的命令初始化主题，这时会从 iView 仓库拉取最新的样式文件： iview-theme ini...
vue+iview 实现项目中一件切换主题
lotte
06-12 2953
<Button @click="changetheme(0,$event)" type="primary">主题</Button> <Button @click="changetheme(1,$event)" type="primary">主题</Button> <Button @click="changetheme(2,$event)" t...
iview暗黑风格主题皮肤
10-23
在配置暗黑色系主题时有些麻烦，因为iview本身是基于白色为底色进行UI设计的，不论你怎么配置custom，都无法真正实现暗黑色系的主题，我们在对PageNow数据可视化平台进行UI重构时实现了iview全系暗黑主题的配置生成...
vue+iview+less 实现换肤功能
10-18
在本文中，我们将探讨如何使用Vue.js、iView和Less实现一个动态换肤功能。Vue.js是一个流行的前端框架，iView是一个基于Vue的UI组件库，而Less是一种预处理器CSS语言，它允许我们编写更简洁、可维护的样式代码。以下...
iview树添加图标
10-31
iview树添加图标
iview theme
weixin_30824277的博客
07-31 126
1,按照官方文档进行操作，切记index.less文件需要放在iview.css后 2,操作结束后，会报错，无法找的model，此时安装less和less-loader npm install lessless-loader --save-dev 3,修改webpack.base.conf.js文件 转载于:https://www.cnblogs.com/Caoyz...
vue-cli3创建的项目修改iview的主题
weixin_45781661的博客
12-16 553
vue-cli3创建的项目修改iview的主题 首先新建一个less文件，在其中写入如下代码 @import '~view-design/src/styles/index.less'; //引入iview的样式文件 @primary-color: red;//更改iview的的主题颜色 如果还要修改其他的样式，可以参考iview的自定义主题官网iview自定义样式 然后在vue.config.js文件的module.exports中写入如下代码 module.exports = { css: {
iview更换主题颜色及遇到的问题
weixin_43950643的博客
11-12 1355
1. 新建一个less文件，并引入index.less文件，然后定义需要的主题颜色 /* 按需导入iview组件*/ @import '~view-design/src/styles/index.less'; @primary-color:#9370DB; 2. 在main.js内引入该less文件即可 // 按需导入iview组件 import 'view-design/dist/styles/iview.css'; import './iview/myTheme/index.less' import
Vue + ElementUI 实现动态更换任意主题色（动态换肤）
aSmallProgrammer的博客
11-25 9313
Vue + ElementUI 实现动态更换任意主题色（动态换肤）
【IVIEW定制主题】
wutiantesi的博客
03-29 980
IVIEW定制主题变量覆盖（推荐）通过安装工具修 View UI（iVIew）默认提供了一套 UI 主题，并且可以在一定程度上定制新主题，以满足业务和品牌上的多样化视觉需求。 View UI（iVIew）的样式是基于 Less 进行开发的，默认以前缀 .ivu- 作为命名空间，并且定义了一套样式变量，定制主题，就是编辑这个变量列表。 变量覆盖（推荐） 如果你的项目使用了 webpack 工程，可以通过变量覆盖的方式来实现主题定制。 首先在项目中先建一个目录，比如 my-theme，然后在 my-theme
iview暗黑风格主题
oHuangJian的博客
10-23 1020
大家在使用iview时一定都会遇到根据官网推荐的方式进行主题配置时，在配置暗黑色系主题时有些麻烦，因为iview本身是基于白色为底色进行UI设计的，不论你怎么配置custom，都无法真正实现暗黑色系的主题，我们在对PageNow数据可视化平台进行UI重构时实现了iview全系暗黑主题的配置生成，此主题配置工具已在码云开源，有需要的可以前往查看。 目前主题构建工具仅支持iview3.x版本，后续会更新4.x版本 主题构建工具开源地址：https://gitee.com/jman325_admin/ivie
iview自定义主题颜色
Linho的博客
10-15 3945
iview自定义主题颜色 iview官网提供了两种自定义主题的方式，一种是采用css变量替换的方式，另一种是通过安装工具修改，这里我们采用第一种。 1. 在vue项目下新建主题样式表，例如my-theme.less，因为iview样式是基于less开发的，我们也必须使用less，不然无法做变量替换： @import '~iview/src/styles/index.less'; // Here...
如何在iView表格中实现分页时只在最后一页显示添加行？
最新发布
07-22
我们想要在iView表格的分页中，只在最后一页显示一个新增行（占位行）。思路如下： 1. 首先，我们需要知道当前是第几页（通过分页组件的当前页page）和总页数（totalPage）。 2. 然后，在表格数据中，只有当当前页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值