[web개발] 티스토리 블로그 스킨 CSS 다크모드 지원하기

macOS 10.14부터 다크모드를 지원하고 있다. 그리고 iOS기기에서도 마찬가지로 지원하고 있다. 

다크모드 설정

그에 따라서 유튜브나 클리앙 등에서 다크모드 테마일때 어두운 계열로 바꿔주는 처리를 하고 있다.

 

그 비밀은 바로 미디어 속성인 prefers-color-scheme 를 이용하는 것

 

참고:

https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme

prefers-color-scheme

 

나도 이에 따라 티스토리 기본 스킨을 다크모드를 지원하도록 바꿔 보았다.

 

( 약간의 노가다로 찾은거라 색이 이쁘지 않을 수도 있고 적용되지 않은 부분도 있다.)

 

아래 CSS코드를 티스토리 스킨편집에 CSS 맨 아래에 추가해 준다.

/*다크모드*/
@media (prefers-color-scheme: dark) {
  .area_head,input,body,.area_menu,.area_menu .list_cate {
     background: #1C1C1E;
     color: #979797;
  }
	.skin_view .area_title{
		border-bottom: 1px solid #343434;
	}
	.area_head .btn_name{
		    color: #607e79;
	}
	.skin_view .another_category table th a {
    
    color: #979797 !important;
   
}
	.skin_view .area_view p {
			   color: #979797 !important;
	}
	.list_content , .area_head{
			border-bottom: 1px solid #444444;
	}
	.wrap_etc {
   
    border-top: 1px solid #424242;
}
	.skin_view .tit_post a {
    color: #607e79;
}
	.area_navi .list_cate ul li a {
 
    color: #009688;
    
}


	figure[data-ke-type='opengraph'] div.og-text p.og-title, #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
		    color: #E91E63;
	}
	a {
		color: #3DB29E;
	}
	button{
		
	}
	textarea {
		background-color: #1b1b1b;
		
	}
	.area_reply .tf_reply, .area_reply .writer_info .inp_info  {
	    border: 1px solid #242424;
	}
	.wrap_etc .list_tag .link_tag{
		border: 1px solid #474747;
    background-color: #5d827f;
    color: #fff;
	}
	.area_foot{
		background-color:#3f3f3f;
	}
	a, .list_content .detail_info .link_cate {
 	color: #3DB29E;
}
}

 

 

적용 모습