html积极向上的主题设计,css/less 实现动态更换主题色
固定主题色的切换
思路:访问网页 => js读取缓存(判断是否有主题色的值,没有就默认皮肤,有则使用指定皮肤) => 用户点击换肤 => js切换对应的css样式文件即可 => 再将主题色的值写入缓存
下面给大家两种方式供选择
切换css地址
document.getElementById('theme_css').href = '../XXX.css';
假如我们有default.css / blue.css / red.css 三个主题,这样我们就需要在书写css的时候维护三个主题样式表,js点击切换的时候通过改变css样式表链接来实现换肤功能。
**弊**:
- 需要同时维护N个文件
- js改变href属性会带来一定的延迟
HTML的rel属性下的alternate实现
css样式文件大致分为三类:
没有title属性,rel属性值仅仅是stylesheet的无论如何都会加载并渲染,如reset.css;
有title属性,rel属性值仅仅是stylesheet的作为默认样式CSS文件加载并渲染,如default.css;
有title属性,rel属性值同时包含alternate stylesheet的作为备选样式CSS文件加载,默认不渲染,如blue.css和red.css;
alternate意味备用,相当于是 css 预加载进来备用,所以不会有上面那种切换延时
使用方法:
JavaScript代码修改元素DOM对象的disabled值为false,可以让默认不渲染的CSS开始渲染。
// 需要换肤的时候传入对应的title即可,eg: skirColorChange( 'blue' );
var eleLinks = document.querySelectorAll('link[title]');
var skirColorChange = function ( value ) {
eleLinks.forEach(function (link) {
link.disabled = true;
if (link.getAttribute('title') == value) {
link.disabled = false;
}
});
}
弊:
提前下载,会浪费单宽
仍旧需要维护多个文件
动态色值的主题切换
如果是要实现动态换肤,自定义色值,那上面的几种方式就不适合了。
思路:访问网页 => js读取缓存(判断是否有主题色的值,没有就默认皮肤,有则使用指定皮肤) => 用户点击换肤 => js切换主题色 => 再将主题色的值写入缓存
下面给大家两种方式供选择
less的 modifyVars方法
modifyVars方法是是基于 less 在浏览器中的编译来实现。所以在引入less文件的时候需要通过link方式引入,然后基于less.js中的方法来进行修改变量
script引入less.min.js
link方式引入主题色文件
更改主题色事件
// color 传入颜色值
handleColorChange (color) {
less.modifyVars({
'@primaryColor':color
})
.then(() => {
console.log('修改成功');
});
};
如果工程型的项目,在webpack配置里开启:
{
test: /\.less$/,
loader: 'less-loader',
options: {
javascriptEnabled: true
}
},
如果是vueCli3.0/vueCli4.0,给大家一份完整的配置过程
首先在vue.config.js配置;
css: {
loaderOptions: {
less: {
modifyVars: {
// 按需配置,可配置多个
'primary-color': 'red',
},
javascriptEnabled: true,
}
}
},
在public/static/下创建color.less, 这个文件书写所有涉及到需要改变的class及样式;
@primaryColor: red;
.page {
backgroud: @primaryColor;
color: @primaryColor;
}
在public/static/下创建less.min.js;
src/XXXX位置 创建setting.js;
let lessNodesAppended;
const updateTheme = primaryColor => {
if (!primaryColor) {
return;
}
console.info(`正在编译主题!`)
function buildIt() {
// 正确的判定less是否已经加载less.modifyVars可用
if (!window.less || !window.less.modifyVars) {
return;
}
// less.modifyVars可用
window.less.modifyVars({
'@primary-color': primaryColor,
})
.then(() => {
console.log(`成功`);
})
.catch(() => {
console.error(`失败`);
});
}
if (!lessNodesAppended) {
// insert less.js and color.less
const lessStyleNode = document.createElement('link');
const lessConfigNode = document.createElement('script');
const lessScriptNode = document.createElement('script');
lessStyleNode.setAttribute('rel', 'stylesheet/less');
// 下方这个color.less位置大家也可以按需修改
lessStyleNode.setAttribute('href', __webpack_public_path__ + 'static/color.less')
lessConfigNode.innerHTML = `
window.less = {
async: true,
env: 'production',
javascriptEnabled: true
};
`;
// less的src地址也可以是cdn地址
lessScriptNode.src = '/static/less.min.js';
lessScriptNode.async = true;
lessScriptNode.onload = () => {
buildIt();
lessScriptNode.onload = null;
};
document.body.appendChild(lessStyleNode);
document.body.appendChild(lessConfigNode);
document.body.appendChild(lessScriptNode);
lessNodesAppended = true;
} else {
buildIt();
}
};
export { updateTheme }
ok,到此为止东西都准备好了,那么接下来,我们需要初始化了,大家可以在main.js中调用updateTheme('默认值/你需要的主题色值');
如果是页面要切换仍旧是调用updateTheme('你需要的主题色值');
css 变量方法
如果项目里用的不是less, 那么还是用css的方法,通用且容易操作,使用css变量来进行主题色的修改,替换主题色变量,然后用setProperty来进行动态修改
用法就是给变量加--前缀,涉及到主题色的都改成var(--themeColor)这种方式
使用方式:
body{
--primaryColor:red;
}
.page{
backgroud: var(--primaryColor);
color: var(--primaryColor);
}
要修改主题色时:
document.body.style.setProperty('--primaryColor', 'blue');
总结
至此,总共给了大家4种换肤方案,如果有更好的方案,欢迎大家补充~~~
html积极向上的主题设计,css/less 实现动态更换主题色相关推荐
- 一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...
- 使用 css/less 动态更换主题色(换肤功能)
前言 说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
- Qt版连连看之极速连连看:界面设计(一)QSS更换主题
[github地址]speedlink-qt 极速连连看在界面上的特点: 1.支持更换主题 2.画面能够全部切换,基本不使用对话框等方式进行消息提示 3.使用的某些控件(如移动到上面发出声音的按钮.具 ...
- Ant design vue中实现动态更换主题色
一.创建vue项目 可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口 输入文件名 ,文件名最好是英文 然后进行配置功能, 根据需求选择配置功能 这里最好选择2.0版本, 可以 ...
- 动态更换主题色(换肤功能)
文章目录 对于可供选择的颜色/主题样式换肤的实现 一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...
- scss 动态更换主题样式
//当HTML的data-theme为dark时,样式引用dark //data-theme为其他值时,就采用组件库的默认样式 //这里我只定义了两套主题方案,想要再多只需在`$themes`里加就行 ...
- 动态切换主题(皮肤skin)
准备知识: 主题是ASP.NET 2.0中的新功能,能够对网页外观进行更多的控制.主题可以定义颜色配置.字体名称.字体大小和样式.甚至是图片(是方角还是圆角,或者使用不同的颜色和阴影).ASP.NET ...
- 子主题function php,使用 WordPress 的子主题(Child Themes)功能快速制作自己的主题...
在了解子主题功能之前,先来看一下你在使用 WordPress 的时候是否是这样:不会自己制作主题,只好从网上下载一个,这个主题整体风格比较适合,但是有些小地方不太好,自己只是有一点 CSS 基础,可以 ...
- jupyter更换主题后工具栏丢失问题解决
jupyter如何更换主题 1.安装jupyter notebook的主题库 pip install --upgrade jupyterthemes 2.看安装后包括的主题:jt -l 3.更换主题 ...
最新文章
- 物体的三维识别与6D位姿估计:PPF系列论文介绍(四)
- ASP.NET Ajax 1.0 RC 'Sys' 未被定義 問題
- nacos集群之日志狂刷fail to connect server,after trying 567 times,last try server is...
- 【quartus】原理图输入设计详解攻略
- 7000字 23张图,Pandas一键生成炫酷的动态交互式图表
- PDF数据防扩散系统方案
- 嵌入式开发linux工具,嵌入式Linux开发入门之MfgTool工具的使用
- 处理大并发之一 对epoll的理解,epoll客户端服务端代码
- 引发了未经处理的异常:读取访问权限冲突_从零开始学Python:23课-文件读写和异常处理
- C++中的内存分配new()
- 阻塞模式下的超时等待
- 人工智能发展的利与弊
- QGIS:创建矢量图层
- 内联函数有什么优点?内联函数和宏定义的区别
- 连接手表_用EMUI11连接华为手机与手表 出门不用全程盯着手机
- 华为IOT设备消息上报和消息下发验证
- 什么样的人适合做数据分析师?
- 基础 | 并发编程 - [LockSupport]
- CAD文件如何在线转换成JPG格式
- 情态动词学习笔记(1) 表推测