[블로그] tistory 다크모드 : CSS 코드를 바꿔보자!

오늘은 Tistory 블로그를 OS 설정에 따라 다크모드로 바꾸어지게 만드는 과정을 설명하려고 한다.

 

맨처음에 필자도 구글에 검색하여 다크모드를 설정하려 하였으나 포트폴리오 형식의 다크모드 공개코드는 없어서 여러가지 서치하면서 바꾸었다. 

 

블로그들이 다크모드 CSS 코드를 공개는 하지만 그 과정은 설명하는 곳이 많이 없어서 이렇게 적게 되었다. 자신이 만든 블로그에 CSS를 바꾸어 자기 입맛에 맞게 다크모드를 적용하려는 사람에게 유용할 것이다.

 

참고로 좀 노가다이다...

---

먼저 블로그에 설정->꾸미기->스킨 편집을 들어간 후, 오른쪽 상단 프로필 사진 밑에 html편집 란을 클릭한다.

 

 

그럼 요기서 CSS를 눌러주면 코드들이 주르르륵 보일 것이다. 이제 코드만 추가하면 된다!

**CSS코드를 추가할 때 제일 밑 쪽에서 추가해야 적용이 된다.

**단, !important옵션을 쓴다면 상단이든 중단이든 상관없이 그 옵션이 적용된다.

 

아래는 필자의 블로그에 설정한 CSS코드이다. 

이 코드는 Portfolio 폼에 맞게 설정된 것이며, 다른 form에 대해서는 일부 변하지 않을 수 있다.

**밑 코드를 적용해보고 난 후에,  안바뀐 부분만 개인적으로 바꾸는 것도 노가다를 줄여준다.

**참고로 필자도 다른 블로그에서 참고한 코드를 먼저 적용한 후에 안바뀐 부분들을 수정하였다.

 

참고: https://donologue.tistory.com/377

 

/* new added for dark mode */
@media (prefers-color-scheme: dark) {
	.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: #666 !important;
	}

	#header {
		border-bottom: 1px solid #000 !important;
	}

	body, .comment-list ul li ul {
		background-color: #222 !important;
	}
	
	table, select{
		color: #ddd !important;
	}
	
	.pagination a, p, ul, li, p span {
		color: #aaa !important;
	}

	ul, li, ol, div {
		color: #eee !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: #ccc !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 soiid #000 !important;
	}
	figure[data-ke-type='opengraph'] div.og-image {
		border-right: 1px solid #000 !important;
	}
	
	/* sidebar */
	.box_header .link_logo {
		color: #eee !important;
	}

	
	.area_sidebar .tt_category {
		color: #333 !important;
	}

	.area_sidebar .inner_sidebar {
		background: #333 !important;
	}
	
	.area_sidebar .link_item{
		color: #aaa !important;
	}
	
	.area_sidebar .link_item .c_cnt{
		color: #aaa !important;
	}
	
	.area_sidebar .link_sub_item{
		color: #888 !important;
		font-weight: 500;
	}
	
	.area_sidebar .sub_category_list {
		border-left: 3px solid #888 !important;
	}
		
	.area_sidebar .t_menu_home a,
	.area_sidebar .t_menu_tag a,
	.area_sidebar .t_menu_guestbook a
	{
		color: #ccc !important;
	}
	
	.area_sidebar .link_tool {
		color: #ccc !important;
	}
	.area_sidebar .link_add {
		color: #ccc !important;
	}
	
	.area_sidebar .btn_close {
		color: #ccc !important;
	}
	
	/*sidebar search*/
	.area_popup {
		background: #333 !important;
	}
	
	.area_popup .area_search .btn_close {
		color: #ccc !important;
	}
	
	.area_popup .link_logo {
		color: #eee !important;
	}
	
	.tag_zone a {
		border: solid 1px #999 !important;
		color: #eee !important;
	}
	
	.area_popup .box_form {
  	border-bottom: 1px solid #ccc !important; 
	}
	

	
	textarea, #wf-form, #container .wf-form {
		background-color: #333 !important;
		border: 1px solid #000 !important;
	}

	footer {
		border-top: 1px solid #000 !important;
	}
	
	#footer address{
		color: #bbb !important;
	}
	
	#footer .link_footer {
		color: #bbb !important;
	}
	#footer .page-top {
		background-color: #555 !important;
		border-color: #444 !important;
	}

	#footer .page-top:hover {
		background-color: #bbb !important;
	}
		
	.box_header .btn_menu, .box_header .btn_search {
		background-image: url(./images/ico_menu.svg) !important;
	}
	
	.box_header .btn_search {
		background-image: url(./images/ico_search.svg) !important;
	}
	
	.info_profile {
		background-color: #555 !important;
	}

	.list_toolbar {
		background-color: #555 !important;
	}

	.wrap_list {
		background-color: #555 !important;
	}

	
}

