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';
2
3document.addEventListener('hbs:mode', (e: CustomEvent) => {
4 console.log('mode changed: ', e.detail.mode === 'auto' ? getPreferMode() : e.detail.mode);
5});
getPreferModeis a function that return the prefer color mode of your system/browser.
Comments