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