Newtil Editor

Appearance

테마 ​

스타일은 Shadow DOM 안에 자동으로 들어간다(0.4.1+). 빌드 때 scripts/build-styles.mjs 가 다음을 한 덩어리로 묶는다.

순서내용
1@newtil/design-tokens 의 dist/tokens.css — :root → :host 로 치환해 호스트 요소에 변수를 정의
2@newtil/components 의 dist/index.css — reset + .n-prose 등(n- 접두사 기본 컴포넌트)
3prosemirror-view 의 prosemirror.css
4highlight.js github-dark — 코드 블록 구문 색
5src/styles.css — 토큰 없이도 깨지지 않는 하드코딩 기본값
6themes/newtil.css — 토큰 변수로 기본값을 덮어쓰는 테마

따로 import 할 CSS 는 없다. @newtil/editor/themes/newtil 엔트리는 호환용으로 남아 있을 뿐이다.

색 넘기기 ​

CSS 변수는 Shadow 경계를 넘어 상속된다. 호스트 요소에 주면 편집기 안이 따라간다.

css
newtil-editor {
  --color-primary: #16a34a;          /* 포커스 테두리, 링크, 눌린 버튼, 폭 손잡이 */
  --color-primary-subtle: #dcfce7;   /* 눌린 버튼 배경 */
}
편집기 요소CSS 변수fallback
글자--color-text#1a1a1a
배경--color-surface#fff
테두리--color-border#e0e0e0
편집기 모서리--radius-38px
인라인 코드 모서리--radius-23px
링크·포커스·눌린 버튼·폭 손잡이·드롭 표시선--color-primary#4a90e2
눌린 버튼 배경--color-primary-subtle#dbeafe
인용구 글자·플레이스홀더·툴바 버튼·드래그 핸들--color-text-muted#555 / #9ca3af
인라인 코드 배경·상단 툴바 배경·표 머리칸--color-surface-2#f4f4f4 / #f8f9fa
툴바 버튼 hover--color-surface-3—
제목 크기--font-size-heading-lg/md/sm1.875em/1.5em/1.25em
본문 크기--font-size-body1rem

전체 목록은 API › CSS 변수.

코드 블록 색 ​

코드 블록은 하이라이트 색이 읽히도록 두 테마 모두 어두운 상자다(0.10.4). 호스트가 세 변수로 바꾼다. 기본값은 토큰 --color-code-bg/fg/border 를 따른다.

css
newtil-editor {
  --newtil-code-bg: #0f172a;
  --newtil-code-fg: #e2e8f0;
  --newtil-code-border: #334155;
}

다크 모드 ​

<html data-theme="dark">(또는 "light") 가 있으면 호스트의 data-theme 에 같은 값을 동기화해 따라간다(MutationObserver 로 즉시 반영). 없으면 prefers-color-scheme 을 본다. 변수 값 전환은 design-tokens 가 한다.

높이 ​

호스트는 display: flex; flex-direction: column 이라 min-height 를 주면 편집 영역이 그 높이를 채운다. 호스트의 display 를 block 으로 덮으면 편집 영역이 높이를 못 채우니 그대로 둔다.

css
newtil-editor { min-height: 420px; }

편집과 보기를 같게 ​

편집 영역에는 .n-prose 클래스가 붙어 있다. 보기 화면도 <div class="n-prose"> 로 감싸 @newtil/components 의 같은 규칙을 받으면 쓰는 모습과 읽는 모습이 같다. 정렬·테두리(0.10.9)는 같은 속성 이름으로 CSS 를 두면 된다: .n-prose div[align], .n-prose [data-border], .n-prose img[align].

좁은 화면 ​

640px 이하에서는 드래그 핸들을 숨기고 안쪽 여백을 12px 로 줄이며, 상단 툴바를 화면 위에 붙이고(sticky) 넘치면 가로 스크롤로 한 줄을 유지한다.

Copyright © 2026 Newlecture