Migrating from Disqus to Giscus for the Comment System

I used to use Disqus for the comment system, but there were occasional issues with accessing it from within China, and new users had to register again. Considering that most of the readers of this site are likely GitHub users, migrating to Giscus (a comment system based on GitHub Discussions) seems more suitable. Switching the comment system itself is not difficult, you can refer to this tutorial to modify the Hugo templates and configurations. Migrating the data is not troublesome either, as there weren’t many comments to begin with, so there are only two comments to manually migrate, which shouldn’t take much time (although I also tried an automated solution, but it seems to have some issues and the migrated comments don’t show up…). The slightly annoying part is actually the switching between light/dark mode in Giscus.

Because this blog has its own toggle button (see previous post), when users visit, they may retrieve the color mode preference from localstorage. However, currently, when Giscus is loaded, Hugo writes the color preference parameters into the HTML source code during site generation. Therefore, when the user clicks the button to switch, the color preference in Giscus needs to be switched as well. Referring to this issue in the official documentation, this feature is not difficult to implement. However, there is still a problem because after Giscus is loaded, if the user clicks the button to switch color mode preference, Giscus will use the color preference based on my Hugo configuration file, rather than what is stored in the user’s localstorage. As a result, the user may manually choose the light mode, but if the browser settings have prefer-color-scheme: dark, Giscus will display a black background with white text. There wasn’t a good solution to this problem in the previous issue discussions, although I saw someone using setTimeout to continuously loop, but that doesn’t seem very elegant. After reading the official documentation, I found that Giscus actually sends an event to the parent window after it finishes loading, so as long as we listen for this event, we can set the color preference for Giscus after it has loaded. You can refer to this commit for the related implementation.

Perhaps there will be more comments after the switch? Hopefully.