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
attributeYou can switch between the modes by using the colors
attribute. It accepts either light
, dark
, or os
.
<hyvor-talk-comments
website-id=""
page-id=""
colors="dark"
></hyvor-talk-comments>
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.
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>
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.