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.
linear.app
Mesuré il y a 4 jours.
/* shadcn/ui theme measured from linear.app. Values are hex; shadcn's CSS accepts them as they are. */
:root {
--background: #08090a;
--foreground: #f7f8f8;
--card: #101112;
--card-foreground: #f7f8f8;
--popover: #101112;
--popover-foreground: #f7f8f8;
--primary: #e5e5e6;
--primary-foreground: #111111;
--secondary: #1c1d1e;
--secondary-foreground: #f7f8f8;
--muted: #101112;
--muted-foreground: #8a8f98;
--accent: #5e6ad2;
--accent-foreground: #111111;
--border: #1c1d1e;
--input: #1c1d1e;
--ring: #e5e5e6;
--radius: 9999px;
}
.dark {
--background: #08090a;
--foreground: #f7f8f8;
--card: #101112;
--muted: #101112;
--muted-foreground: #8a8f98;
--border: #1c1d1e;
--input: #1c1d1e;
}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.