구(舊) 다크 모드 - Astro
구(舊) 다크 모드 - Astro
Astro 앱에 다크 모드를 추가하는 방법을 단계별로 알려드릴게요. 테마를 다루는 핵심은 페이지가 로드되기 전에 스크립트로 html 요소의 클래스를 미리 결정하는 거예요. 이렇게 하면 첫 화면이 깜빡이는 현상(flash)도 막을 수 있어요.
출처: 문서
본문
Astro에서 다크 모드를 적용하는 흐름을 차근차근 따라가 볼게요.
인라인 테마 스크립트 만들기
브라우저에 저장된 테마 값이나 시스템 환경설정을 읽어서 html 요소에 dark 클래스를 붙이거나 떼는 인라인 스크립트를 만들어요. 이 스크립트는 페이지가 렌더링되기 전에 실행돼야 하므로 is:inline 속성으로 직접 삽입해요.
---
import '../styles/globals.css'
---
<script is:inline>
const getThemePreference = () => {
if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
return localStorage.getItem('theme');
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const isDark = getThemePreference() === 'dark';
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
if (typeof localStorage !== 'undefined') {
const observer = new MutationObserver(() => {
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
}
</script>
<html lang="en">
<body>
<h1>Astro</h1>
</body>
</html>
여기서 눈여겨볼 점은 MutationObserver예요. 사용자가 테마를 바꿔서 html의 클래스가 변하면, 그 변경을 감지해서 localStorage에 다시 저장해주는 역할을 해요. 이렇게 해야 새로고침해도 사용자가 선택한 테마가 유지돼요.
모드 토글 추가하기
이제 사용자가 라이트/다크/시스템 테마를 직접 선택할 수 있도록 토글 컴포넌트를 만들어요. lucide-react의 해/달 아이콘과 DropdownMenu를 조합해서 만들 수 있어요.
import * as React from "react"
import { Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
export function ModeToggle() {
const [theme, setThemeState] = React.useState<
"theme-light" | "dark" | "system"
>("theme-light")
React.useEffect(() => {
const isDarkMode = document.documentElement.classList.contains("dark")
setThemeState(isDarkMode ? "dark" : "theme-light")
}, [])
React.useEffect(() => {
const isDark =
theme === "dark" ||
(theme === "system" &&
window.matchMedia("(prefers-color-scheme: dark)").matches)
document.documentElement.classList[isDark ? "add" : "remove"]("dark")
}, [theme])
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" size="icon">
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span className="sr-only">Toggle theme</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => setThemeState("theme-light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setThemeState("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setThemeState("system")}>
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}
모드 토글 표시하기
만든 토글을 사이트에 배치해서 라이트 모드와 다크 모드를 오갈 수 있게 해요. 아래처럼 index.astro에 ModeToggle 컴포넌트를 불러와서 배치하면 돼요.
---
import '../styles/globals.css'
import { ModeToggle } from '@/components/ModeToggle';
---
<!-- Inline script -->
<html lang="en">
<body>
<h1>Astro</h1>
<ModeToggle client:load />
</body>
</html>
client:load는 컴포넌트를 클라이언트에서 바로 하이드레이션하라는 지시어예요. 토글 같은 상호작용 컴포넌트에는 이렇게 붙여주면 즉시 동작해요.