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

Published by Supun Kavinda on

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.

About Hyvor Talk

Hyvor Talk is a privacy-focused alternative to Disqus. It comes with all moderation tools you need to build an amazing audience on your website. It is built to be beautiful and fully-customizable. You can control everything in one console. Try it for free now! ❤

Subscribe to our Newsletter

We write a lot of blog posts to help you grow your audience on your website. Subscribe to get the best blog posts right into your inbox.

Categories: Hyvor Talk