e.stopPropagation()}
onKeyDown={onKeyDown}
>
@@ -166,7 +166,7 @@ export function SearchModal() {
onMouseEnter={() => setActiveIndex(idx)}
className={classNames(
'block border-b border-border-subtle px-4 py-3',
- idx === activeIndex ? 'bg-gray-100' : 'bg-white',
+ idx === activeIndex ? 'bg-gray-100' : 'bg-surface',
)}
>
diff --git a/apps/blog/src/components/theme-toggle.tsx b/apps/blog/src/components/theme-toggle.tsx
new file mode 100644
index 0000000..9009526
--- /dev/null
+++ b/apps/blog/src/components/theme-toggle.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { IconMoon, IconSun } from '@tabler/icons-react';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+
+interface ThemeToggleProps {
+ className?: string;
+}
+
+/**
+ * 라이트/다크 테마 전환 버튼.
+ *
+ * html.dark 클래스와 localStorage를 직접 토글한다. 초기 클래스는 layout 의
+ * 인라인 스크립트가 paint 전에 설정하므로(FOUC 방지), 이 컴포넌트는 마운트 후
+ * 현재 상태를 읽어 아이콘만 맞춘다.
+ */
+export function ThemeToggle({ className }: ThemeToggleProps) {
+ // aria-label(스크린리더 전용)만 상태로 관리한다. 보이는 아이콘은 아래 CSS(dark:)로 토글해
+ // 첫 프레임부터 html.dark와 일치시킨다(아이콘 플래시 없음).
+ const [dark, setDark] = useState(false);
+
+ useEffect(() => {
+ setDark(document.documentElement.classList.contains('dark'));
+ }, []);
+
+ const toggle = () => {
+ const next = !document.documentElement.classList.contains('dark');
+ setDark(next);
+ document.documentElement.classList.toggle('dark', next);
+ try {
+ localStorage.setItem('theme', next ? 'dark' : 'light');
+ } catch {
+ // 프라이빗 모드 등 localStorage 접근이 막힌 환경은 조용히 무시한다.
+ }
+ // giscus 등 외부 위젯이 테마를 따라오도록 전역 이벤트로 알린다.
+ window.dispatchEvent(new CustomEvent('themechange', { detail: next ? 'dark' : 'light' }));
+ };
+
+ return (
+
+ );
+}