Dynamically Changing Colors

Hyvor Talk basically works with 6 colors, which you can set for a website in the console's appearance section.

You can dynamically set these colors using the HYVOR_TALK_CONFIG object in the embed code, or using the frontend API.

palette Object

palette object is used to set colors, and it can specify 6 values similar to setting colors in the appearance section.

{
    accent: "#0000000",
    accentText: "#0000000",
    footerHeader: "#0000000",
    footerHeaderText: "#0000000",
    box: "#0000000",
    boxText: "#0000000",
    boxLightText: "#0000000",
    backgroundText: "#0000000"
}

All the values should be a valid hex color (Ex: #ffd969). If any value is omitted, the default color of the website, which is set in the console, is used.

Note: These values are equivalent to these six colors you see in the appearance section of the console.

1. Using HYVOR_TALK_CONFIG

In the embed code, HYVOR_TALK_CONFIG can be used to change the behavior of the plugin, and it can be used to set colors for each page.

var HYVOR_TALK_CONFIG = {
    // other configs
    // ...

    palette: {
        accent: "#659DBD",
        accentText: "#FFFFFF",
        footerHeader: "#FAFAFA",
        footerHeaderText: "#484848",
        box: "#FFFFFF",
        boxText: "#111111",
        boxLightText: "#AAAAAA",
        backgroundText: "#111111"
    }
}

2. Using Javascript API

Hyvor Talk Javascript API provides the function hyvor_talk.setPalette() to set colors dynamically. This function is extremely useful if you have both light and dark modes on the same page.

function changeToDarkMode() {
    // your code that triggers the dark mode

    hyvor_talk.setPalette(PALETTE_OBJ_FOR_DARK_MODE);
}

Colors based on User's OS Theme

If your theme sets dark/light mode using the OS theme, you can setup Hyvor Talk to do the same.

var palette = null;
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    palette = {
        accent: "#ffffff",
        accentText: "#000000",
        footerHeader: "#1b1818",
        footerHeaderText: "#cac7c7",
        box: "#232121",
        boxText: "#ffffff",
        boxLightText: "#aaaaaa",
        backgroundText: "#ffffff"
    }
}

// embed code
var HYVOR_TALK_WEBSITE = YOUR_WEBSITE_ID;
var HYVOR_TALK_CONFIG = {
    id: false,
    url: false,
    palette: palette
};

When using this code, a dark theme (which is set by palette variable) will be used if the user's OS theme is dark. Otherwise, the default of the website will be used.