다크 모드

Renderer 컴포넌트에 다크 모드가 내장되어 있습니다.

사용법


<Renderer blocks={blocks} isDarkMode={true} />

동작 방식

isDarkMode가 true이면 Renderer가 루트 컨테이너에 dark CSS 클래스를 적용합니다. 모든 블록 컴포넌트의 스타일이 자동으로 조정됩니다 — 텍스트 색상, 배경, 테두리, 코드 블록 모두 다크 테마에 맞게 변경됩니다.

테마 시스템과 연동

isDarkMode는 단순한 boolean prop이므로 어떤 테마 시스템과도 연동할 수 있습니다:

PostRenderer.tsx


'use client';
 
import { useState } from 'react';
import { Renderer } from 'notion-to-jsx';
 
export default function PostRenderer({ blocks }) {
  const [isDarkMode, setIsDarkMode] = useState(false);
 
  return (
    <div style={{ backgroundColor: isDarkMode ? '#0d1117' : '#fff' }}>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        {isDarkMode ? 'Light' : 'Dark'}
      </button>
      <Renderer blocks={blocks} isDarkMode={isDarkMode} />
    </div>
  );
}

기본값

isDarkMode의 기본값은 false (라이트 모드)입니다.