:root {
  --light-sidebar-bg: url('@/assets/light/sidebar-bg.png');
  --dark-sidebar-bg: url('@/assets/dark/sidebar-bg.png');
  --light-bg: url('@/assets/light/bg.svg');
  --dark-bg: url('@/assets/dark/bg.svg');
  --light-addBtn-bg: linear-gradient(94deg, #2c8bff 0.54%, #50cbff 92.28%);
  --light-addBtn-box-shadow: 0px 8px 20px 0px rgba(92, 204, 255, 0.3);
  --dark-addBtn-bg: #06f;
  --dark-addBtn-box-shadow: 0px 0px 20px 0px rgba(0, 102, 255, 0.5);
  --light-search-borderColor: #e5e9ee;
  --dark-search-borderColor: rgba(88, 89, 101, 0.52);
  --light-search-icon: url('@/assets/light/search.png');
  --dark-search-icon: url('@/assets/dark/search.png');
  --light-annotation: url('@/assets/light/annotation.png');
  --dark-annotation: url('@/assets/dark/annotation.png');
  --light-editIcon: url('@/assets/light/edit.png');
  --dark-editIcon: url('@/assets/dark/edit.png');
  --light-delIcon: url('@/assets/light/del.png');
  --dark-delIcon: url('@/assets/dark/del.png');
  --light-siderItem-color: #333;
  --dark-siderItem-color: #fff;
  --light-siderItem-bg: rgba(0, 76, 131, 0.04);
  --light-siderItem-box-shadow: 0px 2px 10px 0px #e5edf7;
  --dark-siderItem-bg: #1e1e24;
  --dark-siderItem-box-shadow: none;
  --light-menu-color: #a4b5d0;
  --dark-menu-color: #999ba6;
  --light-menu-active-color: #007cff;
  --dark-menu-active-color: #fff;
  --light-menu-bg: #e1e7ee;
  --dark-menu-bg: linear-gradient(143deg, #454654 9%, #676979 88.95%);
  --light-menu-active-bg: linear-gradient(
    0deg,
    #50ffea -30.56%,
    #0094ff 69.44%
  );
  --light-menu-active-shadow: 0px 4px 20px 0px #75e6ff;
  --dark-menu-active-bg: linear-gradient(143deg, #06f 9%, #8a53ff 88.95%);
  --dark-menu-active-shadow: none;
  --light-send-bg: linear-gradient(0deg, #50ffea -30.56%, #0094ff 69.44%);
  --dark-send-bg: linear-gradient(143deg, #06f 9%, #8a53ff 88.95%);
  --light-color: #333;
  --dark-color: #fff;
  --light-dropdown-menu-item-active-color: #1a79ed;
  --dark-dropdown-menu-item-active-color: #fff;
  --light-dialogItem-bg: #fff;
  --dark-dialogItem-bg: #31323e;
}

body {
  &.light {
    --sidebar-bg: var(--light-sidebar-bg);
    --bg: var(--light-bg);
    --addBtn-bg: var(--light-addBtn-bg);
    --addBtn-box-shadow: var(--light-addBtn-box-shadow);
    --search-borderColor: var(--light-search-borderColor);
    --search-icon: var(--light-search-icon);
    --annotation: var(--light-annotation);
    --editIcon: var(--light-editIcon);
    --delIcon: var(--light-delIcon);
    --siderItem-color: var(--light-siderItem-color);
    --siderItem-bg: var(--light-siderItem-bg);
    --siderItem-box-shadow: var(--light-siderItem-box-shadow);
    --menu-color: var(--light-menu-color);
    --menu-active-color: var(--light-menu-active-color);
    --menu-bg: var(--light-menu-bg);
    --menu-active-bg: var(--light-menu-active-bg);
    --menu-active-shadow: var(--light-menu-active-shadow);
    --send-bg: var(--light-send-bg);
    --color: var(--light-color);
    --dropdown-menu-item-active-color: var(
      --light-dropdown-menu-item-active-color
    );
    --dialogItem-bg: var(--light-dialogItem-bg);
  }

  &.dark {
    --sidebar-bg: var(--dark-sidebar-bg);
    --bg: var(--dark-bg);
    --addBtn-bg: var(--dark-addBtn-bg);
    --addBtn-box-shadow: var(--dark-addBtn-box-shadow);
    --search-borderColor: var(--dark-search-borderColor);
    --search-icon: var(--dark-search-icon);
    --annotation: var(--dark-annotation);
    --editIcon: var(--dark-editIcon);
    --delIcon: var(--dark-delIcon);
    --siderItem-color: var(--dark-siderItem-color);
    --siderItem-bg: var(--dark-siderItem-bg);
    --siderItem-box-shadow: var(--dark-siderItem-box-shadow);
    --menu-color: var(--dark-menu-color);
    --menu-active-color: var(--dark-menu-active-color);
    --menu-bg: var(--dark-menu-bg);
    --menu-active-bg: var(--dark-menu-active-bg);
    --menu-active-shadow: var(--dark-menu-active-shadow);
    --send-bg: var(--dark-send-bg);
    --color: var(--dark-color);
    --dropdown-menu-item-active-color: var(
      --dark-dropdown-menu-item-active-color
    );
    --dialogItem-bg: var(--dark-dialogItem-bg);
  }
}
