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

article/2025/8/22 5:16:22

背景:直接下载的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独立出来以便查找赋值
在这里插入图片描述

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


http://chatgpt.dhexx.cn/article/mNDJrNaA.shtml

相关文章

Android——Theme和Style-由浅入深,全面讲解

1、官方详细解读 样式和主题背景 | Android 开发者 | Android Developers 2、应用场景 类似web设计中css样式。将应用设计的细节与界面的结构和行为分开。 样式style :应用于 单个 View 的外观。样式可以指定字体颜色、字号、背景颜色等属性 主题theme&…

关于eclipse IDE安装Darkest Dark Theme主题插件

听说Darkest Dark Theme是现在最受欢迎的eclipse主题插件,于是我也来搞了一下。 Darkest Dark Theme官方网站(打开慢的要死,不知道是不是只有我会有这个问题。) https://marketplace.eclipse.org/content/darkest-dark-theme安装教程: 1.打开…

Vue Theme主题样式整理

为什么80%的码农都做不了架构师?>>> 一、ElementUI官方主题在线生成预览 https://elementui.github.io/theme-chalk-preview/#/zh-CN 使用步骤: 1.选择主题颜色,下载主题 包,然后解压 2.找到node_modules下的element-u…

Android Theme 常见主题风格详解

本文为自己多年来在Android实战开发过程中总结归纳的一些常见问题,现在分享出来希望对初学者有所帮助。 本文出自门心叼龙的博客,转载请注明出处: https://blog.csdn.net/geduo_83/article/details/86560896 目录 1. 什么是Style&…

Android自带的Theme主题图解

一、Manifest文件中: 从上图中我们可以看到在这个应用程序中我们的主题应用的是 AppTheme ,然后我们去看看 AppTheme 。 二、style.xml文件中: 这个文件是在应用工程中的: 然后又可以发现 AppTheme 主题样式是继承自 AppBaseTheme 主题样式的, 而 AppBaseTheme 主题样式又…

OpenWRT LUCI Theme主题定制

本人所写的博客都为开发之中遇到问题记录的随笔,主要是给自己积累些问题。免日后无印象,如有不当之处敬请指正(欢迎进扣群 24849632 探讨问题); 我们在github上先找一个合适的主题 https://github.com/search?q=luci+theme 比如我们以 rosywrt/luci-theme-rosy 为例 第…

Android的Theme主题切换

简单的Theme换肤功能 效果截图 1、定义属性 先定义几个需要改变的属性&#xff0c;例如&#xff1a; <!--换肤--><attr name"userNameColor" format"color" /><attr name"commonColor" format"color" /><…

Eclipse设置Theme主题颜色

设置Eclipse的代码编辑区背景为暗黑色系&#xff1a; 如需转载&#xff0c;请注明转载自&#xff1a;blog.csdn.net/it1988888 相关文件下载&#xff1a;http://guari.github.io/eclipse-ui-theme/ 方案一--下载颜色主题配置文件&#xff0c;离线导入配色方案的设置&#xf…

Jupyter lab Theme 主题更换

Jupyter lab Theme 主题更换 1. 打开Jupyter-lab2. 再拓展插件中搜索 “theme”3. 安装自己喜欢的主题4. 在Setting->JupyterLab Theme->选择"自己刚安装的主题"jupyterlab_miami_nights 主题jupyterlab_onedarkpro 主题 1. 打开Jupyter-lab 2. 再拓展插件中搜…

PySimpleGui theme主题使用

第一章 PySimpleGui theme主题使用 目录 系列文章目录 前言 一、theme是什么&#xff1f; 二、使用步骤 1.打印所有主题&#xff1a; 2.主题设置 3.更新主题的设置 总结 前言 通过设置主题&#xff0c;可快速设置GUI的颜色&#xff0c;节省自己设置UI的时间 一、theme是什么&a…

Hexo修改theme主题

