김선생 FixnSolve 티스토리 블로그 다크모드 출시~ 또하나의 에너지 절약 아이템

요즘 다크모드가 유행인 것 같습니다. 맥도 다크모드를 지원하고, 애플 iOS 최신버젼도 다크모드를 지원하고 있습니다. 요즘 모바일 다음도 다크모드로 전환 중인 것 같습니다. 어떻게 보면 다크모드가 글읽기에는 더 편한 느낌이죠. 백그라운드를 밝힐 필요가 없으니 에너지도 많이 절약될 것 같습니다.

다크모드 출시~ 이런 느낌?

친환경, 에너지 절약을 중시 여기는 돋보기김선생.. 이런 시대 조류에 발맞춰 김선생 FixnSolve 블로그 다크모드를 출시해 봅니다. 왓에버 (whatever) 스킨에서 메뉴 하나만 바꾸면 되는 일이고요.. 스킨 편집에서 "밝은"을 "어두운"으로 바꾸면 됩니다. 글자색을 좀 더 눈이 편하게 살짝 밝은 그레이로 바꿨습니다. css 편집에서 아래 color code를 #808080에서 #bbbbbb로 바꿨습니다.

  글자색 바꾸는 css 편집화면

아직 블로그 여기저기 오류가 있는 부분이 보이지만 차차 수정해 보도록 하겠습니다.

(추가 2020/6/10) 다크모드에서 발생했던 수정가능한 에러들은 최대한 수정했습니다. 또 이 기회에 카테고리를 좀 더 세분화해서 관련 주제포스팅을 찾아 보기 쉽게 해 보았습니다. 메뉴바가 열리며 살짝 후광이 비치는 카테고리 박스 모습도 멋지네요.

메뉴바에 마우스를 올렸을 때 카테고리가 표시된 모습

다음 고객센터에 몇몇 다크모드에서 발생하는 버그들을 수정해 달라고 부탁했더니.. 지금은 작업해 줄 수 없고.. 다크모드 지원에 관해 고민해 보겠다는 동문서답 답변을 하네요. 현재 다크모드를 지원하고 있는 것이 아니고.. 스킨에 있는 "어두운" 옵션이 선택되었을 때, 1. 사진 설명이 검은색으로 표시, 2. 오픈그래프 제목이 검은색으로 표시, 3. 공감 숫자와 글자가 검은색으로 표시, 4. 구독하기 글자가 검은색으로 표시 되어 어두운 배경에선 보이지 않는 문제가 있습니다. 반면 동영상 설명은 기본색으로 표시되어 잘 보입니다. 글자 셋팅만 변경하면 되는 문제인 것 같은데.. 고객센터 답변자가 매우 불성실하게 답변했습니다. 

(추가 2020/6/17) 아래 댓글에서 확인할 수 있는데.. SONYLOVE님의 도움을 받아 위의 버그를 해결했습니다. 다음 세줄을 css에 집어 넣었습니다.

.color-dark .postbtn_like, .txt_state{color:white}
.color-dark figcaption {color:gray !important}
.color-dark .og-title{color: #d4bca7 !important;}

티스토리 왓에버 스킨 "어두운" 옵션 써서 다크모드 구현하실 분들은 참고하시면 좋을 것 같습니다.  

(추가 2020/6/29) 티스토리 다크모드 버그 잡기 2탄 내용이 추가되었습니다. 자세히 살펴보면 여기저기 고칠 것들이 많았네요. 그동안 방치해 뒀던 숨겨진 버그들까지 잡았습니다. drkimfixnsolve.tistory.com/146

티스토리 왓에버 스킨 숨겨진 버그 잡기 - 다크모드 2탄

티스토리를 다크모드로 변환하기 위해 스킨을 다시 디자인하는 등 여러 복잡한 방법이 있겠지만.. 어떻게 보면 가장 쉬운 방법이 왓에버 (Whatever) 스킨의 "어두운" 옵션을 선택하는 것 같습니다.