本文列出一些主题触发的一些事件,你可以通过事件监听器来捕获这些事件。

颜色模式事件#

当颜色模式改变时,HBS 将触发一个名为 hbs:mode 的自定义事件,这对于根据主题颜色模式调整你的小部件的样式很有用。 内置的 Utterances 和 Giscus 评论引擎就是依靠这个事件来调整它们的主题为浅色或深色。

1import { getPreferMode } from 'js/mode/functions';
2
3document.addEventListener('hbs:mode', (e: CustomEvent) => {
4  console.log('mode changed: ', e.detail.mode === 'auto' ? getPreferMode() : e.detail.mode);
5});
  • getPreferMode 函数返回你的系统/浏览器的首选颜色模式。