Change css colors based on body class (dark mode)

I don't have enough reputation to comment, so here's an answer instead.

If you're trying to make a 'Dark Mode' variant of your css you could use a media query to achieve this

@media (prefers-color-scheme: dark) {
/* override styles here */
}

More information on Mozilla's website https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

The casper theme for Ghost CMS is an example of a stylesheet that has a dark mode added to the bottom (section 12)

You can use CSS Variables, so you will only need to set the property once

:root {
  --darkColor: #f7f7f7;
  --darkBackground: #444;
  --lightColor: #292b2c;
  --lightBackground: #ccc;
}

body.light .card,
body.light .jumbotron {
  color: var(--lightColor);
  background-color: var(--lightBackground);
}

body.dark .card,
body.dark .jumbotron {
  color: var(--darkColor);
  background-color: var(--darkBackground);
}

Depending on the support you'll need to give, you can mix CSS Variables with @media (prefers-color-scheme: dark)

:root {
  --darkColor: #f7f7f7;
  --darkBackground: #444;
  --lightColor: #292b2c;
  --lightBackground: #ccc;
}

.card,
.jumbotron {
  color: var(--lightColor);
  background-color: var(--lightBackground);
}

@media (prefers-color-scheme: dark) {
  .card,
  .jumbotron {
    color: var(--darkColor);
    background-color: var(--darkBackground);
  }
}

If it look like your example (same rules on different classes) just use comma to separate classes:

body.light .jumbotron,
body.light .card {
  color: #292b2c;
  background-color: #CCC;
}

body.dark .jumbotron,
body.dark .card {
  color: #f7f7f7;
  background-color: #444;
}

If it more complex then this example, consider using framework: Sass .scss: Nesting and multiple classes?