客制化一下自己的博客

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

发表评论

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