WriteFreely深色模式CSS分享(Mastodon-like)v1

#WriteFreely #網站相關

其實我寫完以後發現配色長得跟網路上有個人的超像啊啊 不過我hover是用了虛線;

Chrome上面字體會比較大,我還沒有設計個別元素的字型大小

以下是寫得超暴力的CSS請笑納QAQ

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
*{
    font-family: 'Noto Sans TC', sans-serif!important;
}

a,nav{
        color:#eee!important;
}
li a{
    color:#777!important;
}
a:hover,a:visited{
    text-decoration: underline dotted!important;

}
code{
    color:#e6478e;
}
body:not(code){
    background-color: #373c4a;
    color:#eee!important;
    
}
/* Blog description (underneath title) on index page */
header p.description,h2,h3,h4,blockquote,time{
    color:#eee!important;
}

.post-title a.u-url:link, .post-title a.u-url:visited {
    text-decoration: underline dotted!important;
}

/* "Read more..." links */
body#collection a.read-more {
    text-decoration: underline dotted!important;
}

/* Links inside blog posts */
article p a {
    text-decoration: underline dotted!important;
}
article p a:hover {
    text-decoration: underline dotted!important;
}

/*

    RECIPES
    These are common patterns you may want to use on your blog.

*/

/* Center images */
img {
    display: block;
    margin: 0 auto;
}

/* Disable post header fade effect */
body#post header{
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Hide post views */
header nav .views {
    display: none;
}

基於官方建議修改;

使用了Google Font之思源黑體, 頁面中比較明顯的色彩應該只有#eee跟藍灰色底色#373c4a, 也就是替換掉這兩個顏色,就能變成你喜歡的深色主題配色了~