theme.less 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. @import './themify/dark.less';
  2. @import './themify/light.less';
  3. @import './themify/default.less';
  4. @import './themify/deepblue.less';
  5. @ventSpace: zxm;
  6. .bg-white {
  7. background-color: @component-background !important;
  8. }
  9. html[data-theme='light'] {
  10. .text-secondary {
  11. color: rgba(0, 0, 0, 0.45);
  12. }
  13. /*【美化】自定义table字体颜色*/
  14. .@{ventSpace}-table {
  15. color: rgba(0, 0, 0, 0.65);
  16. }
  17. /*【美化】自定义table字体颜色*/
  18. /*【美化】自定义form字体颜色*/
  19. .@{ventSpace}-select-multiple .@{ventSpace}-select-selection-item-content {
  20. color: rgba(0, 0, 0, 0.65);
  21. }
  22. .@{ventSpace}-input-affix-wrapper > input.@{ventSpace}-input {
  23. color: rgba(0, 0, 0, 0.65);
  24. }
  25. .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-item,
  26. .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-placeholder {
  27. color: rgba(0, 0, 0, 0.65);
  28. }
  29. /*【美化】自定义form字体颜色*/
  30. .@{ventSpace}-alert-success {
  31. background-color: #f6ffed;
  32. border: 1px solid #b7eb8f;
  33. }
  34. .@{ventSpace}-alert-error {
  35. background-color: #fff2f0;
  36. border: 1px solid #ffccc7;
  37. }
  38. .@{ventSpace}-alert-warning {
  39. background-color: #fffbe6;
  40. border: 1px solid #ffe58f;
  41. }
  42. :not(:root):fullscreen::backdrop {
  43. background-color: @layout-body-background !important;
  44. }
  45. }
  46. [data-theme='dark'] {
  47. .text-secondary {
  48. color: #8b949e;
  49. }
  50. .@{ventSpace}-card-grid-hoverable:hover {
  51. box-shadow:
  52. 0 3px 6px -4px rgb(0 0 0 / 48%),
  53. 0 6px 16px 0 rgb(0 0 0 / 32%),
  54. 0 9px 28px 8px rgb(0 0 0 / 20%);
  55. }
  56. .@{ventSpace}-card-grid {
  57. box-shadow:
  58. 1px 0 0 0 #434343,
  59. 0 1px 0 0 #434343,
  60. 1px 1px 0 0 #434343,
  61. 1px 0 0 0 #434343 inset,
  62. 0 1px 0 0 #434343 inset;
  63. }
  64. .@{ventSpace}-calendar-selected-day .@{ventSpace}-calendar-date {
  65. color: rgba(0, 0, 0, 0.8);
  66. }
  67. .@{ventSpace}-select-tree li .@{ventSpace}-select-tree-node-content-wrapper.@{ventSpace}-select-tree-node-selected {
  68. color: rgba(0, 0, 0, 0.9);
  69. }
  70. }
  71. // 下面的代码负责将 themify 文件夹下声明的 css 变量赋给 less 变量
  72. @vent-text-base: var(--vent-text-base);
  73. @vent-base-light-bg: var(--vent-base-light-bg);
  74. @vent-configurable-module-bg: var(--vent-configurable-module-bg);
  75. @vent-configurable-bg: var(--vent-configurable-bg);
  76. @vent-base-light-bg-opcity: var(--vent-base-light-bg-opcity);
  77. @vent-configurable-module-border-bd: var(--vent-configurable-module-border-bd);
  78. @vent-gas-list-item-bg-img: var(--vent-gas-list-item-bg-img);
  79. @vent-configurable-home-bg-img: var(--vent-configurable-home-bg-img);
  80. @vent-configurable-home-timeline: var(--vent-configurable-home-timeline);
  81. @vent-configurable-home-light-border: var(--vent-configurable-home-light-border);
  82. @vent-table-thead: var(--vent-table-thead);
  83. @vent-table-thead-border: var(--vent-table-thead-border);
  84. @vent-base-color: var(--vent-base-color);
  85. @vent-transparent: var(--vent-transparent);
  86. @vent-font-color: var(--vent-font-color);
  87. @vent-table-hover: var(--vent-table-hover);
  88. @vent-table-no-hover: var(--vent-table-no-hover);
  89. @vent-table-action-link: var(--vent-table-action-link);
  90. @vent-form-item-border: var(--vent-form-item-border);
  91. @vent-gas-primary-text: var(--vent-gas-primary-text);
  92. @vent-gas-tab-bg: var(--vent-gas-tab-bg);
  93. @vent-gas-tab-bg-avtived: var(--vent-gas-tab-bg-avtived);
  94. @vent-gas-tab-border: var(--vent-gas-tab-border);
  95. @vent-gas-primary-bg: var(--vent-gas-primary-bg);
  96. @vent-gas-primary-trasparent-bg: var(--vent-gas-primary-trasparent-bg);
  97. @vent-device-manager-box-border: var(--vent-device-manager-box-border);
  98. @vent-device-manager-box-bg: var(--vent-device-manager-box-bg);
  99. @vent-configurable-dropdown: var(--vent-configurable-dropdown);
  100. @vent-warn-tab-bg: var(--vent-warn-tab-bg);
  101. @vent-warn-tab-bg-actived: var(--vent-warn-tab-bg-actived);
  102. @vent-warn-tab-border: var(--vent-warn-tab-border);
  103. @vent-modal-border: var(--vent-modal-border);
  104. @vent-modal-bg: var(--vent-modal-bg);
  105. @vent-modal-box-shadow: var(--vent-modal-box-shadow);
  106. @vent-tabs-bg: var(--vent-tabs-bg);
  107. @vent-tabs-table-thead: var(--vent-tabs-table-thead);
  108. @vent-tabs-action-link: var(--vent-tabs-action-link);
  109. @vent-font-action-link: var(--vent-font-action-link);
  110. @vent-modal-bg2: var(--vent-modal-bg2);
  111. @vent-primary-color: var(--vent-primary-color);
  112. @vent-modal-title: var(--vent-modal-title);
  113. @vent-base-border: var(--vent-base-border);
  114. @vent-device-manager-control-btn: var(--vent-device-manager-control-btn);
  115. @vent-device-manager-control-btn-hover: var(--vent-device-manager-control-btn-hover);
  116. // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
  117. @theme-dark: ~"html[data-theme='dark2']";
  118. @theme-light: ~"html[data-theme='light']";
  119. @theme-default: ~'html';
  120. @theme-deepblue: ~"html[data-theme='deepblue']";