This articles listed some custom events emitted by the theme, you can catch those events via event listeners.

Color Mode Event#

HBS will emit a custom event called hbs:mode on color mode changed, it’s useful to adjust your widget’s style to theme color mode. The built-in Utterances and Giscus comments engines are relying on this event for adjusting their theme to light or dark.

1import { getPreferMode } from 'js/mode/functions';
3document.addEventListener('hbs:mode', (e: CustomEvent) => {
4  console.log('mode changed: ', e.detail.mode === 'auto' ? getPreferMode() : e.detail.mode);
  • getPreferMode is a function that return the prefer color mode of your system/browser.