From 4604052effbe576012973576b69c7255bb350f1d Mon Sep 17 00:00:00 2001 From: Rohit Kushwaha Date: Wed, 22 Jul 2026 18:36:36 +0530 Subject: [PATCH 1/3] fix: system theme --- src/palettes/changeTheme/index.js | 27 ++++++++------------------- src/theme/preInstalled.js | 1 + 2 files changed, 9 insertions(+), 19 deletions(-) diff --git a/src/palettes/changeTheme/index.js b/src/palettes/changeTheme/index.js index b76e88f1d..c4c5d25b2 100644 --- a/src/palettes/changeTheme/index.js +++ b/src/palettes/changeTheme/index.js @@ -2,11 +2,12 @@ import "./style.scss"; import palette from "components/palette"; import config from "lib/config"; import appSettings from "lib/settings"; -import { isDeviceDarkTheme } from "lib/systemConfiguration"; import themes from "theme/list"; import { updateSystemTheme } from "theme/preInstalled"; import changeEditorTheme from "../changeEditorTheme"; +const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); + export default function changeTheme(type = "editor") { if (type === "editor") return changeEditorTheme(); palette( @@ -41,30 +42,18 @@ function generateHints(type) { }); } -let previousDark = isDeviceDarkTheme(); -const updateTimeMs = 2000; - -let intervalId = null; - -function syncSystemTheme() { - if (appSettings.value.appTheme.toLowerCase() === "system") { - const isDark = isDeviceDarkTheme(); - if (isDark !== previousDark) { - previousDark = isDark; - updateSystemTheme(isDark); - } - } +function syncSystemTheme(event) { + if (appSettings.value.appTheme.toLowerCase() !== "system") return; + const isDark = event ? event.matches : darkModeMediaQuery.matches; + updateSystemTheme(isDark); } function startSystemThemeWatcher() { - if (intervalId) return; - intervalId = setInterval(syncSystemTheme, updateTimeMs); + darkModeMediaQuery.addEventListener("change", syncSystemTheme); } function stopSystemThemeWatcher() { - if (!intervalId) return; - clearInterval(intervalId); - intervalId = null; + darkModeMediaQuery.removeEventListener("change", syncSystemTheme); } function updateSystemThemeWatcher(theme) { diff --git a/src/theme/preInstalled.js b/src/theme/preInstalled.js index 6e3165744..bff21af82 100644 --- a/src/theme/preInstalled.js +++ b/src/theme/preInstalled.js @@ -280,6 +280,7 @@ export function updateSystemTheme(darkTheme) { if (appSettings?.value?.appTheme === "system") { apply(system.id); + appSettings.update({ editorTheme: system.preferredEditorTheme }); } } From 7eb02704d128360e993836c4e82a317b0b37d64f Mon Sep 17 00:00:00 2001 From: Rohit Kushvaha Date: Wed, 22 Jul 2026 19:24:45 +0530 Subject: [PATCH 2/3] Update src/theme/preInstalled.js Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- src/theme/preInstalled.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/preInstalled.js b/src/theme/preInstalled.js index bff21af82..8eb266e96 100644 --- a/src/theme/preInstalled.js +++ b/src/theme/preInstalled.js @@ -280,7 +280,7 @@ export function updateSystemTheme(darkTheme) { if (appSettings?.value?.appTheme === "system") { apply(system.id); - appSettings.update({ editorTheme: system.preferredEditorTheme }); + appSettings.update({ editorTheme: system.preferredEditorTheme }, false); } } From bfc64b36cbdaec610027ffebceaff0ca423ed42e Mon Sep 17 00:00:00 2001 From: Rohit Kushwaha Date: Sun, 26 Jul 2026 18:07:52 +0530 Subject: [PATCH 3/3] fix: theme listener --- src/palettes/changeTheme/index.js | 31 +-------------------- src/theme/list.js | 45 +++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 30 deletions(-) diff --git a/src/palettes/changeTheme/index.js b/src/palettes/changeTheme/index.js index c4c5d25b2..5d6417053 100644 --- a/src/palettes/changeTheme/index.js +++ b/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; diff --git a/src/theme/list.js b/src/theme/list.js index 5d52cfccd..fca3f9c2c 100644 --- a/src/theme/list.js +++ b/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, };