티스토리의 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탭으로 이동
4. 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;
}
}
반응형
댓글