본문 바로가기
IT 일반

티스토리 Odyssey 스킨에 다크테마 적용

by 꾸션 2022. 6. 29.

티스토리의 Odyssey 스킨에 다크테마를 적용한 css소스입니다.

 

화이트, 다크 계열 색상을 반전시킨 버전입니다. (다크->화이트, 화이트-> 다크)

  • 색상 적용 방식 
    • #333 형식: #fff - #333 = #ccc
    • rgba(111, 111, 111, 111) 형식: rgba(255 - 111, 255 - 111, 255 - 111, 111) = rgba(144, 144, 144, 111) 

기타 색상(붉은, 초록, 파랑)은 그대로 유지 했습니다. ("/* 색상변경 안 함 */" 주석 참조)

 

스킨 적용하기

1. 블로그 관리 - 스킨 편집

블로그 관리 - 스킨 편집 화면

 

2. html 편집화면으로 이동

 

3. css탭으로 이동

css 탭 위치, 적용 버튼 위치 화면

 

4. css 제일 하단에 아래의 내용을 복/붙하여 적용합니다.

css 문구 적용 위치 화면

 

다크테마 CSS 최종 소스


/* Odyssey dark theme by ccusean */
@media (prefers-color-scheme: dark) {
  html,
  body {
    color: #ccc;
      /* background-color: #2b2b2b; */
      background-color: #111111;
  }
  @media screen and (min-width: 1061px) {
    .wrap-drawer .area-aside {
    border-left: 1px solid #101010;
    background: #000;
    }
  }
  #tt-body-tag:not(.wrap-drawer) .header,
  #tt-body-page:not(.wrap-drawer) .header,
  #tt-body-category:not(.wrap-drawer) .header,
  #tt-body-search:not(.wrap-drawer) .header,
  #tt-body-archive:not(.wrap-drawer) .header {
    border-bottom: 1px solid #101010;
  }
  .paging-more {
    border: 1px solid #282828;
    color: #888;
  }
  .area-paging .link_page {
    color: #fff;
  }
  .area-paging .link_num span {
    color: #ccc;
  }
  .area-paging .link_num:hover span {
    background: #222;
    color: #ccc;
  }
  .area-paging .selected {
    background: #fff;
    color: #000 !important;
  }
  .area-paging .link_num:hover .selected {
    background: #fff;
    color: #000;
  }
  @media screen and (max-width: 1023px) {
    .area-paging .link_page {
    color: rgba(255, 255, 255, 0.75);
    }
    .area-paging .link_page.no-more-prev,
    .area-paging .link_page.no-more-next {
    color: rgba(255, 255, 255, 0.15);
    }
    .area-paging .selected {
    color: #000;
    }
    .area-paging .selected {
    color: #000 !important;
    }
  }
  .header {
    border-bottom: 1px solid #101010;
  }
  .header .link_logo {
    color: #ccc;
  }
  .header .area-slogun p {
    color: #666;
  }
  .header .tt_category .category_list .link_item,
  .header .topnavmenu > ul > li > a {
    color: #ccc !important;
  }
  @media screen and (min-width: 1061px) {
    .header .tt_category .category_list .sub_category_list {
    color: #ccc;
    }
    .header .tt_category .category_list .sub_category_list:before {
    border-top: 1px solid #101010;
    background: #000;
    }
    .header .link_sub_item {
    color: #ccc;
    }
  }
  @media screen and (min-width: 1061px) {
    .wrap-right .header .area-gnb .topnavmenu:before {
    border-top: 1px solid #101010;
    }
  }
  @media screen and (max-width: 1060px) {
    .header .area-gnb {
    border-top: 1px solid #101010;
    }
  }
  #footer {
    border-top: 1px solid #101010;
  }
  #footer .link-footer {
    color: #ccc;
  }
  #footer .link-footer:before {
    background: #666;
  }
  #footer .text-info,
  #footer address {
    color: #666;
  }
  #footer .box-site button {
    color: #666;
  }
  #footer .box-site ul {
    background: #000;
    border: 1px solid #101010;
  }
  #footer .box-site ul li a {
    background: #000;
    color: #666;
  }
  #footer .box-site ul li a:hover {
    color: #ccc;
  }
  .area-promotion:before {
    background-color: rgba(197, 197, 197, 0.3);
  }
  .area-promotion .inner-promotion strong {
    color: #000;
  }
  .area-promotion .inner-promotion .link-promotion {
    color: #ccc;
  }
  .area-aside .link-sidebar {
    color: #888;
  }
  .area-aside .link-sidebar span {
    color: #666;
  }
  .area-aside .title-sidebar {
    color: #ccc;
  }
  .area-aside .box-profile {
    border: 1px solid #171717;
    border-bottom: 1px solid #171717;
  }
  .area-aside .box-profile .text-profile {
    color: #888;
  }
  .area-aside .box-profile .button-subscription {
    border: 1px solid #222;
    color: #ccc;
  }
  .area-aside .box-profile .link-sns {
    border: 1px solid #222;
  }
  .area-aside .box-profile-invert {
    border-bottom: 2px solid #000;
  }
  .area-aside .box-profile-invert:before {
    background-color: rgba(255, 255, 255, 0.3);
  }
  .area-aside .box-profile-invert .text-profile {
    color: #000;
  }
  .area-aside .box-profile-invert .button-subscription {
    color: #000;
  }
  .area-aside .box-profile-invert .link-sns {
    border: 1px solid rgba(0, 0, 0, 0.7);
  }
  .area-aside .box-profile-invert .svg path {
    fill: #000 !important;
  }
  .area-aside .box-category {
    border-bottom: 1px solid #171717;
  }
  .area-aside .box-category .tt_category .link_tit,
  .area-aside .box-category .tt_category .category_list .link_item {
    color: #888;
  }
  .area-aside .box-category .tt_category .link_tit:hover,
  .area-aside .box-category .tt_category .category_list .link_item:hover {
    color: #ccc !important;
  }
  .area-aside .box-category .tt_category .category_list .link_sub_item.selected,
  .area-aside .box-category .tt_category .category_list .link_item.selected {
    color: #ccc;
  }
  .area-aside .box-category .tt_category .category_list .link_sub_item {
    color: #666;
  }
  .area-aside .box-category .tt_category .category_list .link_sub_item:before {
    background: #666;
  }
  .area-aside .box-category .tt_category .category_list .link_sub_item:hover {
    color: #ccc;
  }
  .area-aside .box-tag a {
    color: #888;
  }
  .area-aside .box-tag a:last-child:after {
    background: #000;
  }
  .area-aside .box-recent .tab-recent li.on a {
    color: #ccc;
  }
  .area-aside .box-recent .tab-recent li a {
    color: #666;
  }
  .area-aside .box-recent .list-recent .box-recent {
    color: #ccc;
  }
  .area-aside .box-recent .list-recent .box-recent span {
    color: #666;
  }
  .area-aside .box-plugins {
    border-bottom: 1px solid #171717;
  }
  .area-aside .box-plugins .tab-sns li.on a {
    color: #ccc;
  }
  .area-aside .box-plugins .tab-sns li a {
    color: #666;
  }
  .area-aside .box-calendar .inner-calendar {
    border: 1px solid #171717;
  }
  .area-aside .box-calendar .inner-calendar table caption a {
    color: #ccc;
  }
  .area-aside .box-calendar .inner-calendar table th,
  .area-aside .box-calendar .inner-calendar table td {
    color: #666;
  }
  .area-aside .box-visit .text-total {
    color: #ccc;
  }
  .area-aside .box-visit .item-visit {
    color: #666;
  }
  .area-aside .box-search {
    border-bottom: 2px solid #ccc;
  }
  .area-aside .box-search .inp-search {
    color: #666;
  }
  .box-reply .list-sidebar p {
    color: #666;
  }
  .box-calendar .cal_click {
    color: #ccc;
  }
  .area-aside .box-calendar .inner-calendar .cal_month a {
    color: #ccc;
  }
  @media screen and (max-width: 1060px) {
    .area-aside {
    border-left: 1px solid #101010;
    background: #000;
    }
  }
  .bg-dimmed:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100vh;
    margin-left: -50vw;
    background: rgba(0, 0, 0, 0.8);
    z-index: 19;
  }
  .box-log a {
    color: #888;
  }
  .box-log .link-log:before {
    background: #222;
  }
  .article-type-common .title {
    color: #ccc;
  }
  .article-type-common .summary {
    color: #888;
  }
  .article-type-common .link-category {
    color: #ccc;
  }
  .article-type-common .date {
    color: #666;
  }
  .article-type-common .date:before {
    background: #666;
  }
  .article-type-common .reply {
    color: #666;
  }
  .article-type-common .reply:before {
    background: #666;
  }
  .box-cover-title .link-title {
    color: #666;
  }
  .box-cover-title .link-title:after {
    border-top: 1px solid #666;
    border-left: 1px solid #666;
  }
  .area-cover-thumbnail .box-cover-title {
    border-bottom: 1px solid #171717;
  }
  .article-type-poster .thumbnail:before {
    background: rgba(255, 255, 255, 0.05);
  }
  .area-cover .title-cover {
    color: #ccc;
  }
  .area-cover .button-more {
    border: 1px solid #171717;
    color: #888;
  }
  @media screen and (max-width: 1060px) {
    .title-search.title-border {
    border-bottom: 1px solid #171717;
    }
  }
  .area-tag .title-other {
    color: #ccc;
  }
  .area-tag .box-tag a {
    color: #888;
  }
  .article-header .box-info .date:before {
    background: #000;
  }
  .article-tag {
    border-bottom: 2px solid #333;
  }
  .article-tag .box-tag a {
    border: 1px solid #171717;
    color: #888;
  }
  .article-tag .box-tag a:after {
    background: #000;
  }
  .article-page {
    border-bottom: 1px solid #171717;
  }
  .article-page ul li {
    color: #666;
  }
  .article-page ul li:nth-child(2) {
    color: #ccc;
  }
  .article-page ul li a {
    color: #666;
  }
  .article-related .link-related strong {
    color: #ccc;
  }
  .article-related .date {
    color: #666;
  }
  .article-reply .box-total {
    border-bottom: 1px solid #171717;
  }
  .article-reply .box-total a {
    color: #ccc;
  }
  .article-reply .tt_more_preview_comments_wrap {
    border: 1px solid #171717;
    color: #888;
  }
  .area-reply .item-reply {
    border-bottom: 1px solid #111;
  }
  .area-reply .box-content .box-meta strong a {
    color: #ccc;
  }
  .area-reply .box-content .box-meta .date {
    color: #6f6f6f;
  }
  .area-reply .box-content .box-meta .date:before {
    background: #3a3a3a;
  }
  .area-reply .box-content .box-meta .date a {
    color: #6f6f6f;
  }
  .area-reply .box-content .box-meta .date a:before {
    background: #3a3a3a;
  }
  .area-reply .box-content .text {
    color: #888;
  }
  .area-reply .box-content .link-comment {
    color: #6f6f6f;
  }
  .area-reply .box-content .list-modify {
    border: 1px solid #171717;
  }
  .area-reply .box-content .list-modify li {
    border-bottom: 1px solid #171717;
  }
  .area-reply .box-content .list-modify a {
    color: #ccc;
    background-color: #000;
  }
  .area-reply .list-reply-comment {
    background-color: #050505;
    border-top: 1px solid #0f0f0f;
    border-bottom: 1px solid #0f0f0f;
  }
  @media screen and (max-width: 1060px) {
    .area-reply .box-content .list-modify {
    background: #000;
    }
  }
  .area-write .box-account input {
    border: 1px solid #171717;
    color: #666;
  }
  .area-write .box-account input:hover {
    border-color: #ccc;
  }
  .area-write .box-homepage input {
    border: 1px solid #171717;
    color: #666;
  }
  .area-write .box-homepage input:hover {
    border-color: #ccc;
  }
  .area-write .box-textarea textarea {
    border: 1px solid #171717;
    color: #666;
  }
  .area-write .box-textarea textarea:hover {
    border-color: #ccc;
  }
  .area-write .box-write .xe-label > input[type='checkbox'] + .xe-input-helper {
    background-color: #000;
    border: 1px solid #41403a;
  }
  .area-write .box-write .xe-label > input[type='checkbox']:checked + .xe-input-helper:after {
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .area-write .box-write .xe-label > input[type='checkbox']:checked + .xe-input-helper {
    background-color: #ccc;
  }
  .area-write .box-write .xe-label .xe-label-text {
    color: #ccc;
  }
  .area-write .box-write .btn_register {
    background: #fff;
    color: #000;
  }
  .area-protected .text-protected {
    color: #ccc;
  }
  .area-protected .text-protected span {
    color: #888;
  }
  .area-protected input {
    border: 1px solid #171717;
  }
  .area-protected input:hover,
  .area-protected input:focus {
    border: 1px solid #ccc;
  }
  .area-protected input.active + button {
    background: #ccc;
    color: #000;
  }
  .area-protected button {
    background: #222;
  }
  .article-view p {
    color: #aaa;
  }
  .article-view h1,
  .article-view h2,
  .article-view h3,
  .article-view h4 {
    color: rgba(255, 255, 255, 0.87);
  }
  .article-view blockquote {
    color: rgba(255, 255, 255, 0.54);
  }
  .article-view ul li {
    color: rgba(255, 255, 255, 0.87);
  }
  .article-view ol li {
    color: rgba(255, 255, 255, 0.87);
  }
  .article-view table {
    border: 1px solid #25231f;
  }
  .article-view table thead tr {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }
  .article-view table tr th,
  .article-view table tr td {
    border-left: 1px solid #25231f;
  }
  .article-view table tr {
    border-bottom: 1px solid #25231f;
  }
  .article-view pre {
    background: rgba(255, 255, 255, 0.05);
  }
  .article-view .cap1 {
    color: rgba(255, 255, 255, 0.54);
  }
  .article-view .moreless_top {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .article-view .moreless_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .article-view .footnotes li {
    color: rgba(255, 255, 255, 0.38);
  }
  .title-search.title-border {
    border-bottom: 1px solid #171717;
  }
  .box-no-search {
    color: rgba(204, 204, 204, 0.5);
  }
  .box-no-search span:before {
    background: rgba(255, 255, 255, 0.2);
  }
  .util .search {
    background-color: #000;
  }
  .util .search input {
    border-bottom: 0px solid #ccc;
    color: #666;
  }
  .util .search input::placeholder {
    color: #696969;
  }
  .util .search button {
    border: 1px solid #111;
    background: #000 url(./images/ico_package.png) no-repeat -1px -1px;
  }
  .notfoundpage .absent_post:before {
    color: #aaa;
  }
  .notfoundpage .absent_post {
    color: #666 !important;
  }
  @media screen and (min-width: 1061px) {
    .wrap-drawer .header .line-bottom {
    border-bottom: solid 1px #101010;
    }
  }
  @media screen and (max-width: 768px) {
    .header .area-gnb .topnavmenu {
    border-bottom: 1px solid #101010;
    }
  }
  .protected-img .thumbnail {
    background-color: #050505;
  }
  .article-type-resize .protected-img .thumbnail {
    background-color: #050505;
  }
  .paging-more-loading {
    color: #000;
  }
  .paging-more-loading:before {
    border: 1px solid #333;
  }
  .use-category-banner .category-banner:before {
    background-color: rgba(197, 197, 197, 0.3);
  }
  .use-category-banner .category-banner .category-description-box strong {
    color: #000;
  }
  #tt-body-guestbook .title-search {
    border-bottom: 1px solid #171717;
  }
  figure.fileblock .filename,
  #tt-body-page figure.fileblock .filename {
    color: #cccccc;
  }
  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: #FFFFFF;
  }
}

 

반응형

댓글