From c4e658eaf637b1dd5074dd84760960235d0c9b4c Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sat, 22 Aug 2026 08:14:40 +0530
Subject: [PATCH] fix(theme): prevent freeze when switching to system theme

---
 src/theme/list.js         | 14 +++++++++++---
 src/theme/preInstalled.js |  5 +++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/theme/list.js b/src/theme/list.js
index fca3f9c2c..890ea6cd9 100644
--- a/src/theme/list.js
+++ b/src/theme/list.js
@@ -87,6 +87,11 @@ export async function apply(id, init) {
 	if (!DOES_SUPPORT_THEME) {
 		id = "default";
 	}
+	if (id.toLowerCase() === "system") {
+		// Refresh the mutable System theme before reading its preferred editor
+		// theme. Do not re-enter apply() while appTheme is being updated below.
+		updateSystemTheme(isDeviceDarkTheme(), false);
+	}
 
 	themeApplied = true;
 	const theme = get(id);
@@ -164,10 +169,10 @@ export function update(theme) {
 	});
 }
 
-function syncSystemTheme(event) {
+function syncSystemTheme(event, applyTheme = true) {
 	if (settings.value.appTheme.toLowerCase() !== "system") return;
 	const isDark = event ? event.matches : darkModeMediaQuery.matches;
-	updateSystemTheme(isDark);
+	updateSystemTheme(isDark, applyTheme);
 }
 
 function startSystemThemeWatcher() {
@@ -197,7 +202,10 @@ function stopSystemThemeWatcher() {
 export function updateSystemThemeWatcher(theme) {
 	if (String(theme).toLowerCase() === "system") {
 		startSystemThemeWatcher();
-		syncSystemTheme();
+		// Starting the watcher happens from the appTheme update listener. Applying
+		// the theme here would update appTheme again before the first settings
+		// update is saved, causing unbounded synchronous recursion.
+		syncSystemTheme(undefined, false);
 		return;
 	}
 	stopSystemThemeWatcher();
diff --git a/src/theme/preInstalled.js b/src/theme/preInstalled.js
index 8eb266e96..76120a1b1 100644
--- a/src/theme/preInstalled.js
+++ b/src/theme/preInstalled.js
@@ -243,8 +243,9 @@ export function getSystemEditorTheme(darkTheme) {
 /**
  * Update the system theme based on the user's preference.
  * @param {boolean} darkTheme Whether the user prefers a dark theme.
+ * @param {boolean} applyTheme Whether to apply the refreshed theme immediately.
  */
-export function updateSystemTheme(darkTheme) {
+export function updateSystemTheme(darkTheme, applyTheme = true) {
 	if (darkTheme) {
 		system.type = "dark";
 		system.primaryColor = "rgb(35, 39, 42)";
@@ -278,7 +279,7 @@ export function updateSystemTheme(darkTheme) {
 
 	system.preferredEditorTheme = getSystemEditorTheme(darkTheme);
 
-	if (appSettings?.value?.appTheme === "system") {
+	if (applyTheme && appSettings?.value?.appTheme === "system") {
 		apply(system.id);
 		appSettings.update({ editorTheme: system.preferredEditorTheme }, false);
 	}