Mga Tema
Ang mga tema ng Clepit ay pinapagana ng CSS variables. Itakda ang theme: "auto" | "light" | "dark", o magpasa ng tahasang themeOverrides.
theme
TypeScript
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'Sinusunod ng auto preset ang colour scheme ng operating system sa pamamagitan ng prefers-color-scheme at lumilipat nang live kapag nagbago.
TypeScript
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
Opsyonal ang lahat ng 22 token. Anumang iyong tanggalin ay babalik sa napiling preset.
| Token | Kinokontrol |
|---|---|
| bg | Pangunahing background ng editor / renderer |
| surface | Pangalawang surface: mga command panel, mode-bar header |
| surface2 | Pangatlong surface: mga background ng hover-menu |
| text | Pangunahing kulay ng teksto |
| textMuted | Secondary text: mga label, fallback na talata |
| textSubtle | Subtle text: mga madilim na elemento, mga marker ng petsa |
| border | Pangunahing kulay ng border |
| borderSubtle | Subtle border: mga divider na hindi emphasis |
| primary | Primary na kulay ng brand: mga button, anchor link |
| primaryHover | Primary hover colour: hover/focus state ng button |
| primaryBg | May-kulay na primary background: focus rings |
| marker | Kulay ng text highlight: marker inline tool |
| selectionBg | Background ng text selection |
| blockHighlightBg | Background ng aktibong block |
| success | Kulay ng text/icon ng success state |
| successBg | May-kulay na background ng success: mga notification box |
| warning | Kulay ng text/icon ng warning state |
| warningBg | May-kulay na background ng babala |
| error | Kulay ng text/icon ng error state |
| errorBg | May-kulay na background ng error |
| info | Kulay ng text/icon ng info state |
| infoBg | May-kulay na background ng info |
| codeBg | Background ng code block. |
| codeText | Default na kulay ng teksto sa loob ng code blocks. |
| codeBorder | Border ng code block. |
| codeGutter | Kulay ng gutter ng line number. |
| codeSelectionBg | Background ng napiling teksto sa loob ng code blocks. |
| codeComment | Kulay ng syntax para sa mga komento. |
| codeKeyword | Kulay ng syntax para sa mga keyword. |
| codeString | Kulay ng syntax para sa mga string. |
| codeNumber | Kulay ng syntax para sa mga numero. |
| codeFunction | Kulay ng syntax para sa mga pangalan ng function. |
| codeType | Kulay ng syntax para sa mga pangalan ng type. |
| codePunctuation | Kulay ng syntax para sa punctuation. |
themeOverrides
I-override ang anumang subset ng token. Ini-inject ng editor ang mga ito bilang CSS variable na naka-scope sa container nito.
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 custom properties
Ang bawat token ay nagma-map sa isang --clepit-* variable na naka-scope sa editor container. Maaari mong basahin o palawigin ang mga ito mula sa sarili mong stylesheet.
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-punctuationCSS
#editor {
color: var(--clepit-text);
background: var(--clepit-bg);
--my-surface: var(--clepit-surface-2);
border: 1px solid var(--clepit-border);
}Per-block styles at classNames
Ang RendererConfig.styles ay nagpapasa ng framework-free CSS properties direkta sa root element ng component. Ang RendererConfig.classNames ay nagdadagdag ng dagdag na CSS classes nang hindi tinatawagan ang mga built-in na estilo. Maaaring pagsamahin ang dalawa.
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
Mag-subscribe sa mga pagbabago ng runtime token. Kapaki-pakinabang para i-sync ang nakapaligid na UI sa mga pagpalit ng editor theme.
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();Ang pagbibigay ng themeOverrides bawat mount ay nagbibigay-daan sa parehong app na maghatid ng maraming editor na may magkakaibang tema sa parehong pahina.