From 7ed0918c2be6de87bb9c5f3589543b884af1ec00 Mon Sep 17 00:00:00 2001 From: Berkay Tumal Date: Fri, 31 Jan 2025 07:08:43 +0300 Subject: [PATCH] auto theme important fix --- .../web/bmdominatezz/gravy/MainActivity.java | 29 +++++++++++++++++++ .../web/bmdominatezz/gravy/WebEvents.java | 3 +- .../web/bmdominatezz/gravy/WebInterface.java | 1 + .../pages/00_home+theme.js | 6 ++-- src/scripts/GrooveBoard.js | 19 +++++++----- src/scripts/grooveMock.js | 12 +++++++- src/scripts/shared/internal-app.js | 4 +-- 7 files changed, 60 insertions(+), 14 deletions(-) diff --git a/android/app/src/main/java/web/bmdominatezz/gravy/MainActivity.java b/android/app/src/main/java/web/bmdominatezz/gravy/MainActivity.java index 6cae3a4..e35a159 100644 --- a/android/app/src/main/java/web/bmdominatezz/gravy/MainActivity.java +++ b/android/app/src/main/java/web/bmdominatezz/gravy/MainActivity.java @@ -2,8 +2,10 @@ import android.annotation.SuppressLint; import android.app.Activity; +import android.content.ComponentCallbacks; import android.content.Intent; import android.content.pm.PackageManager; +import android.content.res.Configuration; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; @@ -175,6 +177,33 @@ protected void onCreate(Bundle savedInstanceState) { }; gravyServer.init(this); gravyServer.start(); + +// Add a listener for configuration changes to detect system theme changes + getResources().getConfiguration().uiMode &= Configuration.UI_MODE_NIGHT_MASK; + + String theme = (getResources().getConfiguration().uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES ? "dark" : "light"; + Log.d("ThemeChange", "System theme changed: " + theme); + try { + webEvents.dispatchEvent(WebEvents.events.systemThemeChange, new JSONObject().put("theme", theme)); + } catch (JSONException e) { + } + + getApplicationContext().registerComponentCallbacks(new ComponentCallbacks() { + @Override + public void onConfigurationChanged(@NonNull Configuration newConfig) { + String theme = (newConfig.uiMode & Configuration.UI_MODE_NIGHT_MASK) == Configuration.UI_MODE_NIGHT_YES ? "dark" : "light"; + Log.d("ThemeChange", "System theme changed: " + theme); + try { + webEvents.dispatchEvent(WebEvents.events.systemThemeChange, new JSONObject().put("theme", theme)); + } catch (JSONException e) { + } + } + + @Override + public void onLowMemory() { + // Handle low memory situations if necessary + } + }); } Handler activityDispatchEventTimeout; diff --git a/android/app/src/main/java/web/bmdominatezz/gravy/WebEvents.java b/android/app/src/main/java/web/bmdominatezz/gravy/WebEvents.java index d188eac..55ebe88 100644 --- a/android/app/src/main/java/web/bmdominatezz/gravy/WebEvents.java +++ b/android/app/src/main/java/web/bmdominatezz/gravy/WebEvents.java @@ -19,7 +19,8 @@ public enum events { appInstall, appUninstall, animationDurationScaleChange, - deepLink + deepLink, + systemThemeChange } WebEvents(Context c, WebView w) { diff --git a/android/app/src/main/java/web/bmdominatezz/gravy/WebInterface.java b/android/app/src/main/java/web/bmdominatezz/gravy/WebInterface.java index 4425cb8..2dfdef8 100644 --- a/android/app/src/main/java/web/bmdominatezz/gravy/WebInterface.java +++ b/android/app/src/main/java/web/bmdominatezz/gravy/WebInterface.java @@ -55,6 +55,7 @@ import java.util.List; import java.util.Locale; import java.util.Map; +import java.util.Objects; import java.util.jar.JarException; import rikka.shizuku.Shizuku; diff --git a/src/apps/groove.internal.settings/pages/00_home+theme.js b/src/apps/groove.internal.settings/pages/00_home+theme.js index 3f7aed9..6d735ac 100644 --- a/src/apps/groove.internal.settings/pages/00_home+theme.js +++ b/src/apps/groove.internal.settings/pages/00_home+theme.js @@ -11,7 +11,7 @@ document.querySelector("#device-placeholder > svg:nth-child(3)").classList.remov document.getElementById("theme-chooser").addEventListener('selected', (e) => { - appViewEvents.setTheme(e.detail.index == 0 ? grooveThemes.light : grooveThemes.dark) + appViewEvents.setTheme(e.detail.index == 0 ? grooveThemes.light : e.detail.index == 1 ? grooveThemes.dark : grooveThemes.auto) }); const accentColorPicker = document.getElementById("accent-color-picker") document.querySelector("div.color-picker").addEventListener("flowClick", (e) => { @@ -139,8 +139,8 @@ setTimeout(() => { } if (urlParams.has("theme")) { - document.querySelector("#theme-chooser").setAttribute("selected", urlParams.get("theme") == "light" ? 0 : 1) - document.querySelector("#theme-chooser").selectOption(urlParams.get("theme") == "light" ? 0 : 1) + document.querySelector("#theme-chooser").setAttribute("selected", urlParams.get("theme") == "light" ? 0 : localStorage["theme"] == "2" ? 2 : 1) + document.querySelector("#theme-chooser").selectOption(urlParams.get("theme") == "light" ? 0 : localStorage["theme"] == "2" ? 2 : 1) } if (urlParams.has("tileColumns")) { diff --git a/src/scripts/GrooveBoard.js b/src/scripts/GrooveBoard.js index ce86a1f..8b8cbdc 100644 --- a/src/scripts/GrooveBoard.js +++ b/src/scripts/GrooveBoard.js @@ -715,13 +715,18 @@ const backendMethods = { }, setTheme: (theme, doNotSave = false) => { if (Object.values(grooveThemes).includes(theme)) { - var applyTheme = theme; - if (theme == 2) applyTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 0 : 1 + var applyTheme + if (theme == 2) applyTheme = Number(localStorage.getItem("autoTheme")); else applyTheme = theme document.body.classList[applyTheme ? "add" : "remove"]("light-mode"); Groove.setNavigationBarAppearance(applyTheme ? "dark" : "light"); Groove.setStatusBarAppearance(applyTheme ? "dark" : "light"); - document.querySelectorAll("iframe.groove-app-view").forEach(e => appViewEvents.setTheme(e, applyTheme)) - if (!doNotSave) localStorage.setItem("theme", theme) + document.querySelectorAll("iframe.groove-app-view").forEach(e => appViewEvents.setTheme(e, theme)) + if (!doNotSave) { + localStorage.setItem("theme", theme) + setTimeout(() => { + localStorage.setItem("theme", theme) + }, 100); + } } else { console.error("Invalid theme!"); } @@ -1132,9 +1137,9 @@ window.addEventListener("load", () => { backendMethods.animationDurationScale.set(window["Groove"] ? Groove.getAnimationDurationScale() : 1) }); }) - -window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { +window.addEventListener("systemThemeChange", function (e) { + localStorage["autoTheme"] = e.detail.theme == "dark" ? "0" : "1" if (localStorage["theme"] == "2") { backendMethods.setTheme(2, true); } -}); \ No newline at end of file +}) \ No newline at end of file diff --git a/src/scripts/grooveMock.js b/src/scripts/grooveMock.js index 0a360cd..9f60a3d 100644 --- a/src/scripts/grooveMock.js +++ b/src/scripts/grooveMock.js @@ -281,4 +281,14 @@ function playHapticTick(volume = 1) { window.mockDeepLink = (url) => window.dispatchEvent(new CustomEvent("deepLink", { detail: { url: url } })) window.mockDeepLinkExample = () => window.mockDeepLink("groove:?installStyle=" + encodeURI("https://gist.githubusercontent.com/berkaytumal/5e6b101fcd70450078f993d74f6cb610/raw/85cb730c2e9d95609cad1c1c165a2796cb4258c0/style.css")) export default GrooveMock; -export { BuildConfigMock, GrooveMock } \ No newline at end of file +export { BuildConfigMock, GrooveMock } + +function onThemeChange() { + const theme_d = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light" + window.dispatchEvent(new CustomEvent("systemThemeChange", { detail: { theme: theme_d } })) +} +window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', onThemeChange); +onThemeChange() +setTimeout(() => { + onThemeChange() +}, 1000); \ No newline at end of file diff --git a/src/scripts/shared/internal-app.js b/src/scripts/shared/internal-app.js index 87edadf..5c7b6ec 100644 --- a/src/scripts/shared/internal-app.js +++ b/src/scripts/shared/internal-app.js @@ -23,8 +23,8 @@ const setAccentColor = (color) => { // Handles theme switching between light and dark modes const setTheme = (theme) => { if (Object.values(grooveThemes).includes(theme)) { - var applyTheme = theme; - if (theme == 2) applyTheme = window.parent.matchMedia('(prefers-color-scheme: dark)').matches ? 0 : 1 + var applyTheme = 0; + if (theme == 2) applyTheme = Number(localStorage["autoTheme"]); else applyTheme = theme; document.body.classList[applyTheme ? "add" : "remove"]("light-mode"); document.body.classList.add("showBackground") } else {