Как я могу стилизовать элементы в div на основе класса div?

Question

По сути, я создаю систему темных тем для своего веб-сайта, и она добавляет класс dark к тегу html при вызове соответствующей функции. Я использую CSS переменные типа --light-theme-bg: white; и обращаюсь к ним с помощью var(--light-theme-bg);. Как я могу стилизовать определенные элементы c, такие как hr, основываясь на том, что этот класс dark присоединен к элементу html. Как я могу это сделать?

Answer 1

Как вы упомянули, он добавил "темный" класс к родительскому тегу html. Поэтому, рассматривая dark как родительский класс, вы можете использовать css для всех элементов, таких как элементы .dark (h1 / div / p / others)

Answer 2

Scoping ваш друг. Вам нужно будет добавить два правила к вашему CSS. Один для темной темы и один для светлой.

В этих правилах вы можете определить --background var.

Все дочерние элементы, ссылающиеся на этот var, будут его уважать.

.light {
  --background: #f9f9f9;
}

.dark {
  --background: #191919;
}

.first,
.second {
  color: red;
  background: var(--background);
}

<div class="light">
  <div class="first"> I'm the first div</div>
  <div class="second">I'm the second div</div>
</div>

<div class="dark">
  <div class="first"> I'm the first div</div>
  <div class="second">I'm the second div</div>
</div>

Answer 3

Если вы хотите выбрать element внутри .class, используйте синтаксис css .class element, поэтому ваш код будет .dark hr, чтобы выбрать его как элемент hr внутри элемента с классом .dark.