vent-template/src/design/theme.less

@import './themify/dark.less';
@import './themify/light.less';
@import './themify/default.less';
@import './themify/deepblue.less';
@import './themify/green.less';

@ventSpace: zxm;

.bg-white {
  background-color: @component-background !important;
}

html[data-theme='light'] {
  .text-secondary {
    color: rgba(0, 0, 0, 0.45);
  }

  /*【美化】自定义table字体颜色*/
  .@{ventSpace}-table {
    color: rgba(0, 0, 0, 0.65);
  }

  /*【美化】自定义table字体颜色*/
  /*【美化】自定义form字体颜色*/
  .@{ventSpace}-select-multiple .@{ventSpace}-select-selection-item-content {
    color: rgba(0, 0, 0, 0.65);
  }

  .@{ventSpace}-input-affix-wrapper > input.@{ventSpace}-input {
    color: rgba(0, 0, 0, 0.65);
  }

  .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-item,
  .@{ventSpace}-select-single.@{ventSpace}-select-show-arrow .@{ventSpace}-select-selection-placeholder {
    color: rgba(0, 0, 0, 0.65);
  }

  /*【美化】自定义form字体颜色*/

  .@{ventSpace}-alert-success {
    background-color: #f6ffed;
    border: 1px solid #b7eb8f;
  }

  .@{ventSpace}-alert-error {
    background-color: #fff2f0;
    border: 1px solid #ffccc7;
  }

  .@{ventSpace}-alert-warning {
    background-color: #fffbe6;
    border: 1px solid #ffe58f;
  }

  :not(:root):fullscreen::backdrop {
    background-color: @layout-body-background !important;
  }
}

[data-theme='dark'] {
  .text-secondary {
    color: #8b949e;
  }

  .@{ventSpace}-card-grid-hoverable:hover {
    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%);
  }

  .@{ventSpace}-card-grid {
    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;
  }

  .@{ventSpace}-calendar-selected-day .@{ventSpace}-calendar-date {
    color: rgba(0, 0, 0, 0.8);
  }

  .@{ventSpace}-select-tree li .@{ventSpace}-select-tree-node-content-wrapper.@{ventSpace}-select-tree-node-selected {
    color: rgba(0, 0, 0, 0.9);
  }
}

// 下面的代码负责将 themify 文件夹下声明的 css 变量赋给 less 变量
@vent-text-base: var(--vent-text-base);
@vent-base-light-bg: var(--vent-base-light-bg);
@vent-configurable-module-bg: var(--vent-configurable-module-bg);
@vent-configurable-original-module-bg: var(--vent-configurable-original-module-bg);
@vent-configurable-bg: var(--vent-configurable-bg);
@vent-base-light-bg-opcity: var(--vent-base-light-bg-opcity);
@vent-configurable-module-border-bd: var(--vent-configurable-module-border-bd);
@vent-gas-list-item-bg-img: var(--vent-gas-list-item-bg-img);
@vent-configurable-home-bg-img: var(--vent-configurable-home-bg-img);
@vent-configurable-home-timeline: var(--vent-configurable-home-timeline);
@vent-configurable-home-light-border: var(--vent-configurable-home-light-border);
@vent-table-thead: var(--vent-table-thead);
@vent-table-thead-border: var(--vent-table-thead-border);
@vent-base-color: var(--vent-base-color);
@vent-transparent: var(--vent-transparent);
@vent-font-color: var(--vent-font-color);
@vent-table-hover: var(--vent-table-hover);
@vent-table-no-hover: var(--vent-table-no-hover);
@vent-table-action-link: var(--vent-table-action-link);
@vent-form-item-border: var(--vent-form-item-border);
@vent-gas-primary-text: var(--vent-gas-primary-text);
@vent-gas-tab-bg: var(--vent-gas-tab-bg);
@vent-gas-tab-bg-avtived: var(--vent-gas-tab-bg-avtived);
@vent-gas-tab-border: var(--vent-gas-tab-border);
@vent-gas-primary-bg: var(--vent-gas-primary-bg);
@vent-gas-primary-trasparent-bg: var(--vent-gas-primary-trasparent-bg);
@vent-device-manager-box-border: var(--vent-device-manager-box-border);
@vent-device-manager-box-bg: var(--vent-device-manager-box-bg);
@vent-configurable-dropdown: var(--vent-configurable-dropdown);
@vent-warn-tab-bg: var(--vent-warn-tab-bg);
@vent-warn-tab-bg-actived: var(--vent-warn-tab-bg-actived);
@vent-warn-tab-border: var(--vent-warn-tab-border);
@vent-modal-border: var(--vent-modal-border);
@vent-modal-bg: var(--vent-modal-bg);
@vent-modal-box-shadow: var(--vent-modal-box-shadow);
@vent-tabs-bg: var(--vent-tabs-bg);
@vent-tabs-table-thead: var(--vent-tabs-table-thead);
@vent-tabs-action-link: var(--vent-tabs-action-link);
@vent-font-action-link: var(--vent-font-action-link);
@vent-modal-bg2: var(--vent-modal-bg2);
@vent-primary-color: var(--vent-primary-color);
@vent-modal-title: var(--vent-modal-title);
@vent-base-border: var(--vent-base-border);
@vent-device-manager-control-btn: var(--vent-device-manager-control-btn);
@vent-device-manager-control-btn-hover: var(--vent-device-manager-control-btn-hover);

// 下面的代码负责将主题相关的选择器、图片前缀等 less 变量声明
@theme-dark: ~"html[data-theme='dark2']";
@theme-light: ~"html[data-theme='light']";
@theme-default: ~'html';
@theme-deepblue: ~"html[data-theme='deepblue']";
@theme-green: ~"html[data-theme='green']";