Tema
Tema Clepit digerakkan oleh variabel CSS. Setel theme: "auto" | "light" | "dark", atau berikan themeOverrides eksplisit.
theme
TypeScript
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'Preset auto mengikuti skema warna sistem operasi melalui prefers-color-scheme dan beralih secara langsung saat berubah.
TypeScript
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
Semua 22 token bersifat opsional. Apa pun yang Anda hilangkan akan kembali ke preset yang dipilih.
| Token | Mengontrol |
|---|---|
| bg | Latar belakang utama editor / renderer |
| surface | Permukaan sekunder: panel perintah, header mode-bar |
| surface2 | Permukaan tersier: latar belakang menu hover |
| text | Warna teks utama |
| textMuted | Teks sekunder: label, paragraf fallback |
| textSubtle | Teks subtle: elemen redup, penanda tanggal |
| border | Warna border utama |
| borderSubtle | Border subtle: pembagi non-penekanan |
| primary | Warna brand utama: tombol, tautan jangkar |
| primaryHover | Warna hover primer: status hover/focus tombol |
| primaryBg | Latar belakang primer bertint: focus ring |
| marker | Warna highlight teks: alat inline marker |
| selectionBg | Latar belakang seleksi teks |
| blockHighlightBg | Latar belakang blok aktif |
| success | Warna teks/ikon status sukses |
| successBg | Latar belakang sukses bertint: kotak notifikasi |
| warning | Warna teks/ikon status peringatan |
| warningBg | Latar belakang peringatan bertint |
| error | Warna teks/ikon status error |
| errorBg | Latar belakang error bertint |
| info | Warna teks/ikon status info |
| infoBg | Latar belakang info bertint |
themeOverrides
Timpa subset token apa pun. Editor menyuntikkannya sebagai variabel CSS yang dicakup ke kontainernya.
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)',
},
},
});Properti kustom CSS
Setiap token dipetakan ke variabel --clepit-* yang dicakup ke kontainer editor. Anda dapat membacanya atau memperluasnya dari stylesheet Anda sendiri.
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-bgCSS
#editor {
color: var(--clepit-text);
background: var(--clepit-bg);
--my-surface: var(--clepit-surface-2);
border: 1px solid var(--clepit-border);
}styles dan classNames per blok
RendererConfig.styles menyalurkan properti CSS yang bebas framework langsung ke elemen root komponen. RendererConfig.classNames menambahkan kelas CSS tambahan tanpa menyentuh gaya bawaan. Keduanya dapat dikombinasikan.
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
Berlangganan perubahan token runtime. Berguna untuk menyinkronkan UI di sekitar dengan pergantian tema editor.
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();Memberikan themeOverrides per mount memungkinkan aplikasi yang sama menampilkan beberapa editor dengan tema berbeda di halaman yang sama.