쉽게 블로그 다크 모드 적용하기

- 다른 블로그들의 경우 background-color 가 black인 경우가 있다. 보통 시각장애인을 위해서 검은 배경과 흰 글자는 가독성을 높이기 때문에 많이 이용되는 것 같다. 그리고 흰 배경은 블루스크린으로 인해 눈이 피로해지는 경우가 있다.

적용 전(좌)과 적용 후(우)

소스코드

아래의 두가지 코드들 중 하나를 넣으면 적용이 됩니다. 

HTML

<!-- 블로그 화면 다크모드 적용 -->
<meta name="color-scheme" content="light dark">

CSS

:root {
  color-scheme: dark;
}

---

후기

네이버 웨일의 경우 다크모드를 독립적으로 적용했다가 풀고 하는 기능이 있는데, 네이버 웨일의 기능의 경우엔 텍스트의 색상이 반전되면서도 위계가 뒤집히지는 않았는데 소스코드를 적용했을 땐 font color의 위계가 뒤집혀서 연한 글자가 진해지고 진한 글자가 연해지는 현상이 보였다. 

 

해결하고픈 마음이 생겨서 가볍게 찾아본 결과.. 브라우저마다 약간의 엔진 차이로 인해서 생기는 차이점도 있고, 블로그 안에 들어가는 요소들이 많아서 contrast 값이 적절하면 좋지만 불편하다면 너무 코드들의 가독성이 떨어지고 복잡해 보일 것 같아서 보류하기로 했다.

 

나중에 한번 버튼을 통해 다크모드를 자유롭게 껐다 킬 수 있는 기능을 블로그에 적용해주고 싶다.