最近不知道抽了什麽風,一直在看各路大佬的Blog。
可逛著逛著發現,這大佬們的世界哪是我這小破站能比的。人比人羡慕到喵了嗚嗚嗚qwq
其實不僅是羡慕,更多的是想爲自己的Blog好看點,也獨特點。
雖然現在好像也沒什麽内容就是了x (數據庫炸了之前還是有幾篇長文的x)
於是爲了讓自己的Blog能夠獨特點,爬了各路奇葩文章,也翻了翻大佬們的Blog有沒什麽精髓可以抄藉鑒一下。
掃完一輪發現,嗯這確實不是我能夠涉獵的區域x
狗子dalao的主題已經棄坑了,最近它的Blog似乎也真·準備跑路了(評論都關了)。 已经在用爱发电了。
逛了圈Google,看到了糖菓大佬喵的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;
}
