[Web] 다크모드 지원하기

다크모드 특징

눈의 피로감을 덜어주기에 글자가 많거나 컨텐츠 소모시간이 긴 서비스 대부분 다크모드를 지원

밝은 조명 아래에서는 크게 효과를 보진 못하고 오히려 전체적인 가독성을 떨어짐

→ 이러한 장단점으로 인하여 유저에게 선택권을 제공하는게 좋음

 

다크모드 지원 방법

css media query 사용 prefers-color-scheme 

시스템 환경설정 값을 따라가지만, 스마트폰의 절전모드 상태에서는 배터리 소모를 줄이기 위해 시스템이 다크모드를 선택하기도 함

 

한계점

유저에게 선택권을 줄수 없고, 시스템이 컬러 모드 설정을 지원을 안할 경우 대응하기 힘듦

 

다크모드 지원 방법 2

body 또는 최상위 element에 컬러모드 구분자를 설정하여 유저가 선택할 수 있게 개발

 

같이 챙겨야하는 것들

SSR을  지원할경우

→  서버에서 판단해서 html을 작성 후 내려준다

 

CSR에서 판단해야한다면

→ FCP이후에 CSR이 실행되기에 잠깐 화면에 반짝거리는 현상이 일어나기에 유저에게 극도의 불편함을 줄 수 있음. 그래서 브라우저의 렌더링 차단 리소스 특성을 사용

 

https://web.dev/articles/rendering-on-the-web?hl=ko

 

css를 두 벌 짜야하는 번거로움

→ css 변수로 관리

body {
  --bg-color : white;
  --text-color : black;
}
body.dark {
  --bg-color : black;
  --text-color : white;
}
.dark-example {
  background-color: var(--bg-color);
  color: var(--text-color);
}

 

 

https://fe-developers.kakaoent.com/2021/211118-dark-mode/

웹에서 다크모드 지원하기 | 카카오엔터테인먼트 FE 기술블로그