![]()
#316
20260309
正月廿一,星期一。阴转晴转大风。
今天逛 @关关和六六 的博客,发现小娃顺利出生啦,祝贺🎉!时间真快呀,23年才收到他们的明信片呢,这就快三年啦!等我和绵绵大喜事后,一定也设计一款明信片寄给博友们!
接着在评论区逛逛,@段先森 说“我们的时间差不多”,咦,顿时愣住👀“先森”咋变身女士了。点开一瞧,噢原来也是情侣博客呀!收藏+1!
前两天趁着周末,绵绵小屋再次优化:添加了暗色模式切换按钮(鸽了好几年的功能了
这个小按钮可着实花费一番工夫。原本设计的逻辑是:优先跟随系统,然后通过localStorage记忆访客的按钮选择。
但是想想不对呀,如果永久记忆,那跟随系统的功能岂不是成了摆设?因为一旦按了按钮,跟随系统就再也不会生效了。而且我们只想新增一个按钮,不想加上一整个选项菜单让访客选择是否跟随系统还是永久浅色或深色。绵绵也说,建议是不保留记忆功能,只设计一个按钮用于请小屋的访客只在本次访问中体验暗色模式。
于是找 AI 问了问,原来还有个sessionStorage属性可以用,浏览器关掉后这里边的数据就自动清除了。一试,发现还有个小问题:每次内链跳转时,在设备性能和网速不太好的情况下,因为按钮脚本还没加载出来,所以当访客的系统颜色和按钮颜色不一致时,浏览器会优先使用prefers-color-scheme来跟随系统,这就会导致页面短暂闪烁。想半天想不出来咋解决,AI 说可以在<head>部分加一小段脚本来判断,姑且尝试一下,好像不太影响性能。最终效果就是目前这样了。























