theme.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. layui.define(["jquery","layer"], function (exports) {
  2. var MOD_NAME = 'theme',
  3. $ = layui.jquery;
  4. var theme = {};
  5. theme.autoHead = false;
  6. theme.changeTheme = function (target, autoHead) {
  7. this.autoHead = autoHead;
  8. var color = localStorage.getItem("theme-color-color");
  9. var second = localStorage.getItem("theme-color-second");
  10. this.colorSet(color, second);
  11. if (target.frames.length == 0) return;
  12. for (var i = 0; i < target.frames.length; i++) {
  13. try {
  14. if(target.frames[i].layui == undefined) continue;
  15. target.frames[i].layui.theme.changeTheme(target.frames[i], autoHead);
  16. }
  17. catch (error) {
  18. console.log(error);
  19. }
  20. }
  21. }
  22. theme.colorSet = function(color, second) {
  23. var style = '';
  24. style += '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +color + '!important;}';
  25. style += '.pear-admin .layui-logo .title{color:' + color + '!important;}';
  26. style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +'!important;}';
  27. style += '.bottom-nav li a:hover{background-color:' + color + '!important;}';
  28. style += '.pear-btn-primary {border: 1px solid ' + color + '!important;}';
  29. style += '.pear-admin .layui-header .layui-nav .layui-nav-bar{background-color: ' + color + '!important;}'
  30. style += '.ball-loader>span,.signal-loader>span {background-color: ' + color + '!important;}';
  31. style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color +'!important;color:white!important;}';
  32. style += '#preloader{background-color:' + color + '!important;}';
  33. style += '.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +color + ' 3px solid!important;}';
  34. style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color + ';color:white;}';
  35. style += '.pear-social-entrance {background-color:' + color + '!important}';
  36. style += '.pear-admin .pe-collapse {background-color:' + color + '!important}';
  37. style += '.layui-fixbar li {background-color:' + color + '!important}';
  38. style += '.pear-btn-primary {background-color:' + color + '!important}';
  39. style += '.layui-input:focus,.layui-textarea:focus {border-color: ' + color + '!important;box-shadow: 0 0 0 3px ' + second + ' !important;}'
  40. style += '.layui-form-checkbox[lay-skin=primary]:hover span {background-color: initial;}'
  41. style += '.layui-form-checked[lay-skin=primary] i {border-color: ' + color + '!important;background-color: ' + color + ';}'
  42. style += '.layui-form-checked,.layui-form-checked:hover {border-color: ' + color + '!important;}'
  43. style += '.layui-form-checked span,.layui-form-checked:hover span {background-color: ' + color + ';}'
  44. style += '.layui-form-checked i,.layui-form-checked:hover i {color: ' + color + ';}'
  45. style += '.layui-form-onswitch { border-color: ' + color + '; background-color: ' + color + ';}'
  46. style += '.layui-form-radio>i:hover, .layui-form-radioed>i {color: ' + color + ';}'
  47. style += '.layui-laypage .layui-laypage-curr .layui-laypage-em{background-color:'+ color +'!important}'
  48. style += '.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 3px solid '+color+'!important}'
  49. style += '.layui-tab-brief>.layui-tab-title .layui-this{color:'+color+'!important}'
  50. style += '.layui-progress-bar{background-color:'+color+'}';
  51. style += '.layui-elem-quote{border-left: 5px solid '+ color +'}';
  52. style += '.layui-timeline-axis{color:' + color + '}';
  53. style += '.layui-laydate .layui-this, .layui-laydate .layui-this div{background-color:'+color+'!important}';//变更
  54. style += 'xm-select .xm-label .xm-label-block{background-color:'+color+'!important}';//变更
  55. style += 'xm-select{border-color:#EEE !important}';//变更
  56. style += 'xm-select .xm-body .xm-option.selected .xm-option-icon{border-color:'+color+'!important;color:'+color+'!important;}';//变更
  57. style += 'xm-select .xm-body .xm-option .xm-option-icon{border-color:'+color+'!important;}';//变更
  58. style += 'xm-select > .xm-body .xm-option.selected.hide-icon{background-color:'+color+'!important;}';//变更
  59. style += 'xm-select > .xm-body .xm-toolbar .toolbar-tag:hover{color:'+color+'!important;}';//变更
  60. style += '.layui-layer-dialog .layui-layer-content .layui-icon-ok{color:'+color+'!important;}';//变更
  61. style += '.layui-layer-dialog .layui-layer-content .layui-icon-ok{color:'+color+'!important;}';//变更
  62. style += 'a{color:'+color+';opacity:.8}';//变更
  63. style += 'a:hover{color:'+color+';opacity:1}';//变更
  64. style += '.pear-this,.pear-text{color:' + color + '!important}';
  65. style += '.pear-back{background-color:'+ color +'!important}';
  66. style += '.pear-collapsed-pe{background-color:'+color+'!important}'
  67. style += '.layui-form-select dl dd.layui-this{color:'+color+'!important;}'
  68. style += '.tag-item-normal{background:'+color+'!important}';
  69. style += '.step-item-head.step-item-head-active{background-color:'+color+'}'
  70. style += '.step-item-head{border: 3px solid '+color+';}'
  71. style += '.step-item-tail i{background-color:'+color+'}'
  72. style += '.step-item-head{color:' + color + '}'
  73. style += 'div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span i {background-color:'+color+'!important}'
  74. style += 'div[xm-select-skin=normal] .xm-select-title div.xm-select-label>span{border: 1px solid '+color+'!important;background-color:'+color+'!important}'
  75. style += 'div[xm-select-skin=normal] dl dd:not(.xm-dis-disabled) i{border-color:'+color+'!important}'
  76. style += 'div[xm-select-skin=normal] dl dd.xm-select-this:not(.xm-dis-disabled) i{color:'+color+'!important}'
  77. style += 'div[xm-select-skin=normal].xm-form-selected .xm-select, div[xm-select-skin=normal].xm-form-selected .xm-select:hover{border-color:'+color+'!important}'
  78. style += '.layui-layer-btn a:first-child{border-color:'+color+';background-color:'+color+'!important}';
  79. style += '.layui-form-checkbox[lay-skin=primary]:hover i{border-color:'+color+'!important}'
  80. style += '.pear-tab-menu .item:hover{background-color:'+color+'!important}'
  81. style += '.layui-form-danger:focus {border-color:#FF5722 !important}'
  82. style += '.pear-admin .user .layui-this a:hover{color:white!important}'
  83. style += '.pear-admin .user a:hover{color:'+color+'!important}'
  84. style += '.pear-notice .layui-this{color:'+color+'!important}'
  85. style += '.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i{color:' + color + ' !important}';
  86. style += '.pear-btn:hover {color: '+color+';background-color: ' + second + ';}'
  87. style += '.pear-btn-primary[plain] {color: '+ color +' !important;background: ' + second + ' !important;}'
  88. style += '.pear-btn-primary[plain]:hover {background-color: ' + color + '!important}'
  89. style += '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a {background-color:'+second+'!important;color:'+color+'!important;}'
  90. style += '.light-theme .pear-nav-tree .layui-this{ border-right: 3px solid '+color+'!important}'
  91. style += '.loader:after {background:'+color+'}'
  92. if(this.autoHead === true || this.autoHead === "true"){
  93. style += '.pear-admin.banner-layout .layui-header .layui-logo,.pear-admin .layui-header{border:none;background-color:' + color + '!important;}.pear-admin.banner-layout .layui-header .layui-logo .title,.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:whitesmoke!important;}';
  94. style += '.pear-admin.banner-layout .layui-header{ box-shadow: 2px 0 6px rgb(0 21 41 / 35%) }'
  95. style += '.pear-admin .layui-header .layui-layout-control .layui-this *,.pear-admin.banner-layout .layui-header .layui-layout-control .layui-this *{ background-color: rgba(0,0,0,.1)!important;}'
  96. }
  97. style += '.menu-search-list li:hover,.menu-search-list li.this{background-color:'+ color +'}'
  98. var colorPane = $("#pear-admin-color");
  99. if(colorPane.length>0){
  100. colorPane.html(style);
  101. }else{
  102. $("head").append("<style id='pear-admin-color'>"+style+"</style>")
  103. }
  104. }
  105. exports(MOD_NAME, theme);
  106. });