小技チョコレート

ちょっとした小技を紹介するだけのブログです。

Dark theme for Scrapbox

Last update: 2019/11/25

※日本語による説明はこちらです。

Please apply the theme "Hacher 1" together to your Scrapbox project. Otherwise, dark coloring won't be completed on it.

f:id:ichbin:20181003141829p:plain

Screenshots

f:id:ichbin:20191125194216p:plain

f:id:ichbin:20191125194230p:plain

CSS Code

.page,
.page a,
.page video,
.page iframe,
.code-block-start,
.code-block-start span {
    filter: invert(100%);
}

.page {
    box-shadow: none;
    background-color: #dbd6d0;  /* for Firefox: #dad5cf */
    border: solid 1px #888;
}

.editor {
    color: #282828 !important;
}

textarea#text-input:focus {
    background: #dbd6d0;  /* for Firefox: #dad5cf */
}

.page a,
.page a.link:hover {
    color: #7c9ff7 !important
}
.line a.empty-page-link {
    color: #fd7373 !important
}
.line a.empty-page-link:hover {
    color: #fd7373 !important;
}
a.page-link:hover {
    color: #7c9ff7 !important;
}

span.quote a.page-link,
span.quote a.page-link:hover {
    color: #88A7F7 !important
}
.line span.quote a.empty-page-link,
.line span.quote a.empty-page-link:hover {
    color: #fd7373 !important
}

div.col-page .grid li.page-list-item a .description {
    font-size: 13px !important;
    color: #ccc;
}

.grid li.page-list-item a {
    background-color: rgba(57, 60, 70, 0.6);
}

.grid li.page-list-item a .hover {
    background-color: rgba(0, 0, 0, 0) !important;
}

.page-list-item .description code {
    color: #eee
}

.line .telomere .telomere-border,
.line .telomere .telomere-border.unread {
    transition: none;
    box-sizing: content-box;
    border-color: #252A30
}
.line .telomere .telomere-border:hover,
.line .telomere .telomere-border.unread:hover {
    box-sizing: border-box;
    width: auto;
    border-color: #252A30;
    background-color: transparent;
}

.line .telomere .telomere-border {
    background-color: #252A30;
    width: 2px;
}

.line .telomere .telomere-border.unread {
    background-color: #4DC3FA;
    width: 5px;
}