Sommaire

CSS personnalisé

Redéfinis les variables du thème pour affiner l’interface. Le CSS s’applique uniquement à ton compte ; « Aperçu » le vérifie et l’enregistre.

Variables du thème

Les thèmes sont des jeux de variables CSS. Les redéfinir suffit : toute l’interface suit, sans toucher aux composants.

Vise html[data-theme] et non :root : chaque thème déclare ses variables sur html[data-theme='…'], plus spécifique que :root — une règle :root serait ignorée en dehors du thème par défaut.

Variable	Rôle	Défaut ZestEcho
--color-zinc-950	Fond de page	#0a0f1a
--color-zinc-900	Surfaces (cartes, panneaux)	#0f172a
--color-zinc-850	Surfaces secondaires (menus)	#141b28
--color-zinc-800	Bordures douces	#1e293b
--color-zinc-700	Bordures et champs	#334155
--color-zinc-600	Icônes décoratives	#475569
--color-zinc-500	Texte discret, placeholders	#64748b
--color-zinc-400	Texte secondaire	#94a3b8
--color-zinc-300	Texte courant	#cbd5e1
--color-zinc-200	Texte principal	#e2e8f0
--color-zinc-100	Titres	#f1f5f9
--color-zest-300→600	Accent principal (vert yuzu)	#bef264 → #65a30d
--color-echo-300→600	Accent secondaire (écho)	#93c5fd → #8b5cf6
--color-on-accent	Texte posé sur l’accent	#0a0f1a

Dans un thème clair, --color-zinc-950 devient le fond clair et --color-zinc-200 le texte foncé : la correspondance des rôles ne change pas.

Variables de l'éditeur

--cm-bg / --cm-fg — Fond et texte de l’éditeur
--cm-gutter-fg — Numéros de ligne
--cm-active-line — Ligne active
--cm-selection / --cm-cursor — Sélection et curseur
--cm-keyword / --cm-string — Mots-clés et chaînes
--cm-number / --cm-comment — Nombres et commentaires
--cm-function / --cm-variable / --cm-type / --cm-property — Autres éléments de syntaxe
--editor-bg-scrim / --editor-bg-blur — Voile et flou du fond d’écran

Recettes

Changer la couleur d'accent

html[data-theme] {
  --color-zest-500: #0ea5e9;
  --color-zest-400: #38bdf8;
  --color-zest-300: #7dd3fc;
  --color-on-accent: #041a2b;
}

Sélection et curseur de l'éditeur

html[data-theme] {
  --selection-bg: rgba(59, 130, 246, 0.35);
  --cm-cursor: #60a5fa;
}

Éditeur plus confortable

.cm-editor .cm-scroller {
  font-size: 15px;
  line-height: 1.8;
}

Masquer les numéros de ligne

.cm-editor .cm-gutters {
  display: none;
}

Ne viser qu'un thème

html[data-theme='echo-host'] .brand-gradient-text {
  filter: saturate(1.2);
}

Limites et sécurité

16 384 caractères maximum, appliqués uniquement à ton compte, jamais aux autres utilisateurs.
Pas de JavaScript, pas de @import, pas de url() : les images passent par le réglage de fond d’écran dédié.
Un CSS trop agressif peut masquer l’interface : ouvre ?resetAppearance=1 sur n’importe quelle page pour tout réinitialiser.
Pense au contraste : les thèmes clairs et les accents personnalisés sont sous ta responsabilité.

Le CSS personnalisé est du contenu libre : il ne peut pas exécuter de code, mais il peut casser la mise en page de ton compte. La réinitialisation reste toujours accessible.

Pour les curieux

Chaque thème est un bloc [data-theme='…'] de src/app/globals.css, et le registre des thèmes vit dans src/shared/theme. Ajouter un thème revient à créer son bloc et son entrée dans le registre.

Les développements API et serveur MCP sont décrits dans les chapitres suivants. Voir aussi la politique de confidentialité.