Memory Leak in MainChart ColorSchemeChange listener

[codomposer]

Description

The MainChart component has a memory leak caused by a ColorSchemeChange event listener that is never cleaned up when the component unmounts.

Location

File: src/views/dashboard/MainChart.js
Lines: 9-27

Problem

The useEffect hook adds a ColorSchemeChange event listener to document.documentElement but doesn't provide a cleanup function:

useEffect(() => {
  document.documentElement.addEventListener('ColorSchemeChange', () => {
    if (chartRef.current) {
      setTimeout(() => {
        chartRef.current.options.scales.x.grid.borderColor = getStyle(
          '--cui-border-color-translucent',
        )
        chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
        chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
        chartRef.current.options.scales.y.grid.borderColor = getStyle(
          '--cui-border-color-translucent',
        )
        chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
        chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
        chartRef.current.update()
      })
    }
  })
}, [chartRef])