wa0x6e/cal-heatmap

fix: theme is not updated when calling paint() with another theme

wa0x6e opened this issue · 1 comments

wa0x6e commented

Calling paint({ theme: THEME }) does not update the calendar to the given theme

In the context of React, if you are trying to dynamically adjust the theme when a user toggles dark/light mode on your page, you can do this in a non-standard-react way.

const [themeMode] = useLocalstorageState('theme', 'light');
const prevThemeMode = useRef(themeMode);
  useEffect(() => {
    if (prevThemeMode.current !== themeMode) {
      // there is no built in way to dynamically update the theme, and we don't want to destroy/repaint the entire calendar as that leads to some odd behaviors
      // @ts-ignore
      calInstance.calendarPainter.root?.attr('data-theme', themeMode);
      prevThemeMode.current = themeMode;
    }
  }, [themeMode, prevThemeMode]);