[Tistory] 티스토리 5분 만에 다크모드 적용하기 (feat. Dark Reader)

크롬의 확장 프로그램인 다크 리더를 이용해서, 티스토리 다크 모드를 적용합니다.

 

 

[ Contents ]

 

 

1. 다크 리더(Dark Reader)

Dark Reader — dark theme for every website

 다크 리더는 '다크 모드'로 만들어주는 크롬 확장 프로그램입니다. 흔히 검은색 배경에 회색 글씨를 다크 모드라고 하며, 눈의 피로를 줄여줍니다.

 다크 리더를 이용하면, 어느 사이트든 가독성 있는 다크 모드를 이용할 수 있습니다. 위 링크를 통해서 설치해주세요.

 

 

 

2. 다크 리더에서 CSS 파일 뽑아내기

GitHub - darkreader/darkreader: Dark Reader Chrome and Firefox extension

 다크 리더는 웹페이지 내에 css를 추가해서 '다크 모드'를 지원합니다. 즉, 다크 리더에서 생성한 CSS 코드를 이용하면 쉽게 다크 모드를 만들 수 있습니다.

 굳이 요소 하나하나 노가다하면서 바꾸는 노력을 안 해도 됩니다!

 

1) 다크 리더 아이콘을 클릭합니다.
2) 개발자 도구(오른쪽 하단 모서리)를 클릭합니다.
3) 새 디자인 미리보기를 클릭합니다.
4) 팝업에서 설정 클릭설정 관리를 클릭하십시오
5) 동적 테마 내보내기를 클릭합니다.

 위 과정을 거쳐서 CSS 파일을 내려받습니다. 아래에서 좀 더 자세히 설명할게요.

 

 

 우측 하단의 개발자 도구를 클릭합니다.

 

 

 팝업창이 뜨면, Preview new design를 클릭해주세요.

 

 

 다시 다크리더 창으로 돌아가서, [ Setting - Manage settings ]를 클릭합니다.

 

 Export Dynamic Theme를 누르시면, CSS파일이 다운로드됩니다.

 

 

 

3. CSS 파일에 적용하기

 위와 같은 CSS파일을 받으셨으면, 내용을 복사해주세요. 이 내용을 티스토리 스킨 CSS파일에 붙여 넣기 할 겁니다.

 

 

 스킨을 바꾸기 전에 먼저 백업부터 해주세요. 추후에 스킨에 문제가 생겨도, 보관함에서 되돌릴 수 있습니다.

 

 

 스킨 편집에서 html 편집 - CSS 창으로 이동합니다.

 

 

 

 맨 밑에다가 Dark reader css 내용을 붙여 넣고, 저장하면 끝입니다.