Markdown 문서에 다크 모드 적용하기

최근 대다수의 웹사이트 및 코딩 환경에서는 **다크 모드(Dark Mode)**가 필수 요소로 자리 잡았습니다. 마크다운 문서를 다크 모드로 렌더링할 때 가독성을 유지하는 노하우를 소개합니다.

1. 다크 모드 핵심 디자인 원칙

1. 완전한 순검정(#000000) 피하기: 배경을 너무 어두운 순검정 대신 슬레이트 다크 톤(#0f172a, #1e293b)으로 설정하면 눈의 피로도가 감소합니다.
2. 텍스트 명암비(Contrast Ratio): 글자색을 약간의 은은한 밝은 회색(#f8fafc 또는 #e2e8f0)으로 설정하여 대비를 유지합니다.
3. 코드 블록 다크 테마 적용: 코드 블록 배경은 문서 배경보다 약간 더 짙거나 다른 다크 톤으로 구분감을 부여합니다.

2. CSS 변수를 활용한 다크 모드 설정 예시

/* 라이트 모드 기본 */
:root {
  --bg-primary: #ffffff;
  --text-primary: #0f172a;
  --code-bg: #f1f5f9;
}

/* 다크 모드 설정 */
[data-theme="dark"] {
  --bg-primary: #0f172a;
  --text-primary: #f8fafc;
  --code-bg: #1e293b;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

직접 실습해보세요! 편집기에서 직접 실습하기 →