fix : 修复 Artalk 评论插件在浅色/深色切换时的显示 Bug

[Daleveral]

已知问题

1. Artalk 评论组件显示异常
   • 默认 Artalk 为浅色模式, 当点击网页的深色/浅色切换按钮时, artalk 评论区无法切换深浅, 但 twikoo 可以
   • 理论上可以在 artalk 后端中 设置->界面配置 中将夜间模式配置为 auto 来解决此 bug
   • 但实际上仅仅修改这个 auto 值是无效的, 只是简单地把浅色换成了深色, 无法实现根据博客的明暗自动变化
   • 这个 bug 会导致明暗切换后评论的文字的颜色和背景颜色几乎相同, 无法阅读, 之前杜老师有发现过此问题 夜间模式有些问题 ArtalkJS/Artalk#185
   • 所以要修改 components/artalk.js 来让 auto 成为真正的 auto

解决方案

1. 修改 components/artalk.js
   • 使用官方推荐的 setDarkMode() 方法进行主题切换
   • 添加 MutationObserver 监听主题变化

改动收益

1. 修复 Artalk 评论区深色模式切换问题
   • 评论区主题能够跟随网站主题实时切换
   • 优化用户深色模式下的阅读体验

具体改动

1. components/Artalk.js
   • 保存 Artalk 实例到变量
   • 添加 MutationObserver 监听主题变化
   • 使用 setDarkMode 方法切换主题

测试确认

• 本地开发环境测试通过
• 深色/浅色模式切换正常工作
• 页面刷新后主题状态保持正确
• 组件卸载时正确清理资源

相关文档

• Artalk 深色模式文档: https://artalk.js.org/zh/guide/env.html#%E7%95%8C%E9%9D%A2%E9%85%8D%E7%BD%AE

[vercel]

@Daleveral is attempting to deploy a commit to the tangly1024's projects Team on Vercel.

A member of the Team first needs to authorize it.