Theme-Auswahl mit Vorschau

Drei winzige Oberflächen-Vorschauen für hell, dunkel und System, mit Haken auf der gewählten.

Einstellungen

Hauptfarbe#3d6bff

Zweitfarbe#9fb6ff

Größe16px

Tempo1x

Text

Code

index.html

<fieldset class="uv-rth"><legend>Erscheinungsbild</legend><div class="gr"><label><input type="radio" name="uv-rth"><span class="pv lt" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Hell</span></label><label><input type="radio" name="uv-rth"><span class="pv dk" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">Dunkel</span></label><label><input type="radio" name="uv-rth" checked><span class="pv au" aria-hidden="true"><i class="sb"></i><i class="l1"></i><i class="l2"></i><i class="bt"></i><b class="ck"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></b></span><span class="nm">System</span></label></div></fieldset>

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 Radiobuttons

Alle ansehen: Radiobuttons

Radio-Button mit federndem Punkt

RadiobuttonsHTML + CSS

Radio mit gezeichnetem Ring

RadiobuttonsHTML + CSS

Umschalter mit gleitender Pille

RadiobuttonsHTML + CSS

Radio-Karten mit Icon

RadiobuttonsHTML + CSS

Radio mit springendem Punkt

RadiobuttonsHTML + CSS

Radio mit Flüssigkeitsfüllung

RadiobuttonsHTML + CSS

Vertikale Tabs mit Leuchtbalken

RadiobuttonsHTML + CSS

Auswahl für Tarife

RadiobuttonsHTML + CSS

Wofür du ihn nutzen kannst

Zeigen schlägt Erklären, wenn jemand ein Erscheinungsbild wählt. Jede Option ist ein Mini-Fenster mit Seitenleiste, Textzeilen und Akzent-Button, nur mit CSS gezeichnet: eins hell, eins dunkel und eins diagonal geteilt für System. Die gewählte Vorschau bekommt einen Doppelring, hebt sich leicht und zeigt einen runden Haken in der Ecke.

Passt zu Einstellungsseiten von Apps, Editoren und Dashboards. Der Akzent-Button in jeder Vorschau nutzt deine Hauptfarbe, man sieht also, wie die Marke in beiden Themes wirkt.