WriteFreely深色模式CSS分享(Mastodon-like)v1
其實我寫完以後發現配色長得跟網路上有個人的超像啊啊 不過我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
,
也就是替換掉這兩個顏色,就能變成你喜歡的深色主題配色了~