테마
Clepit 테마는 CSS 변수로 구동됩니다. theme: "auto" | "light" | "dark"를 설정하거나 명시적인 themeOverrides를 전달하세요.
theme
TypeScript
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'auto 프리셋은 prefers-color-scheme를 통해 운영 체제의 색 구성표를 따르며 변경 시 실시간으로 전환됩니다.
TypeScript
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
22개 토큰 모두 선택 사항입니다. 생략한 것은 선택된 프리셋으로 대체됩니다.
| 토큰 | 제어 대상 |
|---|---|
| bg | 에디터/렌더러의 기본 배경 |
| surface | 보조 표면: 명령 패널, 모드 바 헤더 |
| surface2 | 3차 표면: 호버 메뉴 배경 |
| text | 기본 텍스트 색상 |
| textMuted | 보조 텍스트: 레이블, 폴백 단락 |
| textSubtle | 은은한 텍스트: 흐릿한 요소, 날짜 마커 |
| border | 기본 테두리 색상 |
| borderSubtle | 은은한 테두리: 비강조 구분선 |
| primary | 기본 브랜드 색상: 버튼, 앵커 링크 |
| primaryHover | 기본 호버 색상: 버튼 hover/focus 상태 |
| primaryBg | 틴트된 기본 배경: 포커스 링 |
| marker | 텍스트 하이라이트 색상: 마커 인라인 도구 |
| selectionBg | 텍스트 선택 배경 |
| blockHighlightBg | 활성 블록 배경 |
| success | 성공 상태 텍스트/아이콘 색상 |
| successBg | 틴트된 성공 배경: 알림 상자 |
| warning | 경고 상태 텍스트/아이콘 색상 |
| warningBg | 틴트된 경고 배경 |
| error | 오류 상태 텍스트/아이콘 색상 |
| errorBg | 틴트된 오류 배경 |
| info | 정보 상태 텍스트/아이콘 색상 |
| infoBg | 틴트된 정보 배경 |
| codeBg | 코드 블록 배경입니다. |
| codeText | 코드 블록 안의 기본 텍스트 색입니다. |
| codeBorder | 코드 블록 테두리입니다. |
| codeGutter | 줄 번호 거터 색입니다. |
| codeSelectionBg | 코드 블록 안 선택된 텍스트의 배경입니다. |
| codeComment | 주석의 구문 색입니다. |
| codeKeyword | 키워드의 구문 색입니다. |
| codeString | 문자열의 구문 색입니다. |
| codeNumber | 숫자의 구문 색입니다. |
| codeFunction | 함수 이름의 구문 색입니다. |
| codeType | 타입 이름의 구문 색입니다. |
| codePunctuation | 문장 부호의 구문 색입니다. |
themeOverrides
토큰의 임의 하위 집합을 재정의하세요. 에디터는 이를 컨테이너로 범위가 지정된 CSS 변수로 주입합니다.
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 사용자 지정 속성
각 토큰은 에디터 컨테이너로 범위가 지정된 --clepit-* 변수에 매핑됩니다. 자신의 스타일시트에서 이를 읽거나 확장할 수 있습니다.
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);
}블록별 styles 및 classNames
RendererConfig.styles는 프레임워크에 독립적인 CSS 속성을 컴포넌트 루트 요소에 직접 전달합니다. RendererConfig.classNames는 내장 스타일을 건드리지 않고 추가 CSS 클래스를 더합니다. 둘 다 함께 사용할 수 있습니다.
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
런타임 토큰 변경을 구독합니다. 주변 UI를 에디터 테마 전환과 동기화하는 데 유용합니다.
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를 제공하면 동일한 앱이 같은 페이지에 서로 다르게 테마가 적용된 여러 에디터를 제공할 수 있습니다.