html[data-bs-theme="dark"] {
  /* Bootstrap Background Color ---------------------- */
  --bs-body-bg: #212529;
  --bs-tertiary-bg: #343a40;
  /* Background Color -------------------------------- */
  --bg-color-secondary: #2C3035;
  --bg-color-third: #343a40;
  --bg-color-dropdown-menu: #2D3035;
  --bg-color-link-active: #353a3e;
  /* Hover */
  --bg-color-nav-item-hover: #343a40;
  /* Color ------------------------------------------- */
  --color-text-primary: #dee2e6;
  --color-text-primary-highlight: #d0adf0;
  --color-link-active: #fff;
  --color-line-border: #495057;
  /* Box Shadow -------------------------------------- */
  --shadow-button: rgb(58 59 60 / 55%);
  --shadow-1: rgb(0 0 0 / 10%);
  --shadow-2: rgb(0 0 0 / 20%);
  --shadow-inset: rgb(255 255 255 / 5%);
  /* Button ------------------------------------------ */
  --btn-circle-background-color: #3C4146;
  /* Badge-number-background-color ------------------- */
  --badge-number-background-color: #2D3035;
}

html[data-bs-theme="light"] {
  /* Bootstrap Background Color ---------------------- */
  --bs-body-bg: #F0F2F5;
  --bs-tertiary-bg: #F0F2F5;
  /* Background Color -------------------------------- */
  --bg-color-secondary: #FFF;
  --bg-color-third: #f3f4f5;
  --bg-color-dropdown-menu: #FFF;
  --bg-color-link-active: #ebebebd2;
  /* Hover */
  --bg-color-nav-item-hover: #FFF;
  /* Color ------------------------------------------- */
  --color-text-primary: #212529;
  --color-text-primary-highlight: #551a8b;
  --color-link-active: #212529;
  --color-line-border: #E3E3E3;
  /* Box Shadow -------------------------------------- */
  --shadow-button: rgb(231 235 244 / 55%);
  --shadow-1: rgb(0 0 0 / 10%);
  --shadow-2: rgb(0 0 0 / 20%);
  --shadow-inset: rgb(255 255 255 / 50%);
  /* Button ------------------------------------------ */
  --btn-circle-background-color: #E9EEF3;
  /* Badge-number-background-color ------------------- */
  --badge-number-background-color: #FFFFFF;
}