Merge pull request #220 from uvarov-frontend/bugfix/change_theme

Bugfix/change_theme

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vanilla-calendar-pro",
-	"version": "2.9.4",
+	"version": "2.9.5",
 	"description": "Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.",
 	"homepage": "https://vanilla-calendar.pro",
 	"keywords": [

package/src/scripts/methods/changeTheme.ts

@@ -19,10 +19,15 @@ const trackChangesThemeInSystemSettings = (self: VanillaCalendar, supportDarkThe
 
 	if (self.settings.visibility.theme !== 'system' || haveListener.check()) return;
 
+	const changeDataAttrTheme = (event: MediaQueryList | MediaQueryListEvent) => {
+		const calendarEls = document.querySelectorAll(`.${self.CSSClasses.calendar}`);
+		calendarEls?.forEach((calendarEl) => setTheme(calendarEl as HTMLElement, event.matches ? 'dark' : 'light'));
+	};
+
 	if (supportDarkTheme.addEventListener) {
-		supportDarkTheme.addEventListener('change', setDataAttrTheme);
+		supportDarkTheme.addEventListener('change', changeDataAttrTheme);
 	} else {
-		supportDarkTheme.addListener(setDataAttrTheme);
+		supportDarkTheme.addListener(changeDataAttrTheme);
 	}
 	haveListener.set();
 };