Adds dynamic status bar colors

neuland-ingolstadt · Nov 7, 2023 · d2307e7 · d2307e7
1 parent d291426
commit d2307e7
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 3 deletions.
diff --git a/rogue-thi-app/data/themes.json b/rogue-thi-app/data/themes.json
@@ -1,8 +1,8 @@
 [
     { "name": { "en": "Automatic", "de": "Automatisch" }, "style": "default", "mapTheme": "system" },
     { "name": { "en": "Light", "de": "Hell" }, "style": "light", "mapTheme": "light"},
-    { "name": { "en": "Blue", "de": "Blau" }, "style": "blue", "mapTheme": "light"},
     { "name": { "en": "Dark", "de": "Dunkel" }, "style": "dark", "mapTheme": "dark" },
+    { "name": { "en": "Blue", "de": "Blau" }, "style": "blue", "mapTheme": "light"},
     { "name": { "en": "Barbie & Ken", "de": "Barbie & Ken" }, "style": "barbie", "mapTheme": "light" },
     { "name": { "en": "Retro", "de": "Retro" }, "style": "retro", "mapTheme": "dark" },
     { "name": { "en": "Windows 95", "de": "Windows 95" }, "style": "95", "mapTheme": "light" },

diff --git a/rogue-thi-app/pages/_app.jsx b/rogue-thi-app/pages/_app.jsx
@@ -29,6 +29,7 @@ config.autoAddCss = false
 function MyApp ({ Component, pageProps }) {
   const router = useRouter()
   const [theme, setTheme] = useState('default')
+  const [themeColor, setThemeColor] = useState(undefined)
   const [showThemeModal, setShowThemeModal] = useState(false)
   const [showDashboardModal, setShowDashboardModal] = useState(false)
   const [showPersonalDataModal, setShowPersonalDataModal] = useState(false)
@@ -43,6 +44,9 @@ function MyApp ({ Component, pageProps }) {
     resetOrder
   } = useDashboard()
 
+  const LIGHT = '#ffffff'
+  const DARK = '#202020'
+
   useEffect(() => {
     // migrate legacy cookie theme setting to localStorage
     // added 2022-04-15, can be removed later
@@ -65,6 +69,42 @@ function MyApp ({ Component, pageProps }) {
     }
   }, [theme, router.pathname])
 
+  // Update the theme color and theme when the user changes dark/light mode
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const handleChange = () => {
+      if (theme === 'default') {
+        if (mediaQuery.matches) {
+          setThemeColor(DARK)
+          setTheme('default')
+        } else {
+          setThemeColor(LIGHT)
+          setTheme('default')
+        }
+      }
+    }
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  })
+
+  // Update the theme color when the user changes the theme
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+    const isDarkMode = mediaQuery.matches
+    const themeColors = {
+      light: LIGHT,
+      dark: DARK,
+      retro: '#121212',
+      barbie: '#d44e95',
+      hacker: '#0ae40a',
+      pride: '#8845ef',
+      blue: '#005ea1',
+      95: '#008080'
+    }
+    const selectedThemeColor = themeColors[theme] || (isDarkMode ? DARK : LIGHT)
+    setThemeColor(selectedThemeColor)
+  }, [theme])
+
   return (
     <ShowLanguageModal.Provider value={[showLanguageModal, setShowLanguageModal]}>
       <ThemeContext.Provider value={[computedTheme, setTheme]}>
@@ -92,7 +132,7 @@ function MyApp ({ Component, pageProps }) {
                     />
                     <meta name="description" content="Eine inoffizielle App für die Technische Hochschule Ingolstadt"/>
                     <meta name="keywords" content="THI, Technische Hochschule Ingolstadt, App"/>
-                    <meta name="theme-color" content="#8845ef"/>
+                    <meta name="theme-color" content={themeColor}/>
 
                     <link rel="manifest" href="/manifest.json"/>
                     <meta name="apple-mobile-web-app-status-bar-style" content="default"/>

diff --git a/rogue-thi-app/public/manifest.json b/rogue-thi-app/public/manifest.json
@@ -1,7 +1,6 @@
 {
   "name": "neuland.app",
   "short_name": "neuland.app",
-  "theme_color": "#8845ef",
   "background_color": "#ffffff",
   "display": "standalone",
   "orientation": "portrait",