html[data-theme="light"] {
  --component-background: #fff;
  --text-color: rgb(0 0 0 0.85);
  --border-color: #fff;

  .text-secondary {
    color: rgb(0 0 0 / 45%);
  }

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

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

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

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

html[data-theme="dark"] {
  --component-background: rgb(36 37 37 75%);
  --text-color: rgb(255 255 255 0.85);
  --border-color: #b6b7b9;

  .text-secondary {
    color: #8b949e;
  }

  .ant-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%);
  }

  .ant-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;
  }

  .ant-calendar-selected-day .ant-calendar-date {
    color: rgb(0 0 0 / 80%);
  }

  .ant-select-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
    color: rgb(0 0 0 / 90%);
  }
}