Skip to content

다크 모드 ​

getInitialTheme()이 localStorage에 저장된 값을 먼저 확인하고, 없으면 prefers-color-scheme: dark 미디어쿼리로 시스템 설정을 읽어옵니다. 선택된 테마는 document.documentElement.dataset.theme에 반영되며, base.css의 [data-theme="dark"] 선택자가 같은 이름의 CSS 변수를 다른 값으로 덮어써서 색상 전체가 한 번에 바뀝니다. 토글 시마다 localStorage.setItem('theme', ...)으로 값을 저장해 새로고침 후에도 유지됩니다.

출처: Codyssey-B1/B1-1