JAVAPARK Dev v1.3 스킨 — 다크 테마와 라이트/다크 자동 전환

☕ 안녕하세요, 자바파커입니다!

지난 v1.2 업데이트에서 목차와 플로팅 네비게이션을 추가해 드렸는데요, 이번에는 많은 분들이 요청하신 기능을 가져왔습니다.

밤에 블로그를 읽을 때 눈이 아프다는 생각, 해보신 적 있으신가요?

이번 v1.3에서는 다크 테마를 추가했습니다.

---

티스토리 스킨 다크 테마 — 주요 기능

OS 설정 자동 감지

별도 조작 없이 운영체제의 다크 모드 설정을 자동으로 따릅니다. Windows, macOS, iOS, Android 모두 지원합니다.

CSS prefers-color-scheme: dark 미디어 쿼리를 사용하므로, OS에서 다크 모드를 켜면 블로그도 자동으로 전환됩니다.

수동 토글 버튼

헤더 우측에 해/달 아이콘 버튼이 추가되었습니다.

• 라이트 모드: 달 아이콘 표시 (클릭하면 다크로)
• 다크 모드: 해 아이콘 표시 (클릭하면 라이트로)
• 선택한 테마는 localStorage에 저장되어 재방문 시에도 유지

FOUC(깜빡임) 방지

테마 전환 시 흰 화면이 잠깐 보이는 문제(FOUC)를 방지했습니다. 페이지 렌더링 전에 data-theme 속성을 즉시 적용하므로, 다크 모드 사용자도 흰 화면을 보지 않습니다.

---

다크 테마 색상 설계

CSS 변수(Custom Properties) 기반이라, :root의 값만 바뀌면 전체 스킨이 자동으로 전환됩니다.

토큰	라이트	다크	용도
--bg	#ffffff	#0f172a	페이지 배경
--surface	#f8fafc	#1e293b	카드/입력 배경
--border	#e2e8f0	#334155	테두리
--text	#0f172a	#e2e8f0	본문 텍스트
--accent	#0ea5e9	#38bdf8	포인트 컬러
--code-bg	#0f172a	#020617	코드 블록 배경

다크 모드의 accent 색상은 라이트보다 약간 밝은 #38bdf8을 사용합니다. 어두운 배경에서 가독성을 높이기 위한 조정입니다.

---

다크 모드 대응 — 까다로웠던 부분들

솔직히 말하면, CSS 변수만 바꾸면 끝날 줄 알았습니다. 하지만 티스토리는 자체적으로 삽입하는 요소들이 많아서, 하나하나 오버라이드해야 했습니다.

티스토리가 강제하는 인라인 스타일

티스토리 에디터는 글 작성 시 <span style="color:...">이나 <span style="background-color:..."> 같은 인라인 스타일을 자동 삽입합니다. 다크 모드에서는 이것들이 문제가 됩니다.

/* 코드 블록 내부 span의 배경색 제거 */
.entry-content pre *:not(code) {
  background-color: transparent !important;
}

