最近不知道抽了什麽風，一直在看各路大佬的Blog。
可逛著逛著發現，這大佬們的世界哪是我這小破站能比的。人比人羨慕到喵了嗚嗚嗚qwq
其實不僅是羨慕，更多的是想爲自己的Blog好看點，也獨特點。
雖然現在好像也沒什麽內容就是了x （數據庫炸了之前還是有幾篇長文的x）
於是爲了讓自己的Blog能夠獨特點，爬了各路奇葩文章，也翻了翻大佬們的Blog有沒什麽精髓可以抄藉鑒一下。
掃完一輪發現，嗯這確實不是我能夠涉獵的區域x
狗子dalao的主題已經棄坑了，最近它的Blog似乎也真·準備跑路了（評論都關了）。
看了看糖大佬喵的Blog，上面那個小小的
可謂是把我深深的吸引住了！
正所謂活到老學到老，學到七十還嫌少。 這波是羨慕死了喵！作爲DarkMode的死忠粉，我覺得我不能這麽輕言放棄！
轉念一想，搞個HEXO會不會容易一點呢？
結果發現跳進去的坑連落地的聲音都聽不到......
什麽沒有評論啊，重新生成後網頁各種位移，反非代碼人的寫文方式啊，markdown到現在也沒用習慣。
坑太深了......跳到一半我決定重操wordpress自救自力更生。
於是乎懶人就得有懶人的做法，CSS看起來是一個不錯的選擇。
這個Blog似乎與狗子dalao的Blog有那麽億點點小小的不同了~
扯犢子呢，説好的過程呢？？！擱著放🌈屁呢！？
好吧，其實也不是什麽難的事情......
官方的自定義CSS......
我相信各位大佬應該沒幾個用它的吧（
這對於我們懶人來説可以説是非常省事的東西了，嗯。
再次對於我自己的菜刷新了一下認知。
用媒體查詢判斷一下客戶端用的是什麽模式，自動切換到對應黑白的自定義CSS中去。
透過filter:invert(1)反轉顔色，然後加上屬性hue-rotate(180deg)反轉色相這樣就得到了一個僅有黑白反轉的世界。（即黑暗模式）
什麽？你問那爲什麽還有那麽多亂七八糟的CSS規則？
其實吧，一鍵反轉就是個殘念，background的圖片就沒轍了。所以還要獨立去處理一下，將那些看起來不妙的class或id再反轉一次。
然後在加上我自己的一點點魔法，就變成了你現在看到的獨特配色。
這一段就是本Blog目前使用的自動切換黑白模式的CSS，
在用Bug11或者BugMac的都可以試下透過切換主題顔色來更變網站顔色哦~
/* 深色模式 */
@media (prefers-color-scheme: dark) {
body {
background: #181c27;
color: white;
transition: ease all 1s;
}
html, img, iframe, .widget_kratos_about, .alert-success, .alert-info, .alert-warning, .waifu, #comment, .title-h2, .label, .layui-layer-shade, .kratos-start, #kratos-header-section,.layui-layer-imgbar{
filter: invert(1) hue-rotate(180deg);
}
.widget_kratos_about .photo-wrapper img{
filter: invert(0) hue-rotate(180deg);
}
img, .label, .alert-success, .alert-info, .alert-warning {
opacity: 1;
}
.xControl{
background: rgba(222,222,222,.7);
}
.widget_kratos_comments, .comment-listitem, .panel-body {
color: black;
}
.widget-admin.text-center a {
color: #ccc;
}
aside#kratos_about-2.widget.widget_kratos_about.clearfix {
background-color: rgba(0,0,0,.85)!important;
}
.kratos-entry-border-new .kratos-post-meta-new {
background: rgba(215,237,255,.7);
}
.textwidget p.text-center {
color: #ccc;
}
}
/* 淺色模式 */
@media (prefers-color-scheme: light) {
body {
background: #f5f5f5;color: #333;
transition: ease all 1s;
}
.kratos-entry-border-new .kratos-post-meta-new {
background: rgba(215,237,255,.7);
}
}
/* 無屬性模式 */
@media (prefers-color-scheme: no-preference) {
body {
background: #f5f5f5;
color: #333;
transition: ease all 1s;
}
}GIF演示
什麽？你問我按鈕在哪裏？我怎麽這麽菜啊連個切換按鈕都沒有？
是的，我到現在還沒研究出究竟怎樣才能將media監聽的prefers-color-sechme屬性透過按鈕切換
如有大佬有幸路過還望大佬們指點江山（跪
小劇場~
最近不知道是不是中了BUG11的BUG，把自己都養成BUG了。
居然開始覺得這些圓不溜秋滾滾的圓角看起來挺順眼，本來也不是什麽蘋果控硬是給它整蛇皮了...
於是，咱又在CSS上撒了♥億點點小小の魔法♥.......
順帶也把字體給加粗了一下，嘻嘻
body{font-weight: 400;}
.kratos-entry-title-new{font-weight: bold;}
.kratos-copyright h5{font-size: 14px;font-weight: bold;}
.kratos-hentry,.kratos-post-meta-new,.widget,.widget_kratos_about{border-radius: 15px;}
.photo-background{border-radius: 14px 14px 0px 0px;}
li.comment,.comment-respond{border-radius: 15px;}
.nav-next,.nav-previous{border-radius: 15px;}
.kratos-entry-footer .footer-tag a {border-radius: 15px;}
.widget_kratos_tags .tag_clouds a {
background: rgba(215,237,255,.7);
border-radius: 15px;
}