Outils
Thème shadcn/ui de n’importe quel site web
Entrez l’adresse d’un site web et obtenez son design dans les variables CSS que lit shadcn/ui : background, foreground, primary, secondary, muted, accent, border, ring et radius.
airbnb.com
Mesuré il y a 4 jours.
/* shadcn/ui theme measured from airbnb.com. Values are hex; shadcn's CSS accepts them as they are. */
:root {
--background: #ffffff;
--foreground: #222222;
--card: #dddddd;
--card-foreground: #222222;
--popover: #dddddd;
--popover-foreground: #222222;
--primary: #da1249;
--primary-foreground: #ffffff;
--secondary: #f2f2f2;
--secondary-foreground: #222222;
--muted: #dddddd;
--muted-foreground: #6c6c6c;
--accent: #da1249;
--accent-foreground: #ffffff;
--border: #ffffff;
--input: #ffffff;
--ring: #da1249;
--radius: 100px;
}Comment ça marche
Stylepack ouvre le site dans un vrai navigateur, mesure ce qui s’affiche (et non ce que dit la feuille de style) à quatre largeurs et dans les deux thèmes, puis enregistre le résultat sous forme de pack de design. Un site déjà mesuré répond immédiatement ; un nouveau site prend moins d’une minute. Chaque valeur de cette page vient de ce pack.
Questions
Comment les variables shadcn sont-elles remplies ?
Chaque couleur mesurée a un rôle (background, foreground, primary, on-primary, surface, muted-foreground, border) ; les variables sont remplies à partir de ces rôles, avec l’accent comme --primary et --ring et l’arrondi des boutons comme --radius.
Dois-je convertir les valeurs ?
Non. Le CSS de shadcn/ui accepte les valeurs hex telles quelles. Si votre configuration utilise oklch ou hsl, convertissez-les avec votre outil habituel ou gardez le hex.
Et le thème sombre ?
Quand le site a un thème sombre, le résultat ajoute un bloc .dark avec les valeurs sombres mesurées pour le fond, le texte, les surfaces et les bordures.