Dark Mode 색상 관리 효율화: CSS 변수 활용하기

조금 더 편리하게 DarkMode 지원하기

---

Q&A플랫폼은 다크모드를 지원하고 있다. 사용자가 DarkMode 로 설정을 하면 사용자의 브라우저 쿠키에 darkmode 에 true 를 저장한다. 쿠키를 봤을때 true 라면 기본인 styles.css 보다 뒤쪽에 dark.css 를 가져와서 style.css의 background color 나 font color 같은것 들을 어둡게 그리고 글자는 하얀색으로 바꿔버린다. 하지만 개발을 해 나가면서 매번 기능 추가로 인한 css 추가가 될때마다 style.css 에도 dark.css에도 색상코드를 매번 넣어주는 것은 여간 번거로운것이 아니었다. 따라서 색상을 변수화 하기로 했다.

색상의 변수화

---

:root {
	--primary: #4075c9;
	--primary-variant
	--secondary
	--secondary-variant
	--background
	--surface
	--error
	--on-primary
	--on-secondary
	--on-background-h
	--on-background-m 
	--on-background-l
	--on-surface-h 
	--on-surface-m 
	--on-surface-l 
	--hover
	...
}

여기서 변수들도 대게 쓰이는 이름이 있어서 비슷하게 따라 사용을 했다.

1. primary : 주로 쓰이는 색상
2. secondary : 두번째로 주로 쓰이는 색상
3. variant : 그 색상의 비슷한 변형
4. background : 배경 색
5. surface : 배경 앞 표면에 사용되는 색
6. on-background : 배경위의 요소에 사용되는 색
7. on-surface : 표면 요소 등등 아주 많고 앞으로 주요한 색상이 생기면 위에 추가를 할 예정이다.

사용은 아래와 같이 사용하면 된다! 아주 간단하다!

body {
	background-color : var(--background)
}

이렇게 사용하면 장점이 뭘까?

---

우선 dark.css 에도 저렇게 동일하게 변수에 색상코드를 넣어준다. 그럼 다크모드에서 덮어 씌워질 것이다! 그럼 다음에 저 변수를 이용해서 UI를 구성하게 되면 놀랍게도 dark.css 에는 따로 추가할 코드가 없다! 또한 색상이 일관되어 사용자가 보기에 너무 화려하지 않다! (너무 화려하면 사용자가 피곤함을 느낀다고 한다!)

이렇게 추가를 하니 dark.css에 코드들이 상당히 없어졌다! 너무 뿌듯하다!