Thèmes et CSS

Dans x4js, l’apparence ne se décide pas dans le code : elle est dans le CSS. Chaque composant apporte sa structure et son comportement, et la feuille de style fait le reste.

Une classe par composant

Chaque composant porte une classe à son nom, et celles de ses classes de base.

Composant	Classes portées par l’élément
Button	x4button
VBox	x4vbox, x4box
MainView, qui étend VBox	mainview, x4vbox, x4box

Vous ciblez donc un composant, fourni ou à vous, sans rien déclarer. La propriété cls ajoute vos propres classes quand il faut distinguer deux éléments du même type.

.mainview {
  padding: 12px;
  gap: 8px;

  .x4button {
    min-width: 90px;
  }
}

Trois niveaux de variables

Les couleurs ne sont pas écrites en dur dans les composants. Elles passent par des variables CSS, organisées en trois niveaux :

Niveau	Exemples	Rôle
Échelle primaire	--color-primary-a5 … --color-primary-a90	Les nuances de la couleur de base.
Variables de sens	--accent-background, --border, --text-primary, --background-primary	Ce qu’une couleur signifie dans l’interface.
Variables de composant	--button-background, --listbox-border, --chart-color-1	Le réglage fin d’un composant.

Chaque niveau s’appuie sur le précédent. Selon ce que vous voulez changer, vous intervenez au bon niveau.

Changer la couleur de toute l’application

Redéfinissez l’échelle primaire, une fois par thème. Tous les composants suivent.

:root {
  --color-primary-a40: #3d8fbd;
  --color-primary-a50: #126e9e;
  --color-primary-a60: #0e5a80;
  // … les autres nuances de l'échelle
}

Changer un rôle

:root {
  --border: #cfdae0;
  --accent-background: #126e9e;
}

Régler un composant

.x4button {
  --button-background: #002a40;
  --button-color: white;
}

La liste des variables de chaque composant figure dans la référence de l’API, sur la page de sa classe.

Thème clair, thème sombre

Un thème est un jeu de valeurs pour ces variables. Pour en proposer plusieurs, redéfinissez-les sous un sélecteur de votre choix, et changez ce sélecteur.

:root {
  --background-primary: #fbfdfe;
  --text-primary: #002a40;
}

:root.dark {
  --background-primary: #002a40;
  --text-primary: #f0f9fd;
}

Il n’y a pas d’objet « thème » à manipuler en TypeScript : n’en créez pas un pour dupliquer ce que le CSS fait déjà.

Depuis le code

Il arrive qu’une valeur dépende des données : une couleur choisie par l’utilisateur, une largeur calculée. Un composant peut alors lire ou écrire une variable CSS.

panel.setStyleVariable( "--panel-accent", color );

const height = panel.getStyleVariable( "--row-height" );

Trois règles

1. Pas de cosmétique dans le code. Couleurs, marges et polices vont dans la feuille de style.
2. Pas de bagarre avec le CSS. Si vous avez besoin de marges négatives ou de !important, cherchez l’erreur dans le CSS.
3. Le CSS habille, il ne retire pas un comportement. Pour enlever le bouton de fermeture d’un dialogue, on règle le composant par ses propriétés (closable: false), on ne le masque pas en CSS.