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.
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.