---
title: Interface & Moteur de Thèmes
description: Présentation de l'interface réactive de VertiWiki, des modes modulaires de mise en page et du système de jetons de design CSS.
tags: [vertiwiki, ui, theming, design-tokens, mise-en-page, css, francais]
---

# Interface & Moteur de Thèmes

> For the complete documentation index and agent navigation, see [llms.txt](/llms.txt).

VertiWiki bénéficie d'une interface entièrement découplée, conçue en TypeScript natif, CSS Grid, Flexbox et propriétés personnalisées CSS. Elle propose un rendu réactif, un mode sombre/clair automatique et plusieurs styles d'affichage sans recourir à de volumineuses bibliothèques comme React ou Vue.

---

## 🖥️ Structure du Layout (`src/ui/layout.ts`)

L'application s'initialise dans `#verti-app` et s'articule autour des sections suivantes :

```text
+-------------------------------------------------------------------------+
| .verti-header (Logo, Titre, Barre Recherche, Sélecteur Thème, Sélecteur)|
+------------------------------------+------------------------------------+
| .verti-sidebar (Arbre Navigation)  | .verti-main-container              |
|                                    |   .verti-breadcrumbs               |
|                                    |   .verti-article (Contenu Article) |
|                                    |   .verti-prev-next (Pagination)    |
|                                    |   .verti-footer                    |
+------------------------------------+------------------------------------+
|                                    | .verti-toc-sidebar (Sur cette page)|
+------------------------------------+------------------------------------+
```

### Modes de Mise en Page Modulaires (`data-layout`)
Configurables dans `config.json` (`"layoutMode": "..."`) ou sur une page spécifique via son frontmatter (`layout: book`) :

| Mode | Public Visé | Rendu Visuel |
| :--- | :--- | :--- |
| `default` | Documentation standard et wikis | Agencement classique sur 3 colonnes (Menu + Article + Sommaire) |
| `book` | Lecture suivie et ouvrages numériques | Texte centré, navigation discrète, esprit livre |
| `handbook` | Politiques d'entreprise, guides RH | Encadrés pastels, style listes à cocher |
| `api` | Documentation d'API développeurs | Colonnes scindées (Explications à gauche, Code à droite) |
| `hub` | Portails d'entreprise & index d'équipe | Grille de cartes avec bannière de présentation |

### Ergonomie de Lecture (`contentWidth`)
- `normal` : Largeur standard de documentation (850px).
- `readable` : Limite typographique de confort (68 caractères par ligne, interligne 1.8).
- `full` : Pleine largeur (100%), idéale pour les tableaux étendus et grands diagrammes.

---

## 🎨 Moteur de Thèmes & Jetons CSS (`src/ui/theme.ts`)

L'apparence visuelle est définie par les variables CSS de l'espace `--verti-*` :

```css
:root {
  --verti-bg-base: #ffffff;
  --verti-text-primary: #0f172a;
  --verti-text-secondary: #475569;
  --verti-border: #e2e8f0;
  --verti-primary: #2563eb;
  --verti-primary-fg: #ffffff;
  --verti-code-bg: #f8fafc;
  --verti-radius: 8px;
}
```

### Fichiers JSON Autonomes
Les thèmes peuvent être isolés dans des fichiers JSON au sein de `themes/` (ex : `themes/obsidian.json`, `themes/dracula.json`, `themes/nord.json`) :

```json
{
  "id": "dracula",
  "name": "Dracula",
  "previewColor": "#bd93f9",
  "light": {
    "background": "#f8f8f2",
    "foreground": "#282a36",
    "primary": "#bd93f9",
    "border": "#e2e8f0"
  },
  "dark": {
    "background": "#282a36",
    "foreground": "#f8f8f2",
    "primary": "#bd93f9",
    "border": "#44475a"
  }
}
```

### Héritage de Thèmes (`extends`)
Un thème peut hériter d'un preset existant pour n'ajuster que certains jetons :
```json
{
  "id": "ma-marque",
  "extends": "default",
  "dark": {
    "primary": "#10b981"
  }
}
```

---

## 🌐 Composants d'Interface Dynamiques

### Sommaire de Page (TOC) (`src/ui/toc.ts`)
Détecte automatiquement les titres `h2` et `h3` et utilise `IntersectionObserver` pour mettre en valeur la section active lors du défilement.

### Sélecteur de Langue (`src/ui/language-chooser.ts`)
Présent dès que deux langues ou plus sont activées dans `config.json`, il offre un changement instantané de langue via son menu déroulant.

---

## 🔗 Prochaines Étapes

- Explorez les composants dans [Plugins & Extensions](plugins-and-extensions.md).
- Consultez les options dans [Aperçu de la Configuration](../configuration/overview.md).
- Apprenez à concevoir des thèmes dans [Développement Local](../guides/development.md).