set accent color on body

package.json

@@ -8,7 +8,7 @@
     "@peculiar/x509": "1.9.6",
     "@wireapp/avs": "9.5.13",
     "@wireapp/commons": "5.2.4",
-    "@wireapp/core": "43.5.1",
+    "@wireapp/core": "43.5.2",
     "@wireapp/react-ui-kit": "9.12.5",
     "@wireapp/store-engine-dexie": "2.1.7",
     "@wireapp/webapp-events": "0.18.3",

src/script/components/AppContainer/AppContainer.tsx

@@ -27,6 +27,7 @@ import {SIGN_OUT_REASON} from 'src/script/auth/SignOutReason';
 import {useSingleInstance} from 'src/script/hooks/useSingleInstance';
 import {PROPERTIES_TYPE} from 'src/script/properties/PropertiesType';
 
+import {useAccentColor} from './hooks/useAccentColor';
 import {useTheme} from './hooks/useTheme';
 
 import {Configuration} from '../../Config';
@@ -50,6 +51,7 @@ export const AppContainer: FC<AppProps> = ({config, clientType}) => {
   window.wire.app = app;
   const mainView = new MainViewModel(app.repository);
   useTheme(() => app.repository.properties.getPreference(PROPERTIES_TYPE.INTERFACE.THEME));
+  useAccentColor();
 
   const {hasOtherInstance, registerInstance} = useSingleInstance();
 

src/script/components/AppContainer/hooks/useAccentColor.ts

@@ -0,0 +1,50 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useEffect} from 'react';
+
+import ko from 'knockout';
+import {container} from 'tsyringe';
+
+import {UserState} from 'src/script/user/UserState';
+
+function setAccentColor(accentColor?: number) {
+  if (!accentColor) {
+    return;
+  }
+  const classes = document.body.className
+    .split(' ')
+    .filter(elementClass => !elementClass.startsWith('main-accent-color-'))
+    .concat(`main-accent-color-${accentColor}`);
+  document.body.className = classes.join(' ');
+}
+
+export function useAccentColor() {
+  const userState = container.resolve(UserState);
+  useEffect(() => {
+    const accentColor = ko.pureComputed(() => {
+      const selfUser = userState.self();
+      return selfUser?.accent_id();
+    });
+    const subscription = accentColor.subscribe(accent_color => {
+      setAccentColor(accent_color);
+    });
+    return () => subscription.dispose();
+  }, []);
+}

src/script/page/AppMain.tsx

@@ -72,7 +72,7 @@ interface AppMainProps {
   conversationState?: ConversationState;
 }
 
-const AppMain: FC<AppMainProps> = ({
+export const AppMain: FC<AppMainProps> = ({
   app,
   mainView,
   selfUser,
@@ -95,11 +95,10 @@ const AppMain: FC<AppMainProps> = ({
     repositories.notification,
   );
 
-  const {
-    accent_id,
-    availability: userAvailability,
-    isActivatedAccount,
-  } = useKoSubscribableChildren(selfUser, ['accent_id', 'availability', 'isActivatedAccount']);
+  const {availability: userAvailability, isActivatedAccount} = useKoSubscribableChildren(selfUser, [
+    'availability',
+    'isActivatedAccount',
+  ]);
 
   const teamState = container.resolve(TeamState);
   const userState = container.resolve(UserState);
@@ -224,7 +223,6 @@ const AppMain: FC<AppMainProps> = ({
     <StyledApp
       themeId={THEME_ID.DEFAULT}
       css={{backgroundColor: 'unset', height: '100%'}}
-      className={`main-accent-color-${accent_id} show`}
       id="wire-main"
       data-uie-name="status-webapp"
       data-uie-value="is-loaded"
@@ -303,5 +301,3 @@ const AppMain: FC<AppMainProps> = ({
     </StyledApp>
   );
 };
-
-export {AppMain};

yarn.lock

@@ -5037,9 +5037,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wireapp/core@npm:43.5.1":
-  version: 43.5.1
-  resolution: "@wireapp/core@npm:43.5.1"
+"@wireapp/core@npm:43.5.2":
+  version: 43.5.2
+  resolution: "@wireapp/core@npm:43.5.2"
   dependencies:
     "@wireapp/api-client": ^26.8.2
     "@wireapp/commons": ^5.2.4
@@ -5059,7 +5059,7 @@ __metadata:
     long: ^5.2.0
     uuidjs: 4.2.13
     zod: 3.22.4
-  checksum: c0c80ac0d9014453067c90338101c5492abfda058a848ff7203448fc3d0c0cc489cc66588642acf9be2e478ad2672b0c593286e24d414ca04c7d452dac83bcff
+  checksum: fe8a9854707f4b23790479d93f5d1da38dd5caccd350d96bf18e3aad56434fa8b4209f5866ba0eed562d86bb4c388fca2a227d51eedce82ba5bdf6aae2143b2b
   languageName: node
   linkType: hard
 
@@ -17769,7 +17769,7 @@ __metadata:
     "@wireapp/avs": 9.5.13
     "@wireapp/commons": 5.2.4
     "@wireapp/copy-config": 2.1.13
-    "@wireapp/core": 43.5.1
+    "@wireapp/core": 43.5.2
     "@wireapp/eslint-config": 3.0.4
     "@wireapp/prettier-config": 0.6.3
     "@wireapp/react-ui-kit": 9.12.5