8. 🌗 CSS 변수(Variables)와 다크모드(Dark Mode) 구현하기

---

이전까지의 CSS는 “하드코딩된 색상과 크기”로 구성되어 있었다.
하지만 지금의 CSS는 변수(Variable) 를 통해
테마 변경, 유지보수, 다크모드 지원까지 손쉽게 구현할 수 있다.

이번 글에서는 CSS 변수의 문법, 실무 활용법,
그리고 다크모드(Dark Mode) 구현까지 단계별로 정리했다.

---

💡 1. CSS 변수(Variable)란?

“반복되는 값을 변수로 선언해 어디서든 재사용할 수 있는 기능”

예전에는 색상이나 폰트 크기를 매번 하드코딩했지만 👇

button { 
  background: #007bff; 
} 

이제는 변수로 선언하고 사용할 수 있다 👇

:root { 
  --primary-color: #007bff; 
} 
 
button { 
  background: var(--primary-color); 
} 

✅ 유지보수가 쉬워지고,
✅ 테마 변경 시 한 곳만 수정해도 전체에 적용된다.

---

🧩 2. 변수 선언과 사용법

구분 문법 예시

선언	--변수이름: 값;	--main-bg: #fff;
사용	var(--변수이름)	background: var(--main-bg);

💡 CSS 변수는 전역(global), 지역(local) 두 방식으로 선언할 수 있다.

:root { 
  --font-size: 16px; 
} 
.card { 
  --font-size: 20px; 
  font-size: var(--font-size); 
} 

✅ :root는 문서 전체에서 사용할 수 있는 전역 변수.
✅ 특정 클래스 안에서는 지역 변수로 덮어쓸 수도 있다.

---

⚙️ 3. 기본값 설정 (Fallback Value)

변수가 없을 때를 대비해 기본값을 지정할 수 있다 👇

p { 
  color: var(--text-color, #333); 
} 

💬 만약 --text-color가 정의되지 않았다면 #333이 대신 적용된다.
→ 유연한 코드 작성 가능.

---

🧱 4. 변수의 계층적 상속

CSS 변수는 상속(inheritance) 된다.
즉, 부모에서 정의한 변수가 자식 요소에도 자동 적용된다.

:root { 
  --main-color: royalblue; 
} 
 
.section { 
  color: var(--main-color); 
} 
 
.section .highlight { 
  background: var(--main-color); 
} 

✅ 한 번만 선언해도 모든 하위 요소에서 동일하게 사용할 수 있다.

---

🧩 5. 자바스크립트로 변수 동적 변경하기

CSS 변수는 JS에서도 제어 가능하다.

document.documentElement.style.setProperty('--main-color', 'crimson'); 

✅ :root에 정의된 --main-color 값이 즉시 변경됨.
💡 이 원리를 이용하면 실시간 테마 변경 기능을 구현할 수 있다.

---

🌞 6. 라이트모드 vs 다크모드 — 기본 구조

:root { 
  --bg-color: #ffffff; 
  --text-color: #111111; 
} 
 
body { 
  background: var(--bg-color); 
  color: var(--text-color); 
} 
 
/* 다크모드 */ 
body.dark { 
  --bg-color: #111111; 
  --text-color: #f5f5f5; 
} 

✅ body에 .dark 클래스만 추가하면 전체 테마가 즉시 전환된다.

document.body.classList.toggle('dark'); 

💬 한 줄로 라이트 ↔ 다크 전환 완성.

---

🧮 7. 다크모드 자동 감지 (prefers-color-scheme)

사용자의 시스템 설정을 자동 감지할 수도 있다 👇

@media (prefers-color-scheme: dark) { 
  :root { 
    --bg-color: #111; 
    --text-color: #fff; 
  } 
} 

✅ macOS, Windows, iOS, Android 모두 지원.
✅ “사용자 설정 우선” UX 실현 가능.

---

⚡ 8. 다크모드 토글 버튼 실전 예제

<button id="themeToggle">🌙 다크모드</button> 

body { 
  background: var(--bg); 
  color: var(--text); 
  transition: background 0.3s, color 0.3s; 
} 
 
:root { 
  --bg: #fff; 
  --text: #000; 
} 
body.dark { 
  --bg: #000; 
  --text: #fff; 
} 

const btn = document.getElementById('themeToggle'); 
btn.addEventListener('click', () => { 
  document.body.classList.toggle('dark'); 
}); 

✅ 클릭 시 배경과 글자색이 부드럽게 전환되는 UX 완성.

---

🎨 9. 다크모드 + 로고 색상 자동 변경

이미지 색상 반전까지 자동화 가능 👇

.logo { 
  filter: invert(0); 
  transition: filter 0.3s; 
} 
 
body.dark .logo { 
  filter: invert(1); 
} 

✅ 흰 배경일 땐 원본 로고,
✅ 검은 배경일 땐 반전된 밝은 로고로 표시.

---

🧠 10. 색상 체계 통합 — 변수 기반 디자인 시스템

변수명 역할 예시

--color-primary	주요 색상	#007bff
--color-secondary	보조 색상	#6c757d
--color-bg	배경 색상	#f8f9fa
--color-text	기본 텍스트	#212529
--color-border	경계선	#dee2e6

💬 이런 방식으로 색상, 폰트, 간격 등을 변수화하면
전체 프로젝트 디자인 일관성을 유지할 수 있다.

---

⚙️ 11. 실무 팁: 변수와 반응형 결합

:root { 
  --font-size: 16px; 
} 
 
@media (max-width: 768px) { 
  :root { 
    --font-size: 14px; 
  } 
} 
 
body { 
  font-size: var(--font-size); 
} 

✅ 브레이크포인트마다 변수값만 바꾸면
전체 폰트 크기가 자동 조정된다.

---

🎯 12. 다크모드 + 시스템 감지 + 수동 토글 완전체 예시

:root { 
  --bg: #fff; 
  --text: #000; 
} 
 
@media (prefers-color-scheme: dark) { 
  :root { 
    --bg: #111; 
    --text: #f5f5f5; 
  } 
} 
 
body { 
  background: var(--bg); 
  color: var(--text); 
  transition: all 0.3s ease; 
} 
 
body.dark { 
  --bg: #000; 
  --text: #fff; 
} 

const toggle = document.getElementById('toggleMode'); 
toggle.addEventListener('click', () => { 
  document.body.classList.toggle('dark'); 
}); 

✅ 기본은 시스템 설정 따름
✅ 유저가 수동 전환 시 즉시 반영

---

🏁 13. 마무리 — “CSS 변수는 디자인의 언어를 코드화한다”

CSS 변수는 단순한 편의 기능이 아니라,
디자인 시스템의 핵심 도구다.
색상, 폰트, 여백, 테마 등 모든 스타일을 구조적으로 관리할 수 있다.

💬 “한 줄의 변수로 웹 전체의 분위기를 바꾼다.”

다음 편에서는
✅ 9. CSS 반투명 효과와 블러 처리(Glassmorphism) 디자인 구현하기
를 통해 요즘 트렌드인 글래스모피즘 디자인을 CSS로 직접 만들어보자.

---