Jeux de couleurs prédéfinis

Point Rouge comprend une collection de jeux de couleurs prédéfinis qui peuvent être appliqués pour personnaliser l’apparence du thème. Chaque schéma définit un ensemble complet de propriétés personnalisées CSS (variables) pour les modes clair et sombre.

Table des matières

Démarrage rapide

Pour appliquer un jeu de couleurs prédéfini, copiez les définitions des variables CSS dans la configuration de votre thème. Pour des instructions de configuration détaillées, consultez le guide de configuration des schémas de couleurs.

Référence des variables CSS

Tous les jeux de couleurs utilisent les propriétés personnalisées CSS suivantes :

Schémas d’éclairage

Les schémas de couleurs claires sont définis à l’aide des sélecteurs CSS :root et [data-theme="light"].

Lumière en papier

Thème lumineux Point Rouge par défaut.

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

Kha-Yan

Schéma de lumière axé sur le violet avec un fond chaud.

:root,
[data-theme="light"] {
  --background: #fefaec;
  --foreground: #120e01;
  --accent: #6e10cf;
  --accent-foreground: #fefaec;
  --muted: #dcdcdc;
  --muted-foreground: #6b7280;
  --border: #cdc4d6;
}

Nila

Schéma violet clair avec des nuances bleues froides.

:root,
[data-theme="light"] {
  --background: #f6f6fb;
  --foreground: #0c0c19;
  --accent: #6760b4;
  --accent-foreground: #f3f3f3;
  --muted: #dddcea;
  --muted-foreground: #54515b;
  --border: #d8d6ec;
}

Jadéite

Schéma lumineux aux accents sarcelle avec fond neutre.

:root,
[data-theme="light"] {
  --background: #f6fcf7;
  --foreground: #060b07;
  --accent: #027c6d;
  --accent-foreground: #ffffff;
  --muted: #c9e4e2;
  --muted-foreground: #6b7280;
  --border: #d4e1df;
}

Pyit Tine Htaung

Schéma d’accents rouges et dorés avec des tons chauds.

:root,
[data-theme="light"] {
  --background: #fffaf6;
  --foreground: #060503;
  --accent: #aa0215;
  --accent-foreground: #ffcf75;
  --muted: #ffdc98;
  --muted-foreground: #54515b;
  --border: #ffdc98;
}

Schémas sombres

Les schémas de couleurs sombres sont définis à l’aide du sélecteur CSS [data-theme="dark"].

Papier foncé

Thème sombre Point Rouge original avec des accents cyan.

[data-theme="dark"] {
  --background: #2f3741;
  --foreground: #e6e6e6;
  --accent: #1ad9d9;
  --accent-foreground: #0d2b2b;
  --muted: #596b81;
  --muted-foreground: #8faabb;
  --border: #3b4655;
}

Papier foncé II

Thème sombre par défaut actuel avec des accents orange.

[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #ff6b01;
  --accent-foreground: #ffffff;
  --muted: #343f60;
  --muted-foreground: #afb9ca;
  --border: #ab4b08;
}

Violet profond

Schéma sombre aux accents magenta vibrants.

[data-theme="dark"] {
  --background: #212737;
  --foreground: #eaedf3;
  --accent: #eb3fd3;
  --accent-foreground: #1a0d1a;
  --muted: #513f51;
  --muted-foreground: #c09abc;
  --border: #642451;
}

Braise

Schéma sombre et chaleureux avec des accents rouges.

[data-theme="dark"] {
  --background: #1a1a1a;
  --foreground: #f5efe4;
  --accent: #ff3737;
  --accent-foreground: #1a1a1a;
  --muted: #38342f;
  --muted-foreground: #a59a8c;
  --border: #6f5648;
}

Expresso

Schéma chaud et sombre axé sur le brun.

[data-theme="dark"] {
  --background: #2f2f2f;
  --foreground: #ebe5e1;
  --accent: #ee781e;
  --accent-foreground: #1a1a1a;
  --muted: #4f4b44;
  --muted-foreground: #ddbfa7;
  --border: #6f5648;
}