fix: theme listener

Author: RohitKushvaha01

src/palettes/changeTheme/index.js

@@ -2,12 +2,9 @@ import "./style.scss";
 import palette from "components/palette";
 import config from "lib/config";
 import appSettings from "lib/settings";
-import themes from "theme/list";
-import { updateSystemTheme } from "theme/preInstalled";
+import themes, { updateSystemThemeWatcher } from "theme/list";
 import changeEditorTheme from "../changeEditorTheme";
 
-const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-
 export default function changeTheme(type = "editor") {
 	if (type === "editor") return changeEditorTheme();
 	palette(
@@ -42,32 +39,6 @@ function generateHints(type) {
 	});
 }
 
-function syncSystemTheme(event) {
-	if (appSettings.value.appTheme.toLowerCase() !== "system") return;
-	const isDark = event ? event.matches : darkModeMediaQuery.matches;
-	updateSystemTheme(isDark);
-}
-
-function startSystemThemeWatcher() {
-	darkModeMediaQuery.addEventListener("change", syncSystemTheme);
-}
-
-function stopSystemThemeWatcher() {
-	darkModeMediaQuery.removeEventListener("change", syncSystemTheme);
-}
-
-function updateSystemThemeWatcher(theme) {
-	if (String(theme).toLowerCase() === "system") {
-		startSystemThemeWatcher();
-		syncSystemTheme();
-		return;
-	}
-	stopSystemThemeWatcher();
-}
-
-updateSystemThemeWatcher(appSettings.value.appTheme);
-appSettings.on("update:appTheme", updateSystemThemeWatcher);
-
 function onselect(value) {
 	if (!value) return;
 

src/theme/list.js

@@ -11,8 +11,13 @@ const appThemes = new Map();
 let themeApplied = false;
 let firstTime = true;
 
+const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+let systemThemeWatcherActive = false;
+
 function init() {
 	themes.forEach((theme) => add(theme));
+	updateSystemThemeWatcher(settings.value.appTheme);
+	settings.on("update:appTheme", updateSystemThemeWatcher);
 }
 
 /**
@@ -159,6 +164,45 @@ export function update(theme) {
 	});
 }
 
+function syncSystemTheme(event) {
+	if (settings.value.appTheme.toLowerCase() !== "system") return;
+	const isDark = event ? event.matches : darkModeMediaQuery.matches;
+	updateSystemTheme(isDark);
+}
+
+function startSystemThemeWatcher() {
+	if (systemThemeWatcherActive) return;
+	systemThemeWatcherActive = true;
+	if (typeof darkModeMediaQuery.addEventListener === "function") {
+		darkModeMediaQuery.addEventListener("change", syncSystemTheme);
+	} else {
+		darkModeMediaQuery.addListener(syncSystemTheme);
+	}
+}
+
+function stopSystemThemeWatcher() {
+	if (!systemThemeWatcherActive) return;
+	systemThemeWatcherActive = false;
+	if (typeof darkModeMediaQuery.removeEventListener === "function") {
+		darkModeMediaQuery.removeEventListener("change", syncSystemTheme);
+	} else {
+		darkModeMediaQuery.removeListener(syncSystemTheme);
+	}
+}
+
+/**
+ * Start or stop syncing the app theme with the OS color scheme
+ * @param {string} theme
+ */
+export function updateSystemThemeWatcher(theme) {
+	if (String(theme).toLowerCase() === "system") {
+		startSystemThemeWatcher();
+		syncSystemTheme();
+		return;
+	}
+	stopSystemThemeWatcher();
+}
+
 export default {
 	get applied() {
 		return themeApplied;
@@ -169,4 +213,5 @@ export default {
 	add,
 	apply,
 	update,
+	updateSystemThemeWatcher,
 };