找文章 / 找答案
分享到

做最靓的仔,一文带你学会系统皮肤定制

用户分享 2022-4-21 16:47 2282人浏览 3人回复
摘要

永洪产品的系统界面风格支持自定义,来满足系统界面与用户企业UI风格相统一,支持自定义的主要包含:系统焦点颜色,图标颜色,icon颜色等等,涉及产品各个模块,接下来就具体看看吧。先说明,这个是针对企业版的!针 ...

永洪产品的系统界面风格支持自定义,来满足系统界面与用户企业UI风格相统一,支持自定义的主要包含:系统焦点颜色,图标颜色,icon颜色等等,涉及产品各个模块,接下来就具体看看吧。先说明,这个是针对企业版的!


针对深色主题和浅色主题可以分别定义对应的颜色。以下是深色主题的对比效果:

登录页面


数据源


上面了解了大概的效果,接下来就来说说怎么实现吧。


实现步骤如下:


A. 


在bihome目录下新建json文件,比如theme.json,内容如下:


文字浅介绍下

1. {  

2.   "dark": {  

3.       "global-mark-icon-path-one": "#00FA9A",  

4.       "global-mark-icon-path-two": "#FFFF00",  

5.       "global-mark-icon-path-three": "#9400D3",  

6.       "global-mark-icon-path-four": "#FF4500",  

7.       "global-mark-icon-path-five": "#7FFFD4",  

8.       "tree-icon-folder": "#FF1493",  

9.       "text-review-portal": "#40E0D0",  

10.       "global-primary":"#9400D3",  

11.       "icon-def":"#00E5EE",  

12.       "text-focus":"#FFD700"  

13.   },  

14.   

15.    "light": {  

16.       "global-mark-icon-path-one": "#00FA9A",  

17.       "global-mark-icon-path-two": "#FFFF00",  

18.       "global-mark-icon-path-three": "#9400D3",  

19.       "global-mark-icon-path-four": "#FF4500",  

20.        "global-mark-icon-path-five": "#7FFFD4",  

21.       "tree-icon-folder": "#40E0D0",  

22.        "text-review-portal": "#40E0D0",  

23.       "global-primary":"#9400D3",  

24.       "icon-def":"#66CD00",  

25.       "text-focus":"#4169E1"  

26.    }  

27. }  



B.


在bi.properties添加配置customized.theme=theme.json  

其中theme.json 是步骤A中的json文件名字,如果文件不在bihome目录下,而是在bihome某个目录下还需要带上具体路径。


C. 


重启后生效,dark和light分别对应浅色和深色主题。


D. 


配置项说明如下:



E. 


颜色的表示有两种方式:

(1) 使用十六进制,比如:#FF4500

(2) 使用rgba的形式,a是表示透明度,取值范围0~1。比如rgba(255, 255, 255, 0.5)


系统皮肤定制就介绍到这里。快去试试看吧,搭配出独一无二的系统风格。




评论
2282人参与,3条评论

精彩评论

查看全部评论>>

9 文章14 人气
数据分析
热门问答
  • 官方微信

    欢迎关注永洪服务号!收费为0,价值无限

    扫码关注
  • 新浪微博

    让每位用户轻松挖掘数据价值!

    访问新浪微博
  • 智能客服
50W

会员等你来哦

Copyright   ©2012-2024  北京永洪商智科技有限公司  (京ICP备12050607) 京公网安备110110802011451号 |《永洪社区协议》
返回顶部