开启页面模糊效果下修改深色模式下页头页脚亮度

开启页面模糊效果下修改深色模式下页头页脚亮度

如果魔改了主页面，开启了模糊效果，那么在修改深色模式下主页封面和页脚就不能只靠修改/themes/sourcs/css/_mode/darkmode.styl的信息来实现了

因为在darkmode.styl中，页头页脚和背景，同属于background，也就是说修改的时候这三者是一起修改的，但是由于魔改模糊效果之后，对于背景的设置(准确来说是页头页脚的设置)会覆盖掉darkmode.styl中的效果，所以在darkmode.styl中修改background的时候，只能影响到深色模式下背景图片的深度，而无法影响页头页脚

如何修改主页和文章页面的页头页脚的深度： 在魔改页面模糊效果之后往往在主题配置文件themes/butterfly/_config.yml的inject的head处会有引用，我们找到这处引用，看到引用的文件，我的是/css/custom.css，我们打开这个文件即可

截屏2023-01-21 22.47.28

在themes/butterfly/source/css/custom.css中，找到此处(只管未注释的内容，注释是笔者自己家加的)

截屏2023-01-21 22.47.11

修改为以下内容 [data-theme="dark"] #footer::before { /* footer也就是页脚 */ background: rgba(0, 0, 0, 0.3); /* 原来是此处transparent !important，也就是纯透明，不暗化； 现在被改成了自定义的；当然也可以用*var(--trans-dark)，也就是跟上面一样，用上面预设好的*/ } [data-theme="dark"] #page-header::before { /* pafe-header也就是页头 */ background: rgba(0, 0, 0, 0.4); /* 原来是此处transparent !important，也就是纯透明，不暗化； 现在被改成了自定义的；当然也可以用*var(--trans-dark)，也就是跟上面一样，用上面预设好的*/ }其中raga中的前三个值是遮罩的颜色，深色模式一般就用黑色，第四个值代表的是遮罩的深度，取值范围为0~1，值越大深度越大，读者可以自己更改

效果：

修改前：

页头页脚过亮，看不清文字

截屏2023-01-21 23.01.41

截屏2023-01-21 23.01.49

修改后：

亮度适中

截屏2023-01-21 23.01.56

截屏2023-01-21 23.02.02