body[data-theme="dark"] {
  $primary: #ffe870;

  --bs-primary: $primary !important;
  --bs-link-color-rgb: 255, 232, 112 !important;

  --bs-body-bg: #1b1f22;
  --bs-body-color: #{$dark-body-color};
  --bs-link-color: #{$dark-link-color};
  --bs-link-hover-color: #{darken($dark-link-color, 10%)};

  .form-control {
    background-color: $dark-input-bg;
    border-color: $dark-input-bg;
    color: $dark-body-color;
    box-shadow: 0 2px 10px rgba(255,255,255,.05);

    &:focus, &:active {
      background-color: #3d3d3d;
      border-color: #3d3d3d;
      color: $dark-body-color;
    }
  }

  // Modals
  .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23eee'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
  }
  .modal-content {
    background-color: $dark-body-bg;
    color: $dark-body-color;
  }
  .modal-header, .modal-footer {
    border-color: $dark-input-bg;
    color: $dark-body-color;
  }
  .btn {
    color: $dark-body-color;

    &:hover, &:active, &:focus {
      color: $dark-body-color;
    }
    &.btn-secondary {
      //color: #000;
    }
  }
  .modal-backdrop {
    background-color: #000;
  }

  .dropdown-menu {
    --bs-dropdown-link-color: #{$dark-link-color};
    --bs-dropdown-link-hover-color: #1e2125;
    --bs-dropdown-link-hover-bg: #{$dark-link-color};
  }
}
