让giscus的主题跟随blog的主题一起变化

J.sky
giscus
Theme
2025/1/23

之前一直在使用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系统中。

本文为原创文章,遵循: CC BY-NC-SA 4.0版权协议,转载请附上原文出处链接和本声明。