CSS 변수와 다크 모드 테마

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;
}