六盘水遵义网站建设怎么做,石家庄建站模板厂家,惠州网站制作策划,做网站怎么防止被网警查到前言 提示#xff1a;使用 css/less 动态更换主题色#xff08;换肤功能#xff09;#xff0c;方法共通#xff0c;不限制技术栈#xff1a;
其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求#xff0c;这时候就需要通过动态更改…前言 提示使用 css/less 动态更换主题色换肤功能方法共通不限制技术栈
其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求这时候就需要通过动态更改主题色来实现预期的效果
一、CSS中原生变量“--”和var() 示例开始之前先稍微了解一下变量“--”和var()在动态改变主题色中会经常用到这两个变量
表示我们定义的的变量名称
css中原生的变量定义语法是-- 例如定义一个边框颜色变量 --border-color: #D9EEE2;
css中变量使用语法是var(--) 例如使用定义的边框颜色变量border: 0.1rem solid var(--border-color);
二、使用步骤 1、自定义样式变量定义css方法可以定义多个css样式 要注意的是不管定义了几个主题色都要确保定义的变量名保持一致。 // theme.less/**这里为我们自定义主题色可以根据自己的需求定义多组样式*
*/// 主题类型定义
:root {// 背景色--bg-color: #D9EEE2;--border-color: #D9EEE2;// 很多图标、border都用这个颜色--icon-color: #108372;// 按钮背景色--button-bg-color: var(--dominant-color);// 选中字体和图表颜色--active-font-color: #037181;// hover字体和图表颜色--hover-font-color: var(--dominant-color);// logo--logo: url(你的图片路径) no-repeat center center;.........
}/* 这里假设为我们自定义的主题 */
:root[theme defined] {// 背景色--bg-color: pink;--border-color: pink;// 很多图标、border都用这个颜色--icon-color: pink;// 按钮背景色--button-bg-color: pink;// 选中字体和图表颜色--active-font-color: pink;// hover字体和图表颜色--hover-font-color: var(--dominant-color);// logo--logo: url(你的图片路径) no-repeat center center;.........
}
2、使用已定义的变量 使用其实很简单只要根据主题色动态改变的地方通过var()引用已经定义的样式变量就可以 /** 这里举个简单的例子 child.less(这里就是项目中引用的css文件)*/.root{.main{backgroundvar(--bg-color);border:1px solid var(--border-color);...}...
}
3、用户操作切换对应的主题 通过设置属性自动匹配选择颜色主题会修改对应的样式 1、首先你跟据需求在特定位置定义好主题切换功能键
这里是定义的结构体仅作参考你可以根据自己项目的框架使用对应的组件都是ok的没啥特殊要求 div className{styles.root}Dropdown overlay{menu} placementbottomCenterdivi classNameiconfont icon-them /span主题/span/div/Dropdown/div 这里是菜单的主题曲部分切换全靠它了
// 这里的items就是你要定义的主题的种类没有key代表一个主题色标识const menu (MenuselectableselectedKeys{theme}onClick{setThemeFun}items{[{label: 默认色,key: default,},{label: 自定义,key: defined,},]}/);
2、然后通过对应的方法设置对应的的主题色 /*主题色选择后的回调*/
const setThemeFun (e){
// 这里其实就是将主题表示存在state里在menu中展示 默认 const [theme, setTheme] useState([default]);setTheme([e.key]); //通过修改属性会用对应的样式document.documentElement.setAttribute(theme, e.key);
}
这里建议把切换主题色封装到一个单独的组件便于维护处理 切记初始化时要个给一个默认值这里就不做过多赘述了4、特殊处理 1本地存取主题色
其实用户没有的要求的话一般都是主题的存储本地可以通过localStorage实现
// 在你需要的时候存在来
localStorage.setItem(theme, e.key);//特定情况取出来使用就可以了
const defaultTheme localStorage.getItem(theme);if (defaultTheme) {setTheme([defaultTheme]);document.documentElement.setAttribute(theme, defaultTheme);} 注本地存储小科普
生存期 localStorage理论上来说是永久有效的即不主动清空的话就不会消失即使保存的数据超出了浏览器所规定的大小也不会把旧数据清空而只会报错。但需要注意的是在移动设备上的浏览器或各Native App用到的WebView里localStorage都是不可靠的可能会因为各种原因比如说退出App、网络切换、内存不足等原因被清空。 sessionStorage的生存期顾名思义类似于session只要关闭浏览器也包括浏览器的标签页就会被清空。由于sessionStorage的生存期太短因此应用场景很有限但从另一方面来看不容易出现异常情况比较可靠。 2接口存取主题色
这个就需要跟产品和后端确认好方案是否绑定用户或者设备通过对应的接口实现主题色存取原理和上述本地存储大差不差具体根据需求走就行了
总结 以上是使用纯CSS控件切换主题颜色或通过单击更改背景颜色这个个人感觉可能前期样式定义稍微繁琐一点其他都还可相对来说易上手方便操作关键是简单不过要注意以下几点 1、需求确定好是否需要主题色切换 2、需要的话对一些字体图标的定义要跟ui和pd沟通好构建好对应的iconfont工程方便使用因为你要清楚如果单纯使用图片那切换主题色变量定义就会很繁琐一句话怎么方便怎么好维护就怎么来 3、一定要确保主题的定义的变量保持一致…… ……
