客制化一下自己的博客

最近不知道抽了什麽風,一直在看各路大佬的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;
}
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注