hexo 魔改 | 修改卡片透明度

hexo 魔改 | 修改卡片透明度

**

博客食物用更佳 博客地址

**

这是笔者自己瞎倒腾的。作为前端菜鸡一枚,大佬们随便看看就好~

我用的主题是 butterfly 4.12.0

分析

通过开发者工具可以看出来卡片的背景和 --card-bg 变量有关

|1075

再在 sources 下的 css 文件夹下的 index.css 查找 --card-bg,可以看出来背景颜色和这个有关,是在这里体现。

|1075

然后继续查找这个变量。在 :root 下面找到,这个就是设置全局默认 -> 白天模式的。我已经调整过了。

|575

那么黑暗模式下的这个值又在哪呢?继续往下找。

看到这里有个 [data-theme='dark'] 就是表示黑暗模式。

|550

我试了一下在自己创建的 css 文件下写 light 模式和 dark 模式 --card-bg 的修改,但是会有小问题。所以我就用了暴力方法。找到 index.css 中这两个值定义的地方。

light 模式调整

首先就是在主题文件夹下 source 目录下的 css 目录下找到 var.styl

|575

搜索 card-bg 原先这里是 white 我已经调整过了

|575

后面这个 0.9 是透明度,当然,颜色也可以自己调整。

$card-bg = rgba(255, 255, 255, 0.9)

dark 模式调整

进入 _mode 文件夹

|550 |600

打开 darkmode.styl 文件。也是搜索 card-bg 我这里已经调整过颜色

|600
--card-bg: rgba(24, 22, 22, 0.8)

最重要的

不要忘记:

hexo clean
hexo g
hexo d
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值