Tistory 스킨 Book Club 다크모드 적용 코드

어렵게 구글링을 하던중에 겨우 한 블로그를 찾았었다

donologue.tistory.com/377

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

 

하지만 불행하게도 코드 복붙이 안되었다 ㅠㅠㅠㅠ

그래서 그대로 보고 따라 적었다

 

그리고 적용 후 버튼주위 색만 좀 조정한 상태이다

*보완점들

- 코드문법강조의 색이 빠졌다..!ㅠㅠ

- 이미지가 없는 글의 경우 흰사각형으로 보인다

- 오른쪽 가운데 버튼 클릭시 글들이 희미하게 보인다

-기타 글들이 희미하게 보이는 경우

 

이점들만 제외한다면 나름 만족스러운 다크모드를 활성화 할수 있게 되었다

 

<추가로 넣어야 하는 코드>

/*다크모드 적용*/
@media (prefers-color-scheme: dark) {
    #header {
        border-bottom: 1ps solid #000 !important;
    }
    body {
        background-color: #222 !important;
    }
    p, span, ul, li {
        color: #999 !important;
    }
    .cover-event ul li .title, a, h2, h3 {
        color: #eee !important;
    }
    .cover-event ul li .more {
        color: #000 !important;
    }
    h4, h5 {
        color: #bbb !important;
    }

    /*공유 링크*/
    .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, .commnt-list ul li ul {
        background-color: #222 !important;
    }
    .pagination a, p, 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: #fff !important;
        border: 1px solid #333 !important;
    }
    #header .util .search {
        background-color: #444 !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'] dic.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;
    }

}

<적용방법>

스킨 편집 - html 편집 - css

->

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

아래에 넣어주면 된다!

 

Mac의 경우 라이트모드, 다크모드에 따라 블로그 배경색이 바뀌는 모습을 볼 수 있다