ExtJS 4.2 legend colors don't match the pie slices

I am trying to create a pie graph in ExtJS 4.2.2.1144 (3rd party product that I have no control over). I need to set custom colors to my pie slices, which works as needed. However, the legend does not match. How do I fix it so that the legend uses those same custom colors as the pie slices?

_createPieChart: function (records) {
    var pieChart;
    if (this.pieChart) {
        this.remove(this.pieChart);
        this.titleByPlanEstimate.destroy();
        this.pieChart.destroy();
    }
    // Prepare data for pie chart based on radio button selection
    var radio1 = Ext.getCmp('radio1');
    var pieChartData = radio1.getValue() ? this._prepareDataByThemeCount(records) : this._prepareDataByPlanEstimate(records);

    var totalCount = 0;
    pieChartData.forEach(function (item) {
        totalCount += item.count;
    });

    const colors = pieChartData.map(item => item.color);

    pieChart = Ext.create('Ext.chart.Chart', {
        xtype: 'chart',
        width: 500,
        height: 350,
        animate: true,
        //colorSet: colors,
        store: {
            fields: ['theme', 'count'],
            data: pieChartData // Use the prepared pie chart data
        },
        series: [{
            type: 'pie',
            angleField: 'count',
            animate: true,
            showInLegend: true,
            renderer: function(sprite, record, attr, index, store) {
                const recordTheme = record.data.theme;
                const sectionColor = pieChartData.find(item => item.theme === recordTheme).color;
                attr.fill = sectionColor ?? 'red';
                return attr;
            },
            label: {
                field: 'theme',
                display: 'rotate',
                renderer: function (storeItem, item) {
                    var theme = storeItem;
                    var count = pieChartData.find(function (record) {
                        return record.theme === theme;
                    }).count;
                    return (count / totalCount * 100).toFixed(2) + "%";
                }
            },
            highlight: {
                segment: {
                    margin: 20
                }
            },
            listeners: {
                itemmousedown: function (series, item, event) {
                    console.log('Clicked on', item.record.get('theme'));
                }
            }
        }],
        legend: {
            position: 'right',
            labelFont: '12px Arial',
            itemSpacing: 8,
        },
        insetPadding: 30
    });

As it currently exists, the pie chart itself receives its colors from the renderer for series. colorSet doesn't appear to do anything, so it is commented out.

Ext.chart.series.Series has a getLegendColor function you can use to customize the colors in the legend. This will be called for every item in the legend so it helps you only if you can set the color based on the index in the legend:

series: [{
    type: 'pie',
    getLegendColor: function(index) {
        // add your logic here to determine the colors based on the index
        return '#FF0000';
    },
    ...
}]