theme.js 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. define(['jquery', 'layui'], function($, layui) {
  2. var $ = layui.jquery;
  3. var pearTheme = {};
  4. pearTheme.changeTheme = function (target) {
  5. var color = localStorage.getItem("theme-color-color");
  6. var second = localStorage.getItem("theme-color-second");
  7. this.colorSet(color, second);
  8. //todo iframe暂时不支持
  9. /*if (target.frames.length == 0) return;
  10. for (var i = 0; i < target.frames.length; i++) {
  11. try {
  12. if(target.frames[i].layui == undefined) continue;
  13. target.frames[i].layui.theme.changeTheme(target.frames[i]);
  14. }
  15. catch (error) {
  16. console.log(error);
  17. }
  18. }*/
  19. }
  20. pearTheme.colorSet = function(color, second) {
  21. var style = '';
  22. style += ':root,.light {--lay-color-primary: ' + color + ';--lay-color-accent: ' + second + ';}';
  23. style += '.layui-input:focus,.layui-textarea:focus {border-color: ' + color + '!important;box-shadow: 0 0 0 3px ' + second + ' !important;}'
  24. style += '.layui-form-checkbox[lay-skin=primary]:hover span {background-color: initial;}'
  25. style += '.layui-form-checked[lay-skin=primary] i {border-color: ' + color + '!important;background-color: ' + color + ';}'
  26. style += '.layui-form-checked,.layui-form-checked:hover {border-color: ' + color + '!important;}'
  27. style += '.layui-form-checked span,.layui-form-checked:hover span {background-color: ' + color + ';}'
  28. style += '.layui-form-checked i,.layui-form-checked:hover i {color: ' + color + ';}'
  29. style += '.layui-form-onswitch { border-color: ' + color + '; background-color: ' + color + ';}'
  30. style += '.layui-form-radio>i:hover, .layui-form-radioed>i {color: ' + color + ';}'
  31. style += '.layui-form-select dl dd.layui-this{color:'+color+'!important;}'
  32. style += '.layui-form-checkbox[lay-skin=primary]:hover i{border-color:'+color+'!important}'
  33. style += '.layui-form-danger:focus {border-color:#FF5722 !important}'
  34. style += '.layui-form-radio:hover *, .layui-form-radioed, .layui-form-radioed>i{color:' + color + ' !important}';
  35. var colorPane = $("#pear-admin-color");
  36. if(colorPane.length>0){
  37. colorPane.html(style);
  38. }else{
  39. $("head").append("<style id='pear-admin-color'>"+style+"</style>")
  40. }
  41. }
  42. return pearTheme;
  43. });