/* 댓글 폼 텍스트 색상 강제 */
[data-theme="dark"] .comments textarea,
[data-theme="dark"] .comments input {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

-webkit-text-fill-color는 브라우저의 인라인 style="color:..." 보다 우선하는 속성이라, 티스토리가 어떤 색상을 강제하든 오버라이드할 수 있습니다.

스프라이트 아이콘 반전

검색 돋보기, 페이지네이션 화살표 등은 PNG 스프라이트 이미지를 사용합니다. 다크 배경에서 검정 아이콘이 안 보이는 문제를 filter: invert()로 해결했습니다.

[data-theme="dark"] #header .search button,
[data-theme="dark"] #header .search:before,
[data-theme="dark"] .pagination .prev,
[data-theme="dark"] .pagination .next {
  filter: invert(0.8);
}

댓글 영역

티스토리 로그인 상태 댓글 폼은 스킨의 HTML이 아닌 플랫폼이 삽입하는 요소입니다. 클래스명도 .tt-area-write, .tt-btn-submit 등 별도 체계를 사용해서, 광범위한 셀렉터로 대응해야 했습니다.

---

Claude Code와의 다크 테마 구현 과정

이번에도 Claude Code와 대화하며 작업했습니다.

1. "다크 테마도 있으면 좋겠네요" → CSS 변수 + 토글 버튼 구현
2. 댓글 영역 하얀 배경 → 프로필 카드, 댓글 폼 오버라이드 추가
3. 코드 블록 내 텍스트 배경 → pre *:not(code) 투명 처리
4. 입력 텍스트 안 보임 → -webkit-text-fill-color 강제
5. 검색 아이콘 안 보임 → filter: invert() 적용
6. 댓글창 배경색 → 페이지 배경과 통일

한 번에 완벽하게 되지 않았습니다. 실제 블로그에 적용하고, 스크린샷을 보면서 하나씩 수정했습니다. 티스토리 플랫폼이 삽입하는 요소들은 개발자 도구로 직접 확인해야 하는 부분이 많았습니다.

---

JAVAPARK Dev 스킨 다운로드 (v1.3)

이 블로그에 적용된 JAVAPARK Dev 스킨을 공개합니다. 자유롭게 다운로드해서 사용하세요.

JAVAPARK Dev v1.3.zip

807.3 kB

파일	설명
skin.html	HTML 구조 (테마 토글 버튼 추가)
style.css	전체 CSS (~3,500줄, 다크 테마 포함)
images/script.js	JavaScript (테마 토글 + TOC + 메뉴 + View More)

3개 파일 모두 교체해야 v1.3의 모든 기능이 동작합니다.

적용 방법

1. 티스토리 관리 > 꾸미기 > 스킨 편집 클릭
2. html 편집 버튼 클릭
3. HTML 탭에 skin.html 내용을 붙여넣기
4. CSS 탭에 style.css 내용을 붙여넣기
5. 파일업로드 탭에서 images/script.js를 업로드
6. 적용 클릭

---

버전 히스토리

버전	날짜	주요 변경
v1.0	2025-03	최초 공개 — CSS 전면 재작성, 디자인 토큰, 코드 블록 스타일링
v1.2	2026-03	목차 자동 생성, 플로팅 네비게이션, 모바일 Bottom Sheet, JavaScript 추가
v1.3	2026-03	다크 테마, 라이트/다크 자동 전환, 토글 버튼, 댓글/프로필 다크 대응, 스크롤바 다크 대응

---

자주 묻는 질문 (FAQ)

다크 모드가 자동으로 안 바뀌는데요?

OS의 다크 모드 설정을 확인해 주세요. 이전에 수동으로 테마를 전환한 적이 있다면 localStorage에 선택이 저장되어 있어서 OS 설정보다 우선합니다. 브라우저의 localStorage를 지우면 다시 OS 설정을 따릅니다.

다크 모드에서 특정 요소가 하얗게 보여요

티스토리 플랫폼이 삽입하는 요소(광고, 관리자 위젯 등)는 스킨 CSS로 제어할 수 없는 경우가 있습니다. 발견하시면 댓글로 알려주세요. 오버라이드 룰을 추가하겠습니다.

커스터마이징한 accent 색상이 다크 모드에서도 적용되나요?

:root의 --accent를 변경하셨다면 [data-theme="dark"] 블록에서도 동일하게 (밝기만 조정하여) 변경해 주세요. 다크 모드에서는 라이트보다 약간 밝은 색상이 가독성에 좋습니다.

---

이번 업데이트로 낮에도 밤에도 편하게 읽을 수 있는 블로그가 되었습니다.

여러분은 다크 모드 파인가요, 라이트 모드 파인가요? 댓글로 알려주세요!

---

참고 자료

• prefers-color-scheme (MDN) — OS 다크 모드 감지
• CSS Custom Properties (MDN) — CSS 변수 기반 테마 전환
• -webkit-text-fill-color (MDN) — 인라인 스타일 오버라이드
• 스킨 v1.2 포스팅 — 이전 버전 소개