Alat

Tema shadcn/ui dari situs web mana pun

Masukkan alamat situs web dan dapatkan desainnya sebagai variabel CSS yang dibaca shadcn/ui: background, foreground, primary, secondary, muted, accent, border, ring, dan radius.

Cobastripe.comlinear.appairbnb.com

Cara kerjanya

Stylepack membuka situs di browser sungguhan, mengukur apa yang tampil (bukan apa yang tertulis di stylesheet) pada empat lebar layar dan di kedua tema, lalu menyimpan hasilnya sebagai paket desain. Situs yang sudah diukur langsung terjawab; situs baru butuh kurang dari semenit. Setiap nilai di halaman ini berasal dari paket itu.

Pertanyaan

Bagaimana variabel shadcn diisi?

Setiap warna yang diukur punya peran (background, foreground, primary, on-primary, surface, muted-foreground, border); variabelnya diisi dari peran itu, dengan aksen sebagai --primary dan --ring serta radius tombol sebagai --radius.

Apakah nilainya perlu dikonversi?

Tidak. CSS shadcn/ui menerima nilai hex apa adanya. Bila setup Anda memakai oklch atau hsl, konversi dengan alat yang biasa Anda pakai atau tetap gunakan hex.

Bagaimana dengan tema gelapnya?

Bila situs punya tema gelap, hasilnya menambahkan blok .dark dengan nilai gelap hasil pengukuran untuk background, foreground, permukaan, dan border.