북클럽 스킨 다크모드 CSS

티스토리 스킨 북클럽 스킨을 다크모드로 변경해 주는 CSS 입니다.

스킨 편집 > CSS의 하단에 붙여 넣고 적용하면 다크모드로 사용할 수 있습니다. 

각자의 취향에 맞게 수정하셔서 사용하세요~

CSS

/* --- 다크모드 --- */
@media (prefers-color-scheme: dark){
/*	body{
				display: white;
				color: white;
        background-color: 0d1117 !important;
    }
	.util .search {
		background-color: 0d1117
}

	textarea {
		background-color : white;
	} */
	body {
    background-color: #0d1117;
  }
	.util .search {
		background-color: #0d1117
	}
	.layer_post .btn_mark {
		color: #333 !important;
	}
	article-type- .title, .article-type-thumbnail .title {
    color: white;
	}
    
    .article-related .link-related strong {
    display: block;
    color: white;
	}
    
	.article-type-poster .title	{
		color: white;
	}	
	
	.header .tt_category .category_list .link_item,
	.header .topnavmenu > ul > li > a {
    color: #F0CE0C !important;
	}

	.article-type-resize .title {
   color: #9DD6FF;
	}	
	.area-reply .list-reply-comment{
		background-color: #101B10
	}	
	.header .button-menu{
		background-color: #aaa
	}
	aside.area-aside{
		background-color: #0d1117
	}
	
	@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: #0d1117 !important;
	}
	
	table, select{
		color: #ddd !important;
	}
	
	.pagination a, p, ul, li, p span {
		color: rgb(255, 255, 255) !important;
	}

	ul, li, ol, div {
		color: #eee !important;
	}
	
	.comments h2 .count, .og-title, .comments h2, .cover-event ul li .title, a, h2, h3{
		color: rgb(255, 255, 255) !important;
	}

	.cover-event ul li .more {
		color: #000 !important;
	}
	
	h4, h5 {
		color: rgb(247, 245, 245) !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;
	}
    /* 프로필 카드 */
    div[data-tistory-react-app="Namecard"] {
    display: none;
    color: #79d4ff;
    }

    .tt_box_namecard {
    border-radius: 20px 20px 20px 20px;
    background-color: #444;
    color: rgb(112 163 189) !important;
    border: 1px solid #ffffff;
    margin: 0px 5px;
    }
	/* 프로필 카드 끝 */

	/* 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;
	}

    .area-reply .box-content .list-modify a {
    background-color: #111111;
}
	
	/*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;
	}

    .article-view blockquote {
    margin: 0;
    padding-left: 19px;
    border-left: 1px solid;
    font-size: 16px;
    line-height: 1.75;
    color: rgb(194, 255, 175);
}

#tt-body-page blockquote[data-ke-style='style1'] {
    text-align: center;
    background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
    padding: 34px 0 0 0;
    font-size: 15pt;
    color: #79d4ff;
    line-height: 23pt;
    border: 0 none;
}

#footer .box-site ul {
    position: absolute;
    bottom: 31px;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    background: rgb(51, 51, 51);
    border: 1px solid #efefef;
    font-size: 13px;
    line-height: 32px;
    list-style: none;
    opacity: .0;
    overflow: hidden;
}

#footer .box-site ul li a {
    display: block;
    background: rgb(51, 51, 51);
    color: #999;
    text-decoration: none;
}

}

/** 상단 카테고리 더보기 버튼 **/
    .cate-bg {
      background-color: #17C3B2; 
      color: #fff; 
      padding: 25px 35px;
      font-family: inherit;
      }
    .cate-bg a {
      text-decoration: none !important;
      color: #227C9D !important;
      }
    .cate-bg p {font-family: inherit; 
    font-size: 22px; 
    font-weight: 600;
    }
    .cate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #17C3B2;
  font-size: 18px;
  border: 1px solid #ffcb77 ;
  border-radius: 10px;
  width: 200px;
  height: 40px;
  font-weight: bold;
  transition: 0.3s;
  background-color: #ffcb77;
}

.original-button:hover {
  opacity: .7;
}