티스토리 다크모드 적용 상세 - Book Club 테마 기준

안녕하세요 오랜만에 글 올리게 되었네요!!
학기 중엔 방학동안 글 많이 올려야지 벼르고 있었는데, 이번 방학동안 인턴하면서 바빠서 글을 단 하나도 올리지 않았습니다...ㅎㅎㅎ 방학이 이제 2일하고 7시간 정도 남았군요. 정말 시간 빠른 것 같습니다.

다크모드 기초 설정

오늘 올릴 글은 티스토리에 다크모드 끼얹기 2편입니다. 요즘 다크모드가 눈 건강에도 좋고 웹 디자인에 필수 요소로 자리잡고 있죠. 티스토리에도 다크모드를 적용할 수 있는 방법이 있습니다. CSS를 좀 건드리긴 해야하지만요! 그럼 어떻게 적용하는지 자세히 알아보도록 하겠습니다.

2020/02/24 - [개발/Blog] - 티스토리 다크모드 적용하기

티스토리 다크모드 적용하기

이 글은 저번 티스토리 다크모드 적용하기 편에서 이어집니다. 안 보신 분들은 위 글을 읽고 기본 설정하고 와주세요!

Book Club 테마에서 세부 설정하기

이번 글에선 이어서 세부적인 다크 모드 색상들을 적용할 겁니다. 저번 글에선 사용자의 운영체제 선호 색상을 감지하여, 블로그에 들어온 사용자가 다크모드로 OS를 설정해두었다면 블로그 배경을 검은 색으로 나오게 하는 방법을 알려주었었는데요. 말 그대로 배경 색만 바꾼 것이어서 버튼이나, 테두리 색상, 폰트 색상 등은 잘 안보이게 되거나 너무 밝거나 하는 문제가 남아있습니다.

세부 설정을 위해 블로그 관리 > 꾸미기 > 스킨 변경 > html 편집으로 들어와줍니다. 저흰 CSS를 건드려야 하니 들어오시면 오른쪽 위에 있는 CSS 탭으로 들어와줍니다. 들어오신 분들은 아래 코드를 복붙해주시면 됩니다.

/*공유 링크*/
.layer_post .btn_mark {
  color: #333 !important;
}
@media screen and (max-width: 767px) {
  #header h1 {
    background-color: #444 !important;
  }
}

footer, #header, .mobile-menu #aside, #aside .profile::before {
  background-color: #444 !important;
}
#header {
  border-bottom: 1px solid #000 !important;
}
body, .comment-list ul li ul {
  background-color: #222 !important;
}
.pagination a, p, ul, li, p span {
  color: #999 !important;
}
.comments h2 .count, .og-title, .comments h2, .cover-event ul li .title, a, h2, h3 {
  color: #eee !important;
}
.cover-event ul li .more {
  color: #000 !important;
}
h4, h5 {
  color: #bbb !important;
}
.og-text {
  background-color: #555 !important;
}
/*메인 바*/
.cover-list, .cover-thumbnail-3, .cover-thumbnail-2, .cover-thumbnail-4, .cover-event, .comment-list ul li ul {
  border-top: none !important;
}
.cover-list h2, .cover-thumbnail-2 h2 {
  border-bottom: 1px solid #000 !important;
}
#gnb ul li.current a:after {
  background-color: #eee !important;
}
/*버튼*/
#header .util .profile button, #aside .close, .sidebar .social-channel ul li a, #header .util .menu, .tags a, .cover-thumbnail-3 button {
  background-color: transparent !important;
  border: 1px solid #333 !important;
}
#header .util .search::before {
  background-color: #444 !important;
  border: 1px solid #333 !important;
}
.pagination .prev, .pagination .next, .pagination .selected, .cover-thumbnail-4 .next {
  color: #fff !important;
  border:1px solid #333 !important;
}
/*링크 색*/
figure[data-ke-type='opengraph'] a, #tt-body-page figure[data-ke-type='opengraph'] a {
  border: 1px solid #000 !important;
}
figure[data-ke-type='opengraph'] div.og-image {
  border-right: 1px solid #000 !important;
}

/*사이드바*/
.sidebar .sidebar-2 {
  border-top: 1px solid #000 !important;
}
.sidebar .category ul li ul li ul li:before  {
  background-color: #000 !important;
}
/*댓글*/
textarea, #wf-form, #container .wf-form {
  background-color: #333 !important;
  border: 1px solid #000 !important;
}
/*푸터*/
footer {
  border-top: 1px solid #000 !important;
}
#footer .page-top {
  background-color: #555 !important;
  border-color: #444 !important;
}
    
#footer .page-top:hover {
  background-color: #bbb !important;
}

제가 설정한 CSS 코드입니다. 사이드바랑 추가 설정을 몇개 더 해줬던 거 같은데 이 코드 짤 때 급하게 짜느라 어디에 설정을 해뒀는지 못 찾겠더라구요.
이 코드 적용하시면 아마 배경색에 맞게 웬만한 버튼, 푸터도 잘 적용이 될 겁니다. 위 제목에 적어뒀듯이 Book Club 테마 기준으로 작성한 CSS 라 다른 테마신 분들은 적용이 잘 안 될 수 있으니 참고 부탁드려요~!  테마가 다른 분들도 제 코드 참고하셔서 div 태그 등에서 클래스명 잘 확인하시고 직접 개발해보는 것도 얼마 안 걸릴 겁니다!

01

적용모습은 위와 같습니다. 저도 완벽하게 적용한 건 아니지만 위 코드만 추가하시면 제 블로그 정도 적용은 가능할 거에요.ㅎㅎ 저도 엄청난 노가다 끝에 완성한거라 코드를 공유할지 많이 고민했었는데 공유하는 게 더 나은 거 같더라구요! 조회 수도 많이 나오길 바라면서.. 올려봅니다..

질문 있으시면 댓글 남겨주세요!