How to Set Colors of Hyvor Talk Based On User’s OS Theme

CSS prefers-color-scheme allows web developers to set colors based on the user’s OS theme preferences.

You can use Javascript to set dynamic colors on Hyvor Talk.

By default, Hyvor Talk’s installation code looks like this.

<div id="hyvor-talk-view"></div>
<script type="text/javascript">
    var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID; // DO NOT CHANGE THIS
    var HYVOR_TALK_CONFIG = {
        url: false,
        id: false
    };
</script>
<script async type="text/javascript" src="//talk.hyvor.com/web-api/embed"></script>

You’ll need to dynamically set HYVOR_TALK_CONFIG.palette based on the user’s theme.

We can use this condition to detect the dark theme.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark theme
}

Here’s the new HYVOR_TALK_CONFIG. When palette is set to null, Hyvor Talk will use the default colors of your website.

var palette = null;
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    palette = {
        accent: "#0000000",
        accentText: "#0000000",
        footerHeader: "#0000000",
        footerHeaderText: "#0000000",
        box: "#0000000",
        boxText: "#0000000",
        boxLightText: "#0000000",
        backgroundText: "#0000000"
    } 
}
var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID; // DO NOT CHANGE THIS
var HYVOR_TALK_CONFIG = {
   // other configs (id and URL)
   palette: palette
};

Make sure to replace YOUR_WEBSITE_ID with your website’s ID.

And, replace #000000 with the actual colors.

You can use Hyvor Talk color editor to test these 6 colors.

Console Appearance
Color Editor

References

If you have further questions, comment below.

Need a privacy-focused commenting platform for your website?