Personnalisation des jeux de couleurs du thème Point Rouge

Ce guide explique comment activer ou désactiver les modes clair et sombre, et comment personnaliser la palette de couleurs pour l’ensemble du site.

Table des matières

Activer/désactiver les modes clair et sombre

Le thème Point Rouge inclut les modes clair et sombre par défaut. Ce comportement par défaut peut être désactivé dans point-rouge.config.ts:

export default definePointRougeConfig({
  // ...
  features: {
    lightAndDarkMode: true,
    // ...
  },
});point-rouge.config.ts

Pour désactiver light & dark mode, définir features.lightAndDarkMode à false. Lorsqu’il est désactivé, le site utilisera uniquement le jeu de couleurs claires défini dans src/styles/theme.css.

Personnaliser les jeux de couleurs

Les schémas de couleurs claires et foncées du thème Point Rouge sont définis dans src/styles/theme.css.

/* Light theme values */
:root,
[data-theme="light"] {
  --background: #fdfdfd;
  --foreground: #282728;
  --accent: #006cac;
  --accent-foreground: #ffffff;
  --muted: #e6e6e6;
  --muted-foreground: #6b7280;
  --border: #ece9e9;
}

/* Dark theme values */
[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --accent-foreground: #ffffff;
  --muted: #343f60;
  --muted-foreground: #afb9ca;
  --border: #ab4b08;
}src/styles/theme.css

Le :root et [data-theme="light"] les sélecteurs définissent la palette de couleurs de la lumière, tandis que [data-theme="dark"] définit la palette de couleurs sombres.

Pour personnaliser votre propre palette de couleurs, spécifiez vos couleurs claires à l’intérieur :root, [data-theme="light"], et tes couleurs sombres à l’intérieur [data-theme="dark"].

Voici une explication détaillée de chaque propriété de couleur :

Propriété de couleur	Définition et utilisation
`--background`	Couleur primaire du site web. Généralement l’arrière-plan principal.
`--foreground`	Couleur secondaire du site web. Généralement la couleur du texte.
`--accent`	Couleur d’accent. Utilisé pour les liens, les états de survol et les éléments interactifs.
`--accent-foreground`	Couleur de premier plan affichée au-dessus de `--accent` arrière-plans.
`--muted`	Couleur d’arrière-plan atténuée. Utilisé pour les cartes, les balises et les états de survol.
`--muted-foreground`	Couleur du texte affiché en haut de `--muted` arrière-plans.
`--border`	Couleur de la bordure. Utilisé pour les séparateurs et la séparation visuelle.

Voici un exemple de modification de la palette de couleurs de la lumière :

/* ... */
:root,
[data-theme="light"] {
  --background: #f6eee1;
  --foreground: #012c56;
  --accent: #e14a39;
  --accent-foreground: #ffffff;
  --muted: #efd8b0;
  --muted-foreground: #6b7280;
  --border: #dc9891;
}
/* ... */src/styles/theme.css

Découvrez-en quelques-uns schémas de couleurs prédéfinis Point Rouge a déjà été conçu pour vous.