博客园美化：光明/暗黑模式自动切换参考

我的博客主题是SimpleMemory。浏览器浅色时代码主题xcode，深色时代码主题为hybrid，字体为Consolas。

你现在看到的我的博客就是使用了暗黑和光明模式自动切换，会根据浏览器的主题自动识别。

自动识别的关键CSS代码为：

/* Light mode */
@media (prefers-color-scheme: light) {
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
}

我的页面定制CSS代码如下：

@media (prefers-color-scheme: light) {
  .cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code {
    font-family: "Consola",sans-serif;
    font-size: 14px;
    padding: 3 3 3 3px;
    line-height: 1.5;
    margin: 0 5px;
    display: inline-block;
    overflow-x: auto;
    vertical-align: middle;
    border-radius: 3px;
    background-color: #ededed;
    color: #09308b;
    }
    .postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: underline;
    color: #21759b;
    }
    #home {
    width:70%;
   }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .blogpost-body, .postBody{
    color: #e7e7e7;
    background-color: #1D1F21;
  }
  #home{
    background-color: #1D1F21;
  }
  body {
      background-color: #1D1F21;
  }
  .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    background: #1d1f21;
  }
  body {
    color: #f5f5f5;
  }
  .postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #5ab1d9;
  }
  .diggit, .buryit{
    opacity: 70%;
  }
  .comment_textarea {
    background-color: #1d1f21;
   }
   .commentbox_tab, .commentbox_tab.active{
    color: #cfcfcf;
   }
   div.commentform textarea {
    color: #e7e7e7;
    background: #252525;
  }
  #BlogPostCategory, #BlogCollection, #EntryTag {
    color: #e5e5e5;
  }
  a:link {
    color: #1d1f21;
    text-decoration: none;
  }
  .cnblogs-markdown :not(pre,div,td)>code, .blogpost-body :not(pre,div,td)>code {
    font-family: "Consola",sans-serif;
    font-size: 14px;
    padding: 3 3 3 3px;
    line-height: 1.5;
    margin: 0 5px;
    display: inline-block;
    overflow-x: auto;
    vertical-align: middle;
    border-radius: 3px;
    background-color: #4e4e4e;
    color: #cbca3a;
    }
    body {
    color: #e5e5e5;
    }
    #blogTitle h1 a {
     color: #5ab1d9;
    }
    .postBody a:link, .postBody a:visited, .postBody a:active {
    text-decoration: underline;
    color: #64c681;
    }
    #cnblogs_post_body th, .blogpost-body th {
    background-color: #623c3c;
   }
   img.png {
    opacity: 40%;
   }
   a, a:visited {
    color: #449f45;
    text-decoration: none;
   }
   #home {
    width:70%;
    box-shadow:none;
   }
}

}
.blogpost-body {
    font-size: 16px;
    font-family: Open Sans;
}
#cnblogs_post_body p{
    font-size: 16px;
}
.cnblogs_code,.cnblogs_code span,.cnblogs-markdown .hljs{
    font-size:14px!important;
}
#under_post_card1{
 display: none !important;
}
#under_post_card2{
 display: none !important;
}