Thèmes
Les thèmes Clepit sont pilotés par des variables CSS. Définissez theme: "auto" | "light" | "dark", ou passez des themeOverrides explicites.
theme
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'Le préréglage auto suit le schéma de couleurs du système d’exploitation via prefers-color-scheme et bascule en direct lors du changement.
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
Les 22 tokens sont tous facultatifs. Tout ce que vous omettez revient au préréglage sélectionné.
| Token | Contrôle |
|---|---|
| bg | Couleur d'arrière-plan principale de l'éditeur / du moteur de rendu |
| surface | Surface secondaire : panneaux de commande, en-têtes de barre de mode |
| surface2 | Surface tertiaire : arrière-plans des menus en survol |
| text | Couleur de texte principale |
| textMuted | Texte secondaire : étiquettes, paragraphes de repli |
| textSubtle | Texte subtil : éléments atténués, marqueurs de date |
| border | Couleur de bordure principale |
| borderSubtle | Bordure subtile : séparateurs sans accentuation |
| primary | Couleur de marque principale : boutons, liens d'ancrage |
| primaryHover | Couleur de survol principale : état hover/focus du bouton |
| primaryBg | Arrière-plan teinté principal : anneaux de focus |
| marker | Couleur de surbrillance du texte : outil inline marqueur |
| selectionBg | Arrière-plan de sélection de texte |
| blockHighlightBg | Arrière-plan du bloc actif |
| success | Couleur du texte/icône de l'état réussi |
| successBg | Arrière-plan teinté de succès : boîtes de notification |
| warning | Couleur du texte/icône de l'état d'avertissement |
| warningBg | Arrière-plan teinté d'avertissement |
| error | Couleur du texte/icône de l'état d'erreur |
| errorBg | Arrière-plan teinté d'erreur |
| info | Couleur du texte/icône de l'état d'information |
| infoBg | Arrière-plan teinté d'information |
themeOverrides
Remplacez n’importe quel sous-ensemble de tokens. L’éditeur les injecte comme variables CSS limitées à son conteneur.
// themeOverrides accepts separate light and dark token sets.
// Both keys are optional — omit one to use the preset for that mode.
Editor.create({
containerId: 'editor',
theme: 'auto',
themeOverrides: {
light: {
primary: '#5b5bff',
primaryHover: '#4747e6',
bg: '#ffffff',
text: '#0a0a0a',
},
dark: {
primary: '#7c7cff',
primaryHover: '#9494ff',
bg: '#161b22',
text: 'rgba(240, 246, 252, 0.92)',
},
},
});Propriétés CSS personnalisées
Chaque token correspond à une variable --clepit-* limitée au conteneur de l’éditeur. Vous pouvez les lire ou les étendre depuis votre propre feuille de style.
/* Every ThemeToken maps to a --clepit-* CSS variable.
Variables are scoped to .clepit-editor, .clepit-renderer-content, and body[data-clepit-theme]. */
--clepit-bg
--clepit-surface
--clepit-surface-2
--clepit-text
--clepit-text-muted
--clepit-text-subtle
--clepit-border
--clepit-border-subtle
--clepit-primary
--clepit-primary-hover
--clepit-primary-bg
--clepit-marker
--clepit-selection-bg
--clepit-block-highlight-bg
--clepit-success
--clepit-success-bg
--clepit-warning
--clepit-warning-bg
--clepit-error
--clepit-error-bg
--clepit-info
--clepit-info-bg#editor {
color: var(--clepit-text);
background: var(--clepit-bg);
--my-surface: var(--clepit-surface-2);
border: 1px solid var(--clepit-border);
}styles et classNames par bloc
RendererConfig.styles transfère les propriétés CSS indépendantes du framework directement dans l'élément racine du composant. RendererConfig.classNames ajoute des classes CSS supplémentaires sans toucher aux styles intégrés. Les deux peuvent être combinés.
import { Renderer } from '@clepit/core';
import type { BlockStyles, BlockClassNames } from '@clepit/core';
const styles: BlockStyles = {
// alert block — keyed by variant
alert: {
error: { borderRadius: '8px', padding: '12px 16px' },
info: { borderRadius: '8px', padding: '12px 16px' },
},
// header block — keyed by level
header: {
h1: { fontFamily: 'Georgia, serif' },
h2: { fontFamily: 'Georgia, serif' },
},
// paragraph block — flat CSSProperties
paragraph: { lineHeight: '1.75' },
// table block — sub-element keys
table: { cell: { padding: '8px 12px' } },
// code block — sub-element keys
code: { container: { borderRadius: '6px' } },
};
const classNames: BlockClassNames = {
paragraph: 'prose-paragraph',
header: { h1: 'prose-h1', h2: 'prose-h2' },
alert: { info: 'alert-info', error: 'alert-error' },
};
Renderer.create({ containerId: 'output', data, styles, classNames });StyleManager.subscribe
Abonnez-vous aux modifications de tokens à l’exécution. Utile pour synchroniser l’interface environnante avec les changements de thème de l’éditeur.
import { StyleManager } from '@clepit/core';
const unsubscribe = StyleManager.subscribe(theme => {
// theme is 'light' | 'dark' — sync surrounding UI
document.documentElement.setAttribute('data-theme', theme);
});
// later — clean up when the component unmounts
unsubscribe();