Strange heatmap background color when apply different themes to heatmap

My application supports two themes (dark/light) for the charts. The background of the chart will be set to black if the dark mode is applied, and white if the light mode applied. It works well with the line chart. But there is strange grey background appeared in the heatmap chart when light mode is applied (Please check the attached screenshots). The color of gradient stop of offset 0 (min. heatmap zValues) is set to transparent and it works well with the dark mode. Do you know what’s wrong in my case?

Dark theme object applied to the chart:

{...new SciChartJSDarkTheme(), ...{
        sciChartBackground: "#1c1c1c",
        axisTitleColor: "#dee2e6",
        labelBorderBrush: "#dee2e6",
        tickTextBrush: "#dee2e6",
        majorGridLineBrush: "#1F3D68",
        minorGridLineBrush: "#102A47",
    }

Light theme object applied to the chart:

{...new SciChartJSLightTheme(), ...{
        sciChartBackground: "#fff",
        axisTitleColor: "#333",
        labelBorderBrush: "#333",
        tickTextBrush: "#333",
    }}

Heatmap graditentStops:

[
    { offset: 1, color: COLORS.DARK_RED },
    { offset: 0.8, color: COLORS.RED },
    { offset: 0.6, color: COLORS.YELLOW },
    { offset: 0.5, color: COLORS.GREEN },
    { offset: 0.4, color: COLORS.BLUE },
    { offset: 0.01, color: COLORS.DARK_BLUE },
    { offset: 0, color: "Transparent" },
]