---

여기서 꼭 써주어야 하는 부분은 

 

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

	/* CSS 코드 For darkmode */

}

 

위 block 안에다가 css코드를 작성해야 OS 설정에 따른 다크모드가 가능하다. 

그렇지 않다면 그냥 다크모드로 바뀌어버린다. 

 

이제 CSS를 하나씩 바꾸어 나가야 한다.

**이 글에서는 홈 화면의 일부를 바꾸는 과정만 쓸 것이니 참고하여 똑같은 과정으로 바꾸어가면 된다.

 

필자의 블로그 홈 화면<다크모드 적용 상태>

 

보통 다크모드란, 다른 옵션은 바꿀 필요 없고 background-color나 color 옵션만 건드리면 된다. 

그런데 이 부분이 어떤 이름을 가지고 있는지 또 그것을 코드에서 어떻게 표현할지가 문제인 것이다.

 

이럴 땐 간단히 내가 바꾸고 싶은 화면에서 Ctrl+Shift+C를 눌러보자.

 

 

위와 같은 화면이 나올 것이고, 위 그림에서 빨간색 동그라미가 그려진 부분을 클릭한 후에 원하는 section에 마우스를 갖다대면 위와 같이 그에 해당하는 이름이 나오게 되어있다. 이제 이 이름을 찾았으니 옵션만 바꾸면 된다!

 

예로 위의 header.box_header의 background를 바꾸어보겠다. 매우 간단하다. 

해당하는 id를 쓰고, 그 안에 background-color 옵션을 다음과 같이 써주면 된다.

#f00은 rgb의 16진수 값에 해당하므로 알아서 바꾸어주면 된다. 그 후에 적용시키면, 

 

 

짜란, 빨간색으로 배경색이 바뀌었다. ㅎㅎ 매우 간단...하지만 모든 element에 대해 다 색상을 지정해줘야 하므로 노가다이다. 

---

기타 알아두어야 하는 점

또 몇가지 알아두어야하는 점이 모든 id가 저렇게 한번에 .box_header로 표현되는게 아니다.

 

 

위와 같이 link_item 밑에 c_cnt가 있고, link_sub_item 밑에 c_cnt 가 있으므로 각자 상위 id를 적어주어야 한다.

이것도 간단하다. 약간 포인터 개념으로 이해하면 된다. 

 

왼쪽 그림 같은 경우, .link_item .c_cnt{ /*내용*/ }, 오른쪽은  .link_sub_item .c_cnt{/* 내용 */} 로 작성하면 된다.

위와 같이 해당하는 element가 어느 block에 속해 있는지 보려면, 위 빨간 동그라미를 누른 상태에서 해당 element를 클릭하면 우측에 코드가 보이게 된다. 그 코드를 확인하고 적으면 끝!

 

 

한번에 여러 개를 적용하고 싶을 때는 콤마(,)를 넣어주면 된다.

	.box_header .btn_menu, .box_header .btn_search {
		background-image: url(./images/ico_menu.svg) !important;
	}

이렇게 넣으면 .btn_menu와 .btn_search에 대해서 {}내 옵션이 동일하게 적용된다.

 

id가 아닌 html 태그를 넣어줄 수도 있다

	body, .comment-list ul li ul {
		background-color: #222 !important;
	}

 위 코드는 body와 .comment-list의 <ul><li><ul>{/* 코드 */ }</ul></li></ul> 안의 background-color를 바꾸는 코드이다. 

---

이런식으로 노가다를 해가면서 모든 element의 색상을 다크모드에 맞게 바꾸게 되면 끝! 이게 귀찮다면 구글에 검색하거나 이 글의 코드를 ctrl+c, ctrl+v한 후에, 변하지 않은 부분만 위 과정을 거쳐주면 된다. 

 

필자도 처음한 작업이라 여러가지 틀린 정보가 있을 수 있으니 만약 이상한 점이 있다면 바로 댓글로 피드백을 주면 좋을 것 같다.