Grundsätzlich erstelle ich ein dunkles Themensystem für meine Website und füge dem HTML-Tag die Klasse dark hinzu, wenn die richtige Funktion aufgerufen wird. Ich verwende CSS-Variablen wie --light-theme-bg: white; und greife mit var(--light-theme-bg); darauf zu. Wie kann ich bestimmte Elemente wie hr basierend darauf formatieren, ob diese dark -Klasse an das html -Element angehängt ist? Wie kann ich das machen?

0
CreeperCry 7 Feb. 2020 im 21:31

3 Antworten

Beste Antwort

Scoping ist Ihr Freund. Sie müssen Ihrem CSS zwei Regeln hinzufügen. Eine für das dunkle Thema und eine für das helle.

In diesen Regeln können Sie eine --background var definieren.

Alle untergeordneten Elemente, die auf diese Variable verweisen, respektieren sie.

.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>
0
volt 7 Feb. 2020 im 19:05

Wenn Sie ein element in einem .class auswählen möchten, verwenden Sie die CSS-Syntax .class element. Ihr Code wäre also .dark hr, um ein hr Element darin auszuwählen ein Element mit der Klasse .dark.

0
Fig 7 Feb. 2020 im 18:37

Wie Sie bereits erwähnt haben, wurde dem übergeordneten HTML-Tag die Klasse "dark" hinzugefügt. Wenn Sie also Dark als übergeordnete Klasse betrachten, können Sie CSS für alle Elemente wie .dark-Elemente (h1 / div / p / Others) verwenden.

0
M.M.BAPIN 7 Feb. 2020 im 18:37