Option to remove [data-theme] from being added

[exoRift]

Considering the fact that repainting (by calling paint() again) doesn't update the theme (which is an issue in and of itself),

I would like an option that does not set the data-theme attribute at all so that it can be determined by the Tailwind theme provider what styles to apply to the heatmap.

For now, I have to use this workaround:

).then(() => (cal.current as any).calendarPainter.root?.attr('data-theme', null))

[wa0x6e]

You're right about the theme not being updated when calling paint again. I have created an issue for that.

Regarding the data-theme presence, can you not just override your tailwind theme css, like the docs website is doing ? (https://cal-heatmap.com/assets/css/styles.a42314ed.css)

[exoRift]

I can override it, it's just extra work. However, I guess it's not entirely necessary if the updating for the theme is fixed

[yasso1am]

In case anyone else comes across this and didn't understand the approach above 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]);