Liigu põhisisu juurde

Teemad

Clepit teemad põhinevad CSS-muutujatel. Määra theme: "auto" | "light" | "dark" või edasta selgesõnaline themeOverrides.

theme

TypeScript
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'

Eelseadistus auto järgib operatsioonisüsteemi värviskeemi prefers-color-scheme kaudu ja vahetub muutmisel reaalajas.

TypeScript
import { Editor } from '@clepit/core';

Editor.create({ containerId: 'editor', theme: 'auto' });

ThemeTokens

Kõik 22 tokenit on valikulised. Kõik, mille välja jätad, langeb tagasi valitud eelseadistusele.

TokenKontrollib
bgRedaktori/renderdaja põhitausta värv
surfaceSekundaarne pind: käsupaneelid, reziimiriba päised
surface2Tertsiaarne pind: hõljumismenüüde taustade värv
textEsmane teksti värv
textMutedSekundaarne tekst: sildid, varufontiga lõigud
textSubtlePeen tekst: hämaruse elemendid, kuupäevamärgistused
borderEsmane äärise värv
borderSubtlePeen ääris: mitteaktsendile dividers
primaryEsmane brändi värv: nupud, ankurlingid
primaryHoverEsmase värvi hõljumise värv: nupu hover/focus olek
primaryBgToonitud esmane taust: fookusrõngad
markerTeksti esiletõstmise värv: markeri tekstitööriist
selectionBgTeksti valimise taust
blockHighlightBgAktiivse ploki taust
successEduolu teksti/ikooni värv
successBgToonitud edu taust: teavitusväljad
warningHoiatuse teksti/ikooni värv
warningBgToonitud hoiatuse taust
errorVea teksti/ikooni värv
errorBgToonitud vea taust
infoTeabe teksti/ikooni värv
infoBgToonitud teabe taust
codeBgKoodiploki taust.
codeTextVaikimisi tekstivärv koodiplokkides.
codeBorderKoodiploki äärejoon.
codeGutterReanumbrite ääreriba värv.
codeSelectionBgValitud teksti taust koodiplokkides.
codeCommentKommentaaride süntaksivärv.
codeKeywordVõtmesõnade süntaksivärv.
codeStringStringide süntaksivärv.
codeNumberArvude süntaksivärv.
codeFunctionFunktsiooninimede süntaksivärv.
codeTypeTüübinimede süntaksivärv.
codePunctuationKirjavahemärkide süntaksivärv.

themeOverrides

Alista mis tahes tokenite alamhulk. Redaktor süstib need oma konteinerile piiritletud CSS-muutujatena.

TypeScript
// 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)',
    },
  },
});

CSS-i kohandatud omadused

Iga token vastab --clepit-* muutujale, mis on piiritletud redaktori konteinerile. Saad neid lugeda või laiendada oma laaditabelist.

CSS
/* 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
--clepit-code-bg
--clepit-code-text
--clepit-code-border
--clepit-code-gutter
--clepit-code-selection-bg
--clepit-code-comment
--clepit-code-keyword
--clepit-code-string
--clepit-code-number
--clepit-code-function
--clepit-code-type
--clepit-code-punctuation
CSS
#editor {
  color: var(--clepit-text);
  background: var(--clepit-bg);
  --my-surface: var(--clepit-surface-2);
  border: 1px solid var(--clepit-border);
}

Ploki kohta styles ja classNames

RendererConfig.styles edastab raamistikust sõltumatud CSS-omadused otse komponendi juurkomponendile. RendererConfig.classNames lisab täiendavaid CSS-klasse ilma sisseehitatud stiile puutumata. Mõlemaid saab kombineerida.

TypeScript
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

Telli käitusaja tokenite muudatused. Kasulik ümbritseva kasutajaliidese sünkroonimiseks redaktori teemavahetustega.

TypeScript
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();
themeOverrides’i andmine iga paigalduse kohta võimaldab samal rakendusel pakkuda samal lehel mitut erinevalt kujundatud redaktorit.