JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<input type="checkbox" id="darkThemeSelect">
<div class="themeSelector">
<label for="darkThemeSelect" id="darkThemeLabel">Dunkles Thema</label>
<label for="darkThemeSelect" id="lightThemeLabel">Helles Thema</label>
</div>
<main>
<h1>Präambel</h1>
<p>
Im Bewußtsein seiner Verantwortung vor Gott und den Menschen,
von dem Willen beseelt, als gleichberechtigtes Glied in einem vereinten 
Europa dem Frieden der Welt zu dienen, hat sich das Deutsche Volk kraft 
seiner verfassungsgebenden Gewalt dieses Grundgesetz gegeben.
Die Deutschen in den Ländern Baden-Württemberg, Bayern, Berlin, Brandenburg,
Bremen, Hamburg, Hessen, Mecklenburg-Vorpommern, Niedersachsen,
Nordrhein-Westfalen, Rheinland-Pfalz, Saarland, Sachsen, Sachsen-Anhalt,
Schleswig-Holstein und Thüringen haben in freier Selbstbestimmung 
die Einheit und Freiheit Deutschlands vollendet.
Damit gilt dieses Grundgesetz für das gesamte Deutsche Volk.</p>
</main>

CSS

#darkThemeSelect:checked ~ .themeSelector #darkThemeLabel { display: none; }
#darkThemeSelect:not(:checked) ~ .themeSelector #lightThemeLabel { display: none; }
#darkThemeLabel { background-color: #333; color: #ffc;}
#lightThemeLabel { background-color: #ffc; color: #333;}
#darkThemeSelect {
  width: 1px; height: 1px; position: absolute;        
}
.themeSelector {
  position:absolute; top: 1em; right: 1em; display: block;
  user-select:none;
}
main {
  padding: 2em;
  
}
#darkThemeSelect:checked ~ main { background-color: #333; color: #ffc;}