之前一直在使用giscus
作为blog的评论系统,个人评价giscus
接入方便、使用简便,依托全世界最大的代码平台Github,其在评论系统商的功能可以说是非常的丰富和完善的,而且稳定可靠,不用操心。之前的blog只有一个主题,所以giscus
也选择了对应的主题,后来blog增加明暗主题的切换,但是giscus
主题却没有跟随系统的样式进行切换,当用户切换了blog的主题是,giscus
的主题却没有切换,如果是明暗主题切换就会有很明显的对比,所以就有了下边的内容就是如何解决giscus
的样式跟随主题切换。
分析
如果你事直接复制的代码
data-theme="preferred_color_scheme"
这里就是giscus主题的设置属性,只需要data-theme的值跟随blog主题属性值一起变化就好。
编写代码
// 定义一个状态变量 giscusTheme,用于存储 Giscus 的主题
const [giscusTheme, setGiscusTheme] = useState('');
// 在组件挂载后执行副作用函数
useEffect(() => {
// 在客户端获取主题并设置 Giscus 的 theme 属性
const savedTheme = localStorage.getItem('theme');
// 如果主题为 dark,则设置 Giscus 的 theme 属性为 dark_dimmed
// 如果主题为 light,则设置 Giscus 的 theme 属性为 light_high_contrast
// 否则,设置 Giscus 的 theme 属性为 savedTheme
setGiscusTheme(savedTheme === 'dark' ? 'dark_dimmed' : savedTheme === 'light' ? 'light_high_contrast' : savedTheme);
}, []);
这样,以后用户切换blog样式的同时,也会改变giscus主题,已达到自动切换giscus主题样式的目的。 我使用的next.js框架,所以使用useEffect副作用函数,你可以根据上边的思路,修改代码到自己的blog系统中。