Mandhari

Mandhari ya Clepit yanaendeshwa na vigeu vya CSS. Weka theme: "auto" | "light" | "dark", au pitisha themeOverrides wazi.

theme

TypeScript

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

Uwekaji wa awali wa auto hufuata mpangilio wa rangi wa mfumo wa uendeshaji kupitia prefers-color-scheme na hubadilika moja kwa moja unapobadilika.

TypeScript

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

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

ThemeTokens

Tokeni zote 22 ni za hiari. Chochote unachoacha hurudi kwenye uwekaji wa awali uliochaguliwa.

Tokeni	Inadhibiti
bg	Mandhari kuu ya kihariri / kionyeshi
surface	Uso wa pili: paneli za amri, vichwa vya upau wa hali
surface2	Uso wa tatu: mandhari ya menyu za hover
text	Rangi ya maandishi kuu
textMuted	Maandishi ya pili: lebo, aya za akiba
textSubtle	Maandishi ya hila: vipengele vya mwanga, alama za tarehe
border	Rangi kuu ya mpaka
borderSubtle	Mpaka wa hila: vitenganishi visivyo na msisitizo
primary	Rangi kuu ya chapa: vitufe, viungo vya nanga
primaryHover	Rangi kuu ya hover: hali ya hover/focus ya kitufe
primaryBg	Mandhari kuu yenye rangi: pete za fokasi
marker	Rangi ya kuonyesha maandishi: zana ya ndani ya mstari ya alama
selectionBg	Mandhari ya uteuzi wa maandishi
blockHighlightBg	Mandhari ya kizuizi kinachofanya kazi
success	Rangi ya maandishi/ikoni ya hali ya mafanikio
successBg	Mandhari ya mafanikio yenye rangi: masanduku ya arifa
warning	Rangi ya maandishi/ikoni ya hali ya onyo
warningBg	Mandhari ya onyo yenye rangi
error	Rangi ya maandishi/ikoni ya hali ya hitilafu
errorBg	Mandhari ya hitilafu yenye rangi
info	Rangi ya maandishi/ikoni ya hali ya habari
infoBg	Mandhari ya habari yenye rangi

themeOverrides

Tengua sehemu yoyote ya tokeni. Kihariri huziingiza kama vigeu vya CSS vilivyowekewa mipaka kwenye kontena lake.

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

Sifa maalum za CSS

Kila token huelekeza kwa kigeu cha --clepit-* kilichowekewa mipaka kwenye kontena la kihariri. Unaweza kuzisoma au kuzipanua kutoka kwa laha yako ya mitindo.

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

CSS

#editor {
  color: var(--clepit-text);
  background: var(--clepit-bg);
  --my-surface: var(--clepit-surface-2);
  border: 1px solid var(--clepit-border);
}

styles na classNames kwa kila kizuizi

RendererConfig.styles inapeleka sifa za CSS zisizo na mfumo moja kwa moja kwenye kipengele cha mzizi cha sehemu. RendererConfig.classNames inaongeza madarasa ya ziada ya CSS bila kugusa mitindo iliyojengwa ndani. Vyote vinaweza kuchanganywa.

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 });

Jiandikishe kwa mabadiliko ya tokeni wakati wa utekelezaji. Inafaa kwa kusawazisha UI inayozunguka na mabadiliko ya mandhari ya kihariri.

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();

Kutoa themeOverrides kwa kila upachikaji huruhusu programu ile ile kuwasilisha vihariri vingi vyenye mandhari tofauti kwenye ukurasa mmoja.

Kuanza

Marejeo

API ya Seva

Mwongozo

Mandhari

theme

ThemeTokens

themeOverrides

Sifa maalum za CSS

styles na classNames kwa kila kizuizi