"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {ProseAnatomyDemo, ThemeSignalMatrixDemo} = _components; if (!ProseAnatomyDemo) _missingMdxReference("ProseAnatomyDemo", true); if (!ThemeSignalMatrixDemo) _missingMdxReference("ThemeSignalMatrixDemo", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "이번 건 다른 프로젝트가 아니라 지금 읽고 있는 이 블로그에서 터진 문제다. 다크 모드에서는 멀쩡하던 포스트 본문이, 라이트 모드로 토글하는 순간 흰 배경 위의 흰 글씨가 됐다. 마크다운 렌더링에는 흔한 조합을 쓰고 있었다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// MDXPreview.tsx\n

\n ...\n

\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "@tailwindcss/typography" }), "의 prose가 본문 스타일을 깔고, 다크 모드에서는 ", _jsx(_components.code, { children: "dark:prose-invert" }), "가 색을 뒤집는다. 문서에 나오는 표준 사용법 그대로인데 왜 깨졌을까."] }), "\n", _jsx(_components.h2, { id: "dark는-신호를-기다리고-있었다", children: "dark:는 신호를 기다리고 있었다" }), "\n", _jsxs(_components.p, { children: ["Tailwind의 ", _jsx(_components.code, { children: "dark:" }), " variant는 두 가지 신호 중 하나로 발동한다. media 모드면 OS의 ", _jsx(_components.code, { children: "prefers-color-scheme" }), "을 보고, selector 모드면 조상에 ", _jsx(_components.code, { children: ".dark" }), " 클래스가 있는지 본다."] }), "\n", _jsxs(_components.p, { children: ["그런데 이 블로그의 테마 시스템은 둘 다 보내지 않는다. ", _jsxs(_components.strong, { children: ["다크가 기본이라 클래스가 없고, 라이트 모드일 때만 ", _jsx(_components.code, { children: "" }), "에 ", _jsx(_components.code, { children: ".light" }), "가 붙는 구조"] }), "이기 때문이다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// 다크 모드 (기본)\n...\n\n// 라이트 모드\n...\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: ".dark" }), "라는 클래스는 이 DOM에 영원히 등장하지 않는다. 즉 ", _jsx(_components.code, { children: "dark:prose-invert" }), "는 어떤 조건에서도 발동하지 않는 죽은 코드였고, prose는 한 가지 색 세트로 고정된 채 배경만 토글되고 있었다. 전략별로 무슨 일이 일어나는지 직접 확인해보자."] }), "\n", _jsx(ThemeSignalMatrixDemo, {}), "\n", _jsxs(_components.p, { children: ["selector 모드는 오지 않을 ", _jsx(_components.code, { children: ".dark" }), "를 기다리고, media 모드는 한술 더 떠서 ", _jsx(_components.strong, { children: "사이트 토글이 아니라 OS 설정을 따라간다." }), " OS는 다크인데 사이트는 라이트인 조합에서 invert가 발동해 또 다른 안 보임이 생긴다. 동작하는 건 테마 시스템의 신호(", _jsx(_components.code, { children: ".light" }), ")를 직접 받는 세 번째 전략뿐이다."] }), "\n", _jsxs(_components.p, { children: ["정리하면 원인은 플러그인의 버그가 아니라 신호 체계의 불일치다. ", _jsx(_components.code, { children: "dark:" }), " variant는 Tailwind가 정한 두 신호의 약속이고, 커스텀 테마 시스템은 제3의 신호를 쓰고 있었다."] }), "\n", _jsx(_components.h2, { id: "막다른-시도들", children: "막다른 시도들" }), "\n", _jsx(_components.p, { children: "답을 찾기 전에 두 가지 경로를 먼저 갔다." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "CSS 변수 참조." }), " 테마 토큰을 그대로 잇는 게 정석처럼 보였다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: ".prose {\n --tw-prose-body: var(--foreground);\n --tw-prose-headings: var(--foreground);\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["이론적으로 맞는 방향인데, 이 프로젝트에서는 일부 컨텍스트에서 값이 비어 들어왔다. Tailwind v4의 ", _jsx(_components.code, { children: "@layer" }), " 순서와 테마 변수가 정의되는 위치가 얽히면서 prose 스코프에서 참조가 어긋난 것으로 보이는데, 원인 추적보다 우회가 싸다고 판단했다."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "일부만 하드코딩." }), " body 색만 두 모드로 박아 넣었더니 본문은 살아났는데 이번에는 다크 모드 쪽 다른 요소들이 깨졌다. 이게 중요한 단서였다. prose는 색 하나가 아니라 ", _jsx(_components.strong, { children: "변수 16개로 이루어진 세트" }), "라서, 일부만 손대면 세트 내부의 정합이 무너진다."] }), "\n", _jsx(_components.h2, { id: "해결-변수-세트-전체를-두-상태로-재정의", children: "해결: 변수 세트 전체를 두 상태로 재정의" }), "\n", _jsxs(_components.p, { children: ["최종 답은 prose가 쓰는 CSS 변수 전체를 우리 테마 시스템의 두 상태에 맞춰 명시하는 것이다. 기본 셀렉터가 다크 값을, ", _jsx(_components.code, { children: ".light" }), " 셀렉터가 라이트 값을 갖는다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: "/* globals.css: 다크 (기본) */\n.prose {\n --tw-prose-body: #fafafa;\n --tw-prose-headings: #fafafa;\n --tw-prose-lead: #a1a1a1;\n --tw-prose-links: #fafafa;\n --tw-prose-bold: #fafafa;\n --tw-prose-counters: #a1a1a1;\n --tw-prose-bullets: #a1a1a1;\n --tw-prose-hr: rgba(255, 255, 255, 0.1);\n --tw-prose-quotes: #fafafa;\n --tw-prose-quote-borders: rgba(255, 255, 255, 0.1);\n --tw-prose-captions: #a1a1a1;\n --tw-prose-code: #fafafa;\n --tw-prose-pre-code: #fafafa;\n --tw-prose-pre-bg: #161616;\n --tw-prose-th-borders: rgba(255, 255, 255, 0.1);\n --tw-prose-td-borders: rgba(255, 255, 255, 0.1);\n}\n\n/* 라이트 */\n.light .prose {\n --tw-prose-body: #0a0a0a;\n --tw-prose-headings: #0a0a0a;\n --tw-prose-lead: #737373;\n /* ...같은 16개를 라이트 값으로 */\n}\n" }) }), "\n", _jsx(_components.p, { children: "컴포넌트 쪽에서는 variant 의존을 걷어낸다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// Before\n

\n\n// After\n

\n" }) }), "\n", _jsx(_components.p, { children: "각 변수가 문서의 어느 부위를 칠하는지, 그리고 전체가 아니라 일부만 재정의하면 어떻게 되는지 만져보면 이렇다." }), "\n", _jsx(ProseAnatomyDemo, {}), "\n", _jsxs(_components.p, { children: ["라이트 모드에서 \"body/headings만 재정의\"로 바꿔보면 부분 수정의 증상이 그대로 나온다. 본문 글자는 읽히는데 코드 블록은 다크 배경인 채 떠 있고, 흰색 계열이던 구분선과 인용 테두리는 흰 바탕에 녹아 사라진다. prose 변수는 세트로 설계되어 있어서 ", _jsx(_components.strong, { children: "전부 옮기거나 전부 두거나" }), "가 안전하고, 절반만 옮기는 순간 두 테마의 조각이 한 화면에 섞인다."] }), "\n", _jsx(_components.h2, { id: "하드코딩이라는-선택의-값", children: "하드코딩이라는 선택의 값" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "var(--foreground)" }), " 참조가 됐다면 테마 색을 바꿀 때 자동으로 따라오는 구조가 됐을 것이다. 하드코딩을 고른 건 그 우아함보다 확실함이 필요했기 때문인데, 공짜는 아니다. 색의 원본이 테마 파일과 globals.css 두 곳이 됐고, 팔레트를 바꾸면 둘을 같이 고쳐야 한다. 대신 두 곳을 잇는 주석을 남기고, 어차피 자주 바뀌지 않는 기반 색이라는 점으로 비용을 받아들였다. 변수 참조가 정상 동작하는 프로젝트라면 참조 방식이 먼저다."] }), "\n", _jsxs(_components.p, { children: ["디버깅 동선도 남겨둔다. 이런 부류의 문제는 DevTools에서 ", _jsx(_components.code, { children: ".prose" }), " 요소를 선택하고 Computed 탭에 ", _jsx(_components.code, { children: "--tw-prose" }), "로 필터를 걸면 빠르다. 어떤 변수가 어떤 값으로 계산됐는지, Styles 탭의 취소선으로 누가 누구를 덮었는지가 한 번에 보인다."] }), "\n", _jsx(_components.h2, { id: "같은-함정은-반복된다", children: "같은 함정은 반복된다" }), "\n", _jsxs(_components.p, { children: ["이 문제를 정리하고도 같은 불일치를 한 번 더 만났다. 나중에 Lab 섹션의 데모 컴포넌트를 만들면서 무심코 ", _jsx(_components.code, { children: "dark:" }), " variant를 썼는데, 당연히 토글에 반응하지 않았다. 테마 시스템의 신호 체계는 프로젝트 전체의 전제라서, 한 번 어긋난 가정은 새 코드를 쓸 때마다 다시 찾아온다. 이후로는 \"이 프로젝트에서 모드 분기는 다크 기본 + ", _jsx(_components.code, { children: ".light" }), " 분기\"를 컨벤션 문서에 박아두는 것으로 마무리했다."] }), "\n", _jsx(_components.h2, { id: "핵심-정리", children: "핵심 정리" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "dark:" }), " variant는 media(OS) 또는 ", _jsx(_components.code, { children: ".dark" }), " 클래스라는 정해진 신호로만 발동한다. 다크 기본 + ", _jsx(_components.code, { children: ".light" }), " 클래스 시스템에서는 영원히 죽은 코드다"] }), "\n", _jsx(_components.li, { children: "media 모드는 사이트 토글이 아니라 OS를 따라가므로, 자체 토글이 있는 사이트에서는 그 자체로 불일치 원인이 된다" }), "\n", _jsxs(_components.li, { children: ["prose는 변수 16개의 세트다. 일부만 재정의하면 두 테마의 조각이 섞인다. 기본 셀렉터와 ", _jsx(_components.code, { children: ".light" }), " 셀렉터에서 세트 전체를 재정의한다"] }), "\n", _jsx(_components.li, { children: "변수 참조가 정석이지만 동작하지 않는 환경이라면, 하드코딩은 색 원본이 두 곳이 되는 비용을 받아들이는 명시적 선택이다" }), "\n", _jsx(_components.li, { children: "플러그인을 들일 때는 그 플러그인이 가정하는 테마 신호가 내 시스템과 같은지부터 본다. 어긋난 가정은 새 코드마다 반복된다" }), "\n"] }), "\n", _jsx(_components.h2, { id: "references", children: "References" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/tailwindlabs/tailwindcss-typography", children: "Tailwind CSS: Typography plugin" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://tailwindcss.com/docs/dark-mode", children: "Tailwind CSS: Dark mode" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties", children: "MDN: Using CSS custom properties" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }