Radix UI Remplacer la couleur Radix par une palette personnalisée

Dans un nouveau projet Next.js sur lequel je travaille, j'ai choisi Tailwind CSS et Radix UI pour le style. Radix UI fournit un outil de palette personnalisé qui permet aux développeurs de définir leur propre couleur d'accent et leur propre couleur de gris. Cependant, j'ai cherché dans la documentation et je n'ai pas trouvé de moyen efficace d'implémenter les couleurs personnalisées.

J'ai commencé à chercher sur Google et, à mon secours, j'ai trouvé un blog qui m'a guidé pour accomplir cette tâche. Voici les étapes que j'ai suivies :

Étape 1. Copiez et collez l'échelle de couleurs personnalisée dans le fichier global.css

Fournissez le code hexadécimal de la couleur souhaitée pour l'accent et le gris, puis cliquez sur Copier l'échelle d'accent.

Collez ce qui est copié dans le fichier glabal.css.

Faites de même pour l'échelle de gris avec Copier l'échelle de gris.

Étape 2. Modifier le code dans tailwind.config.ts

Ajoutez ce code au fichier. Si vous utilisez JavaScript, utilisez le code du blog. J'utilise TypeScript donc certaines saisies ont été ajoutées au code.

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;
}

Ce code obtient l'échelle de couleurs du fichier global.css et la transforme dans le format que prend Tailwind CSS pour personnaliser les couleurs.

Ensuite, modifiez l'objet couleurs sous l'objet thème.

Dans cet exemple, la catégorie de couleur pour l'échelle de couleurs d'accentuation est bleue, alors mettez simplement le bleu comme argument lors de l'appel de getColorScale.

Faites de même pour le gris.

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

Étape 3. Mettre à jour le fichier layout.tsx

Par défaut, accentColor est défini sur bleu et grayColor est défini sur gris, donc dans cet exemple, l'échelle de couleurs sera automatiquement mise à jour, mais si la catégorie de couleur est d'une couleur différente, par exemple orange, alors vous aurez besoin pour mettre à jour l'accentColor en orange.

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

L'échelle de couleurs du bleu étant redéfinie, tout composant de thèmes de Radix UI utilisera désormais l'échelle de couleurs personnalisée pour styliser les composants.

C'est ainsi que j'ai appliqué des échelles de couleurs personnalisées sur mon site Web sans redéfinir chaque composant.

Comment personnaliser le vôtre ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!