HTML + CSSSchalter

Schalter für Tag und Nacht

Ein Schalter, bei dem die Sonne über einen blauen Himmel rollt und in einer Sternennacht zum Mond wird.

Einstellungen

16px
1x

Code

<label class="uv-dn"><input type="checkbox"><span><i></i><b></b><b></b><b></b></span></label>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Mehr aus Schalter

Wofür du ihn nutzen kannst

Ein Tag-und-Nacht-Toggle ist die sympathischste Art, einen Dark-Mode-Schalter anzubieten. Er passt in den Header eines persönlichen Blogs, eines Portfolios oder einer Doku-Seite, wo die Wahl des Themes etwas Charakter haben darf. Die Sonne gleitet hinüber, wird zu einem grauen Mond mit Kratern, der Himmel wird dunkelblau und drei Sterne erscheinen.

Er ändert nur sein eigenes Aussehen. Mit den hellen und dunklen Styles deiner Seite musst du ihn noch selbst verbinden. Er ist etwas breiter als ein normaler Schalter, also gib ihm im Header Platz, statt ihn zwischen Menülinks zu quetschen.