Background color not updating

[FedererKK]

I have correctly setup TradingView and am now looking at updating different properties of the chart using custom themes (Next-Themes)

Everything works well and updates nicely, except for the background color. I am really struggling to understand how some props correctly update whereas others do not.

Perhaps 'theme' is interfering with my custom background?

This is the useEffect I have to create and apply the theme to the chart. Any help would be appreciated

` useEffect(() => { console.log("tvWidgetRef.current", tvWidgetRef.current);

let chartStyleOverrides = {
  "paneProperties.background": COLORS.BKG1[theme],
  "paneProperties.backgroundType": "solid",
  "paneProperties.legendProperties.showBackground": false,
  "paneProperties.legendProperties.showStudyTitles": false,
  "scalesProperties.showStudyLastValue": false,
  "scalesProperties.fontSize": 11,
  "scalesProperties.lineColor": COLORS.BKG4[theme],
};

const mainSeriesProperties = [
  "candleStyle",
  "hollowCandleStyle",
  "haStyle",
  "barStyle",
];

mainSeriesProperties.forEach((prop) => {
  chartStyleOverrides = {
    ...chartStyleOverrides,

    [`mainSeriesProperties.${prop}.upColor`]: COLORS.UP[theme],
    [`mainSeriesProperties.${prop}.downColor`]: COLORS.DOWN[theme],
    ....
  };
});

const widgetOptions: ChartingLibraryWidgetOptions = {
  // debug: true,
  symbol: defaultProps.symbol,
  datafeed: defaultProps.datafeed,
  interval: defaultProps.interval,
  container: defaultProps.container,
  library_path: defaultProps.libraryPath,
  locale: defaultProps.locale,
  enabled_features: defaultProps.enabled_features,
  charts_storage_url: defaultProps.chartsStorageUrl,
  charts_storage_api_version: defaultProps.chartsStorageApiVersion,
  client_id: defaultProps.clientId,
  user_id: defaultProps.userId,
  fullscreen: defaultProps.fullscreen,
  autosize: defaultProps.autosize,

  loading_screen: {
    backgroundColor: COLORS.BKG1[theme],
  },
  overrides: {
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
    ...chartStyleOverrides,
  },
  theme:
    theme === "Light" || theme === "Banana" || theme === "Lychee"
      ? ("Light" as ChartingLibraryWidgetOptions["theme"])
      : ("Dark" as ChartingLibraryWidgetOptions["theme"]),
};

console.log("creating new chart");

const tvWidget = new widget(widgetOptions);

tvWidget.onChartReady(() => {
  tvWidgetRef.current = tvWidget;
  setChartReady(true);
});

return () => {
  // Clean up widget on component unmount
  tvWidgetRef.current?.remove();
};

}, [theme]);`