Chủ đề
Chủ đề Clepit được điều khiển bằng biến CSS. Đặt theme: "auto" | "light" | "dark", hoặc truyền themeOverrides rõ ràng.
theme
// EditorConfig / RendererConfig
theme?: 'auto' | 'light' | 'dark'Preset auto theo bảng màu của hệ điều hành thông qua prefers-color-scheme và chuyển đổi trực tiếp khi thay đổi.
import { Editor } from '@clepit/core';
Editor.create({ containerId: 'editor', theme: 'auto' });ThemeTokens
Tất cả 22 token đều là tùy chọn. Bất cứ thứ gì bạn bỏ qua sẽ quay về preset đã chọn.
| Token | Kiểm soát |
|---|---|
| bg | Nền chính của trình soạn thảo / bộ kết xuất |
| surface | Bề mặt thứ cấp: bảng lệnh, tiêu đề thanh chế độ |
| surface2 | Bề mặt cấp ba: nền menu hover |
| text | Màu văn bản chính |
| textMuted | Văn bản thứ cấp: nhãn, đoạn văn dự phòng |
| textSubtle | Văn bản nhẹ: phần tử mờ, dấu ngày tháng |
| border | Màu viền chính |
| borderSubtle | Viền nhẹ: đường phân cách không nhấn mạnh |
| primary | Màu thương hiệu chính: nút, liên kết neo |
| primaryHover | Màu hover chính: trạng thái hover/focus của nút |
| primaryBg | Nền chính có sắc: vòng focus |
| marker | Màu tô sáng văn bản: công cụ nội tuyến marker |
| selectionBg | Nền vùng chọn văn bản |
| blockHighlightBg | Nền khối đang hoạt động |
| success | Màu văn bản/biểu tượng trạng thái thành công |
| successBg | Nền thành công có sắc: hộp thông báo |
| warning | Màu văn bản/biểu tượng trạng thái cảnh báo |
| warningBg | Nền cảnh báo có sắc |
| error | Màu văn bản/biểu tượng trạng thái lỗi |
| errorBg | Nền lỗi có sắc |
| info | Màu văn bản/biểu tượng trạng thái thông tin |
| infoBg | Nền thông tin có sắc |
themeOverrides
Ghi đè bất kỳ tập hợp con token nào. Trình soạn thảo chèn chúng dưới dạng biến CSS giới hạn trong vùng chứa của nó.
// 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)',
},
},
});Thuộc tính CSS tùy chỉnh
Mỗi token ánh xạ tới một biến --clepit-* giới hạn trong vùng chứa trình soạn thảo. Bạn có thể đọc hoặc mở rộng chúng từ stylesheet của riêng mình.
/* 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#editor {
color: var(--clepit-text);
background: var(--clepit-bg);
--my-surface: var(--clepit-surface-2);
border: 1px solid var(--clepit-border);
}styles và classNames theo từng khối
RendererConfig.styles dẫn các thuộc tính CSS không phụ thuộc framework trực tiếp vào phần tử gốc của component. RendererConfig.classNames thêm các lớp CSS bổ sung mà không ảnh hưởng đến các kiểu dáng tích hợp. Cả hai có thể kết hợp.
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
Đăng ký theo dõi các thay đổi token tại thời gian chạy. Hữu ích để đồng bộ giao diện xung quanh với các lần chuyển đổi chủ đề của trình soạn thảo.
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();