body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Default light theme (Bootstrap 4 default) */

body {
  background-color: #fff;
  color: #212529;
}

/* Dark theme */

body.dark-theme {
  background-color: #212529;
  color: #f8f9fa;
}

/* Bootstrap 4 component overrides for dark theme */

body.dark-theme .btn-primary {
  background-color: #375a7f;
  border-color: #375a7f;
}

body.dark-theme .btn-primary:hover {
  background-color: #2c4866;
  border-color: #2c4866;
}

body.dark-theme .btn-secondary {
  background-color: #444;
  border-color: #444;
}

body.dark-theme .btn-secondary:hover {
  background-color: #333;
  border-color: #333;
}

body.dark-theme .card {
  background-color: #343a40;
  border-color: #454d55;
  color: #f8f9fa;
}

body.dark-theme .table {
  color: #f8f9fa;
  background-color: #343a40;
}

body.dark-theme .table-bordered {
  border-color: #454d55;
}

body.dark-theme .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05);
}

body.dark-theme .navbar {
  background-color: #343a40;
  color: #f8f9fa;
}

body.dark-theme .nav-link {
  color: #f8f9fa;
}

body.dark-theme .form-control {
  background-color: #343a40;
  border-color: #454d55;
  color: #f8f9fa;
}

body.dark-theme .form-control:focus {
  background-color: #454d55;
  border-color: #596673;
  color: #f8f9fa;
}

/* Add more Bootstrap component overrides as needed */