#1793 Dark theme status bar color in the PWA

frontend/assets/pwa-manifest.webmanifest

@@ -23,6 +23,5 @@
       "type": "image/svg+xml"
     }
   ],
-  "background_color": "#EDEDED",
-  "theme_color": "#EDEDED"
+  "background_color": "#EDEDED"
 }

frontend/index.html

@@ -5,6 +5,7 @@
     <title>Group Income</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="theme-color" content="#F5F5F5">
     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="manifest" href="/assets/pwa-manifest.webmanifest" />
     <link rel="icon" href="/assets/images/group-income-icon-transparent.png" sizes="32x32">

frontend/main.js

@@ -13,7 +13,7 @@ import type { GIMessage } from '~/shared/domains/chelonia/chelonia.js'
 import '~/shared/domains/chelonia/chelonia.js'
 import { CONTRACT_IS_SYNCING } from '~/shared/domains/chelonia/events.js'
 import * as Common from '@common/common.js'
-import { LOGIN, LOGOUT, SWITCH_GROUP } from './utils/events.js'
+import { LOGIN, LOGOUT, SWITCH_GROUP, THEME_CHANGE } from './utils/events.js'
 import './controller/namespace.js'
 import './controller/actions/index.js'
 import './controller/backend.js'
@@ -339,6 +339,7 @@ async function startApp () {
         )
       }
 
+      sbp('okTurtles.events/emit', THEME_CHANGE, this.$store.state.settings.themeColor)
       this.setBadgeOnTab()
     },
     computed: {

frontend/model/settings/vuexModule.js

@@ -3,7 +3,7 @@
 import sbp from '@sbp/sbp'
 
 import Colors from './colors.js'
-import { LOGOUT, SET_APP_LOGS_FILTER } from '@utils/events.js'
+import { LOGOUT, SET_APP_LOGS_FILTER, THEME_CHANGE } from '@utils/events.js'
 import { cloneDeep } from '~/frontend/model/contracts/shared/giLodash.js'
 import { THEME_LIGHT, THEME_DARK } from './themes.js'
 
@@ -13,6 +13,15 @@ const checkSystemColor = () => {
     : THEME_LIGHT
 }
 
+const updateMetaThemeTag = (theme: string) => {
+  // update the content of <meta name='theme-color' /> according to the changed theme
+  const metaTag: any = document.querySelector('meta[name="theme-color"]')
+
+  if (metaTag) {
+    metaTag.content = theme === THEME_DARK ? '#2E3032' : '#F5F5F5'
+  }
+}
+
 const defaultTheme = 'system'
 const defaultColor: string = checkSystemColor()
 
@@ -72,13 +81,19 @@ const mutations = {
   },
   setTheme (state, theme) {
     state.theme = theme
-    state.themeColor = theme === 'system' ? checkSystemColor() : theme
+
+    const themeColor = theme === 'system' ? checkSystemColor() : theme
+    state.themeColor = themeColor
+    sbp('okTurtles.events/emit', THEME_CHANGE, themeColor)
   }
 }
 
 // Default application settings must apply again when we're no longer logged in (#1344).
 sbp('okTurtles.events/on', LOGOUT, () => sbp('state/vuex/commit', 'resetSettings'))
 
+// make sure to set the status bar color according to the theme setting change.
+sbp('okTurtles.events/on', THEME_CHANGE, updateMetaThemeTag)
+
 export default ({
   state: () => cloneDeep(defaultSettings),
   getters,

frontend/utils/events.js

@@ -32,3 +32,5 @@ export const INCOME_DETAILS_UPDATE = 'income-details-update'
 export const PAYMENTS_RECORDED = 'payments-recorded'
 
 export const AVATAR_EDITED = 'avatar-edited'
+
+export const THEME_CHANGE = 'theme-change'