티스토리 다크모드 적용

닼..다크 다크!

요즘은 하얀 화면을 거의 못보는 것 같다. 스마트폰도 다크모드, 노트북도 다크모드, VSCode, 깃허브도 다크모드..이제는 기본 설정일 정도로 다크모드가 많이 보편화 되어 있고 다크모드가 확실히 눈에도 편하다. 그 중 유일하게 내 블로그에 다크모드가 안 되어서 있어서 이번에 적용해 보려고 한다. 나같은 경우 저녁 시간대가 되면 자동으로 다크모드가 활성화 되는데, 내 블로그도 그에 맞게 다크모드를 기능하게 해야겠다.

---

다크모드를 적용하려면 CSS 미디어 특성인 prefers-color-scheme을 알아야 한다. 이 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용된다. 즉 이 특성을 사용하면 내 노트북이나 스마트폰이 다크모드인지 아닌지를 알아 낼 수 있다. 그럼 이제 내 블로그에 적용해보자.

블로그관리 -> 스킨편집 -> html 페이지(스킨 : Book Club)

@media (prefers-color-scheme: dark) {
	
}

CSS 탭의 코드 맨 아래에 위와 같이 코드를 추가하고 다크모드 시 색상을 바꿔야할 요소들을 찾아 정의해주면 된다. 

Styles 탭 안에서 바로 스타일 적용을 해볼 수도 있다.

맥 사용자는 option + cmd + i, 윈도우 사용자는 F12를 눌러서 왼쪽 상단의 화살표 모양을 클릭 후 해당 요소를 확인해서 작성한 미디어 쿼리 블록 안에 색상을 정의한다.

완성된 다크모드