学习目标 本文主要学习的内容如下&#xff1a; 如何去获取到 NexT 主题 如何去安装和配置 NexT 主题 设置菜单&#xff0c;如分类&#xff0c;标签&#xff0c;关于我等简单配置 获取开源的 Hexo 主题 在上节介绍如何快速去搭建 Hexo &#xff0c;最终展示的效果如下图所…

【Android开发基础】应用界面主题Theme使用方法

主题Theme就是用来设置界面UI风格&#xff0c;可以设置整个应用或者某个活动Activity的界面风格。在Android SDK中内置了下面的Theme&#xff0c;可以按标题栏Title Bar和状态栏Status Bar是否可见来分类&#xff1a; •android:theme"android:style/Theme.Dialog" …

Flutter 基础之 Theme 主题(样式篇)

声明&#xff1a;本篇文章已授权微信公众号 YYGeeker 独家发布。 博主原创文章&#xff0c;转载请注明出处&#xff1a;小嵩的博客 一、介绍 Theme 类将主题应用于子控件&#xff0c;Theme&#xff08;主题&#xff09;它描述了应用程序的颜色和排版选择。Theme有两种&#x…

Android中Theme主题和Style样式使用介绍总结

1.Theme主题 1.1.Theme主题作用范围 Theme主要是针对应用级别的或者说窗体级别&#xff0c;可以设置应用主题&#xff08;应用换肤效果&#xff09;和Activity的主题&#xff1b;主题是不能应用在某一个单独的View中&#xff1b;或者说Theme是用来设置应用全局主题风格的&…

【转】提升工作效率的一些小技巧——资源管理器篇

当我看到有人打开资源管理器&#xff0c;一个一个文件夹点进去&#xff0c;再点出来&#xff0c;我就着急。特别是有人在会议上打开我的电脑&#xff0c;然后寻找文件&#xff0c;我就特别捉急&#xff0c;这不只是在浪费自己的时间&#xff0c;还浪费参加会议人的时间。 我把资…

WPF 4 开发Windows 7 任务栏(Overlay Icon、Thumbnail Toolbar、Progress Bar)

在上一篇我们介绍了如何在WPF 4 中开发Windows 7 跳转列表&#xff0c;本篇将继续针对WPF 4 中任务栏其他功能&#xff1a;覆盖图标&#xff08;Overlay Icon&#xff09;、进度条&#xff08;Progress Bar&#xff09;、缩略图工具栏&#xff08;Thumbnail Toolbar&#xff09…

HTML+CSS提升小实战

1 <html>2 <head>3 <meta http-equiv"Content-Type" content"text/html; charsetutf-8" />4 <title>几米简介</title>5 <style type"text/css">6 *{7 margin:0px;padding:0px;8 …

java实现qlearning,DQN(Deep Q-learning)入门教程(一)之强化学习介绍

什么是强化学习? 强化学习(Reinforcement learning,简称RL)是和监督学习,非监督学习并列的第三种机器学习方法,如下图示: 首先让我们举一个小时候的例子: 你现在在家,有两个动作选择:打游戏和读书。如果选择打游戏的话,你就跑到了网吧,选择读书的话,就坐在了书桌面前…

实验一 书桌

实验内容&#xff1a; 了解四种视图&#xff0c;在绘制时&#xff0c;从不同的视图进行观察&#xff0c;提高绘制效率。知道常用工具的快捷键 一、四种视图 1、顶视图&#xff08;T&#xff09; 2、前视图&#xff08;F&#xff09; 3、左视图&#xff08;L&#xff09; 4、透…

学计算机的桌面,三个软件,干净你的电脑桌面,让你更高效工作学习!

文 | 谦行公子 首发 | 谦行公子 今天向大家推荐三个软件&#xff0c;为了就是让大家都拥有一个干净整洁的桌面&#xff0c;从此高效地学习生活&#xff5e;至于哪三个&#xff0c;接着看 相信很多人都有这样的经历&#xff0c;连续工作好几天甚至好几周&#xff0c;桌面上堆满…