Light & Dark Mode

Hyvor Talk supports light and dark modes by default. In the Console, you can configure different color palettes for light and dark modes (Console -> Appearance).

colors attribute

You can switch between the modes by using the colors attribute. It accepts either light, dark, or os.


Hyvor Talk will use the light or dark color palette you have configured in the Console. If colors="os" is set, Hyvor Talk will figure out the color mode based on the user's operating system settings.

Operating System Color Mode

If your website is designed to adapt to the user's operating system color mode, you can use the os value for the colors attribute to instruct Hyvor Talk to do the same. Hyvor Talk will automatically switch between the light and dark modes based on the user's operating system settings.

<hyvor-talk-comments colors="os"></hyvor-talk-comments>

Have a Light/Dark Mode Switch?

If your website has a light/dark more switch, you can change the colors attribute when the user clicks on the switch. Add an event listener (or callback) to the switch and change the colors attribute. Something like this (you will have to figure it out based on how your website works):

onColorModeChange = function(mode) {
    document.querySelector('hyvor-talk-comments').setAttribute('colors', mode);

Under the hood, the colors attribute changes CSS variables used by Hyvor Talk. See the styles page for more information.