[SOLVED] How to change primaryButton color in amcharts5?

How to change primaryButton color in amcharts5?

I'm trying to change the color of zoomOut button or so called "primaryButton" in amcharts5. However digging through documentation i couldn't find anything that works.

var root = am5.Root.new(divId);
root._logo.dispose();

var fpTheme = am5.Theme.new(root);

fpTheme.rule("Label").setAll({
    fontSize: "1rem",
    fill: am5.color(0x97a0b4)
    // fill: am5.color(0x777777)
    // minGridDistance: 30
});

fpTheme.rule("LineSeries").adapters.add("stroke", function(stroke, target) {
    // console.log(stroke);
    // return am5.color(0x4CAF50);
    return am5.color(0x4ac445);
});

// this below doesn't work. The above code works just fine.

fpTheme.rule("Button").setAll({
    minus: {
        fill: am5.color(0x4ac445)
    }
});

fpTheme.rule("Graphics").setAll({
    minus: {
        fill: am5.color(0x4ac445)
    }
});

root.setThemes([
    am5themes_Animated.new(root),
    fpTheme
]);

Clicking on zoomOut button does show that green color "0x4ac445" but the button is still blue like this from docs https://www.amcharts.com/docs/v5/concepts/colors-gradients-and-patterns/

Solution

I've checked this code and it works fine.

// change zoom button color to red
root.interfaceColors.set("primaryButton", am5.color(0xff0000));

// change zoom button-hover color to black
root.interfaceColors.set("primaryButtonHover", am5.color(0x000000));