UI Radix Gantikan Warna Radix dengan Palet Tersuai

Dalam projek Next.js baharu yang sedang saya usahakan, saya memilih Tailwind CSS dan Radix UI untuk penggayaan. UI Radix menyediakan alat palet tersuai yang membolehkan pembangun menentukan warna aksen dan warna kelabu mereka sendiri. Walau bagaimanapun, saya mencari sepanjang dokumentasi dan tidak menemui cara yang berkesan untuk melaksanakan warna tersuai.

Saya mula Googling, dan untuk menyelamatkannya, saya temui blog yang membimbing saya untuk mencapai tugas itu. Berikut adalah langkah yang saya ambil:

Langkah 1. Salin dan tampal skala warna tersuai pada fail global.css

Berikan kod heksagonal warna yang anda mahu pada Aksen dan Kelabu, dan klik Salin skala aksen.

Tampal apa yang disalin ke fail glabal.css.

Lakukan perkara yang sama untuk skala kelabu dengan Salin skala kelabu.

Langkah 2. Ubah suai kod dalam tailwind.config.ts

Tambahkan kod ini pada fail. Jika menggunakan JavaScript, gunakan kod dari blog. Saya menggunakan TypeScript supaya beberapa taip telah ditambahkan pada kod.

function getColorScale(name: string): { [key: string]: string } {
  // eslint-disable-next-line prefer-const
  let scale: { [key: string]: string } = {};
  for (let i = 1; i <= 12; i++) {
    // Add the color variable to the scale
    scale[i.toString()] = `var(--${name}-${i})`;
    // Add alpha color variable to the scale
    scale[`a${i}`] = `var(--${name}-a${i})`;
  }

  return scale;
}

Kod ini mendapat skala warna daripada fail global.css dan mengubahnya menjadi format tailwind css yang diambil dalam menyesuaikan warna.

Seterusnya, ubah suai objek warna di bawah objek tema.

Dalam contoh ini, kategori warna untuk skala warna aksen ialah biru, jadi cukup letakkan biru sebagai hujah semasa memanggil getColorScale.

Lakukan perkara yang sama untuk kelabu.

theme: {
    extend: {
      colors: {
        accent: getColorScale("blue"),
        gray: getColorScale("gray")
      }
    }
  },

Langkah 3. Kemas kini fail layout.tsx

Secara lalai, accentColor ditetapkan kepada biru dan greyColor ditetapkan kepada kelabu, jadi dalam contoh ini, skala warna akan dikemas kini secara automatik, tetapi jika kategori warna adalah warna yang berbeza, katakan oren, maka anda perlu untuk mengemas kini warna aksen kepada oren.

<Theme accentColor='blue' grayColor='gray'>
  <NavBar />
  <main>{children}</main>
  <Footer />
</Theme>

Memandangkan skala warna untuk biru ditakrifkan semula, mana-mana Komponen Tema daripada Radix UI kini akan menggunakan skala warna tersuai untuk menggayakan komponen.

Beginilah cara saya menggunakan skala warna tersuai pada tapak web saya tanpa mentakrifkan semula setiap komponen.

Bagaimanakah anda memperibadikan milik anda?

Atas ialah kandungan terperinci UI Radix Gantikan Warna Radix dengan Palet Tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!