Tools
shadcn/ui-Theme aus einer Website
Gib eine Website-Adresse ein und erhalte ihr Design als die CSS-Variablen, die shadcn/ui liest: background, foreground, primary, secondary, muted, accent, border, ring und radius.
So funktioniert es
Stylepack öffnet die Website in einem echten Browser, misst, was gerendert wird (nicht, was im Stylesheet steht), in vier Breiten und in beiden Themes, und speichert das Ergebnis als Designpaket. Eine bereits gemessene Website antwortet sofort; eine neue braucht unter einer Minute. Jeder Wert auf dieser Seite stammt aus diesem Paket.
Fragen
Wie werden die shadcn-Variablen befüllt?
Jede gemessene Farbe hat eine Rolle (background, foreground, primary, on-primary, surface, muted-foreground, border); die Variablen werden aus diesen Rollen befüllt, mit dem Akzent als --primary und --ring und dem Button-Radius als --radius.
Muss ich die Werte umrechnen?
Nein. Das CSS von shadcn/ui akzeptiert Hex-Werte, wie sie sind. Wenn dein Setup oklch oder hsl nutzt, rechne sie mit deinem üblichen Tool um oder behalte die Hex-Werte.
Was ist mit dem dunklen Theme?
Wenn die Website ein dunkles Theme hat, ergänzt das Ergebnis einen .dark-Block mit den gemessenen dunklen Werten für background, foreground, Flächen und Rahmen.