1

I'm trying to build an app with light and dark mode. The css looks like this:

.light-mode li,
p,
input,
time,
span,
a {
  color: var(--bravo);
}
.dark-mode li,
p,
input,
time,
span,
a {
  color: var(--bravoDark);
}

I don't understand as even when .light-mode class is applied the .dark-mode styles are still applied.

The classes .dark-mode and .light-mode are given to a wrapping div element.

DGB
  • 1,054
  • 2
  • 11
  • 25

1 Answers1

2

if the classes of the wrapping div element at .light-mode and .dark-mode as you mentioned, you would need to select each element within those containers separately.

Currently, your CSS is just applying the light and dark mode to the li only, as you've separated the rest of the elements with commas, that means you're selecting p, input, time, span and a indiscriminately. Changing your code to:

.light-mode li,
.light-mode p,
.light-mode input,
.light-mode time,
.light-mode span,
.light-mode a {
  color: var(--bravo);
}
.dark-mode li,
.dark-mode p,
.dark-mode input,
.dark-mode time,
.dark-mode span,
.dark-mode a {
  color: var(--bravoDark);
}

This should solve your query, but without a shot of the HTML, I can't be certain. Let me know if there's anything else I can help with.

Diego
  • 187
  • 4