CSS 변수 정의
공통 스타일에서 색상, 글자 크기 등을 변수로 관리

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --primary-color: #1e90ff;
}
body {
  background: var(--bg-color);
  color: var(--text-color);
}

다크 모드 지원
시스템 설정을 감지해 다크 모드 적용

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #f0f0f0;
    --primary-color: #90caf9;
  }
}

토글 버튼으로 테마 변경
사용자가 직접 테마 선택 가능

<button id="theme-toggle">다크 모드</button>
<script>
document.getElementById('theme-toggle').addEventListener('click', () => {
  document.documentElement.classList.toggle('dark');
});
</script>

.dark {
  --bg-color: #121212;
  --text-color: #f0f0f0;
  --primary-color: #90caf9;
}