0.5.5 => add auto theme option

groovelauncher · Jan 31, 2025 · 5c93f6b · 5c93f6b
1 parent 02026ce
commit 5c93f6b
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/src/apps/groove.internal.settings/index.html b/src/apps/groove.internal.settings/index.html
@@ -160,6 +160,7 @@ <h1 class="app-title" data-i18n="settings.title">Settings</h1>
               <div class="metro-dropdown-menu" id="theme-chooser" selected="1">
                 <div class="metro-dropdown-option" data-i18n="settings.theme.themes.light">Light</div>
                 <div class="metro-dropdown-option" data-i18n="settings.theme.themes.dark">Dark</div>
+                <div class="metro-dropdown-option" data-i18n="settings.theme.themes.auto">Auto</div>
               </div>
             </div>
 

diff --git a/src/apps/groove.internal.settings/pages/00_home+theme.js b/src/apps/groove.internal.settings/pages/00_home+theme.js
@@ -1,3 +1,4 @@
+import { grooveThemes } from "../../../scripts/GrooveProperties";
 import imageStore from "../../../scripts/imageStore";
 import i18n from "../../../scripts/localeManager";
 import iro from '@jaames/iro';

diff --git a/src/scripts/GrooveBoard.js b/src/scripts/GrooveBoard.js
@@ -715,10 +715,12 @@ const backendMethods = {
   },
   setTheme: (theme, doNotSave = false) => {
     if (Object.values(grooveThemes).includes(theme)) {
-      document.body.classList[theme ? "add" : "remove"]("light-mode");
-      Groove.setNavigationBarAppearance(theme ? "dark" : "light");
-      Groove.setStatusBarAppearance(theme ? "dark" : "light");
-      document.querySelectorAll("iframe.groove-app-view").forEach(e => appViewEvents.setTheme(e, theme))
+      var applyTheme = theme;
+      if (theme == 2) applyTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 0 : 1
+      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)
     } else {
       console.error("Invalid theme!");
@@ -1130,3 +1132,9 @@ window.addEventListener("load", () => {
     backendMethods.animationDurationScale.set(window["Groove"] ? Groove.getAnimationDurationScale() : 1)
   });
 })
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+  if (localStorage["theme"] == "2") {
+    backendMethods.setTheme(2, true);
+  }
+});
diff --git a/src/scripts/GrooveProperties.js b/src/scripts/GrooveProperties.js
@@ -27,6 +27,7 @@ const grooveTileColumns = {
 }
 const grooveThemes = {
     dark: 0,
-    light: 1
+    light: 1,
+    auto: 2
 }
-export { grooveColors, grooveTileColumns,grooveThemes }
+export { grooveColors, grooveTileColumns, grooveThemes }
diff --git a/src/scripts/shared/internal-app.js b/src/scripts/shared/internal-app.js
@@ -23,7 +23,9 @@ const setAccentColor = (color) => {
 // Handles theme switching between light and dark modes
 const setTheme = (theme) => {
   if (Object.values(grooveThemes).includes(theme)) {
-    document.body.classList[theme ? "add" : "remove"]("light-mode");
+    var applyTheme = theme;
+    if (theme == 2) applyTheme = window.parent.matchMedia('(prefers-color-scheme: dark)').matches ? 0 : 1
+    document.body.classList[applyTheme ? "add" : "remove"]("light-mode");
     document.body.classList.add("showBackground")
   } else {
     console.error("Invalid theme!");

diff --git a/www/assets/defaultlocales/settings.json b/www/assets/defaultlocales/settings.json
@@ -15,7 +15,8 @@
     "friendly_tiles": "You can change the size and number of tiles available on your home screen.",
     "themes": {
       "light": "Light",
-      "dark": "Dark"
+      "dark": "Dark",
+      "auto": "Auto"
     }
   },
   "screen_rotation": {