新的项目对于客户自定义要求很高,然后换肤是其中一个很小的模块,经过了一段时间的摸索,看了许多文章,找到了几种方案。

https://www.cnblogs.com/leiting/p/11203383.html

1.直接在当前页面写多套css,

如header需要有三种颜色方案,直接写三种方案,用一个状态值保存,绑定class根据不同的状态值使用不同的css

2.用less

写一个主题方法,写上颜色的参数,将需要用到的更改的样式进行抽离

这里相当于是一套样式,然后根据参数更改不同的样式,比如

在main里面引入上一个 文件全局使用

然后在需要用到的页面中使用即可

即可。

有一个问题是这个更改的是全局的css属性,整个项目设计到定义的样式的时候都会发生改变,

最后存的时候采用localstorage存储,这个是除非手动清除 则一直有效,可以记录用户之前的设置,关闭浏览器或者刷新页面后都会存在。

第三种方式,使用变量

这种的话用到才会改变,感觉相比起上面的就会好一点点

https://blog.csdn.net/weixin_47731144/article/details/107978728#comments_13356212

这个博客步骤已经很详细了,但是他这个没有记录的功能,我在他的基础上写了一下存储记录的功能,退出后下次访问也会保留上次的数据。

跟上面的实现原理差不多。

vue+less换肤,主题切换方案的更多相关文章

  1. Android主题换肤 无缝切换

    2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...

  2. Android主题切换方案总结

    所谓的主题切换,就是能够根据不同的设定,呈现不同风格的界面给用户,也就是所谓的换肤. 1.将主题包(图片与配置)存到SD卡上(可通过下载或手动放入指定目录),在代码里强制从本地文件创建图片与配置文字大 ...

  3. 节日换肤通用技术方案__iOS端实现

    一.问题的提出 不知道大家有没有发现, 元旦期间, 很多APP界面里的图标都换成了具有节日气氛的样式, 而在过了元旦节之后, 这些图标又悄无声息的变回了本来的面貌. 这些具有短暂生命周期.而又必须在固 ...

  4. Android主题换肤实现

    本系列文章主要是对一个Material Design的APP的深度解析,主要包括以下内容 基于Material Design Support Library作为项目整体框架.对应博文:Android ...

  5. 一文读懂HarmonyOS服务卡片怎么换肤

    作者:zhenyu,华为软件开发工程师 关注HarmonyOS的小伙伴肯定对服务卡片已经很熟悉了.服务卡片(也简称为"卡片")是FA(FeatureAbility,元服务)的一种界 ...

  6. iOS开发——高级篇——换肤、静态库

    一.换肤 1.思路1> 解决方案1,使用颜色作为图片素材的命名关键字 问题1:要保证每套图片的文件名 颜色+ 名称.png的格式比较麻烦 问题2:如果要将某一个图片应用到其他皮肤不方便2> ...

  7. vue 切换主题(换肤)功能

    一:先写好两个css样式放在static文件夹中 二:在index.html中添加css link链接 <link rel="stylesheet" id="sty ...

  8. Android 切换主题以及换肤的实现

    Android 切换主题以及换肤的实现 一.介绍 现在市面上有很多 APP 有切换主题和皮肤的功能!特别是阅读类的 APP! 上面两张图分别是 知乎 APP 和Fuubo APP的两张截图!都带有切换 ...

  9. Android 切换主题换肤实现

    思路以及实现 1.主题的切换以及实现 首先我们先来明确个概念,现在我所说的切换主题,就切换整个app的颜色风格,当然也有少部分的图片的切换.注意哦 我这边说的是少部分图片哦!如果是大面积的换图片的吧! ...

随机推荐

  1. springboot+themeleaf+bootstrap访问静态资源/无法访问静态资源/图片

    在网页HTML上访问静态资源的正确写法例: 1.<img src="../../static/bootstarp/img/2.jpg"     th:src="@{ ...

  2. 扫盲--CRM系统和ERP系统的区别

    企业规模在逐步扩大的时候,为了提高生产和管理的效率,经常需要用到相关管理软件.很多企业管理者在选择管理软件的时候犯了难,面对CRM系统和ERP系统不知如何选择无法下手.那么,CRM和ERP的区别是什么 ...

  3. idea中展开折叠的文件夹

    1. 按键盘中的向右箭头 选中要展开的目录,按下键盘的向右箭头,这时候会展开一层当前目录.如果要展开所有,一直按住向右箭头不放. 左箭头则是折叠 2. 按数字键盘中的 * 选中要展开的目录,按下数字键 ...

  4. WPF Devexpress控件库中ChartControl--实现不等距x轴

    一.概要 解决问题--ChartControl不等距x轴显示 二.CS代码 用过ChartControl的开发者们应该都知道,ChartControl中设置x轴间距间隔都是固定的数值. 比如(间隔10 ...

  5. UnitTest框架的快速构建与运行

    我们先来简单介绍一下unittest框架,先上代码: 1.建立结构的文件夹: 注意,上面的文件夹都是package,也就是说你在new新建文件夹的时候不要选directory,而是要选package: ...

  6. ABP开发框架的技术点分析(1)

    ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.ABP不仅仅是一个框架,它还提供了一个最徍实践的基于领域驱动设计(DDD)的体系结构模型.ABP框架可以 ...

  7. php实现无限极分类(多维数组 / 二维数组)形式

    <?php // 测试数组数据$array = array( array('id'=>'1','title'=>'父级分类1','pid'=>'0'), array('id'= ...

  8. vue 使用 sass 或者 less ( vue-cli 3 )

    项目使用 vue-cli 3 在项目中使用 sass npm install sass-loader --save -D cnpm install sass-loader --save -D      ...

  9. 解决warning MSB8012:问题

    问题描述: C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.CppBuild.targets(990,5): warning M ...

  10. python笔记-标准库unittest

    unittest核心工作原理 unittest中最核心的四个概念是:test case, test suite, test runner, test fixture. 一个TestCase的实例就是一 ...