theme.less 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. @import './themify/dark.less';
  2. @import './themify/light.less';
  3. @import './themify/vent1.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: 0 3px 6px -4px rgb(0 0 0 / 48%), 0 6px 16px 0 rgb(0 0 0 / 32%), 0 9px 28px 8px rgb(0 0 0 / 20%);
  52. }
  53. .@{ventSpace}-card-grid {
  54. box-shadow: 1px 0 0 0 #434343, 0 1px 0 0 #434343, 1px 1px 0 0 #434343, 1px 0 0 0 #434343 inset, 0 1px 0 0 #434343 inset;
  55. }
  56. .@{ventSpace}-calendar-selected-day .@{ventSpace}-calendar-date {
  57. color: rgba(0, 0, 0, 0.8);
  58. }
  59. .@{ventSpace}-select-tree li .@{ventSpace}-select-tree-node-content-wrapper.@{ventSpace}-select-tree-node-selected {
  60. color: rgba(0, 0, 0, 0.9);
  61. }
  62. }
  63. // 下面的代码负责将 themify 文件夹下声明的 css 变量赋给 less 变量
  64. @themify-text-primary: var(--themify-text-primary);
  65. @vent-base-light-bg: var(--vent-base-light-bg);
  66. @vent-configurable-module-bg: var(--vent-configurable-module-bg);
  67. @vent-configurable-bg: var(--vent-configurable-bg);
  68. @vent-base-light-bg-opcity: var(--vent-base-light-bg-opcity);
  69. @vent-configurable-module-border-bd: var(--vent-configurable-module-border-bd);
  70. @vent-gas-list-item-bg-img: var(--vent-gas-list-item-bg-img);
  71. @vent-configurable-home-bg-img: var(--vent-configurable-home-bg-img);
  72. @vent-configurable-home-timeline: var(--vent-configurable-home-timeline);
  73. @vent-configurable-home-light-border: var(--vent-configurable-home-light-border);
  74. // vent/gas 模块下重要文本的颜色
  75. @vent-gas-primary-text: var(--vent-gas-primary-text);
  76. // 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
  77. @theme-dark: ~"html[data-theme='dark2']";
  78. @theme-light: ~"html[data-theme='light']";
  79. @theme-vent1: ~"html[data-theme='vent1']";
  80. @theme-deepblue: ~"html[data-theme='deepblue']";