Change background color a little more controlled

package.json

@@ -159,6 +159,7 @@
     "react-device-detect": "2.2.3",
     "react-dom": "18.3.1",
     "react-dropzone": "14.2.3",
+    "react-helmet-async": "^2.0.5",
     "react-leaflet": "^4.2.1",
     "react-number-format": "^5.3.1",
     "react-router-dom": "6.26.2",

src/components/presentation/Presentation.tsx

@@ -21,6 +21,7 @@ import { useCurrentParty } from 'src/features/party/PartiesProvider';
 import { useProfile } from 'src/features/profile/ProfileProvider';
 import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
 import { ProcessTaskType } from 'src/types';
+import { BackgroundColor } from 'src/utils/BackgroundColor';
 import type { PresentationType } from 'src/types';
 
 export interface IPresentationProvidedProps extends PropsWithChildren {
@@ -41,10 +42,10 @@ export const PresentationComponent = ({ header, type, children, renderNavBar = t
   const backgroundColor = isProcessStepsArchived
     ? AltinnAppTheme.altinnPalette.primary.greenLight
     : AltinnAppTheme.altinnPalette.primary.greyLight;
-  document.body.style.background = backgroundColor;
 
   return (
     <RenderStart>
+      <BackgroundColor color={backgroundColor} />
       <div
         data-testid='presentation'
         data-expanded={JSON.stringify(expandedWidth)}

src/features/instantiate/containers/InstantiateContainer.tsx

@@ -9,11 +9,17 @@ import { UnknownError } from 'src/features/instantiate/containers/UnknownError';
 import { useInstantiation } from 'src/features/instantiate/InstantiationContext';
 import { useCurrentParty } from 'src/features/party/PartiesProvider';
 import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
-import { changeBodyBackground } from 'src/utils/bodyStyling';
+import { BackgroundColor } from 'src/utils/BackgroundColor';
 import { HttpStatusCodes } from 'src/utils/network/networking';
 
-export const InstantiateContainer = () => {
-  changeBodyBackground(AltinnAppTheme.altinnPalette.primary.greyLight);
+export const InstantiateContainer = () => (
+  <>
+    <BackgroundColor color={AltinnAppTheme.altinnPalette.primary.greyLight} />
+    <InnerInstantiateContainer />
+  </>
+);
+
+const InnerInstantiateContainer = () => {
   const party = useCurrentParty();
   const instantiation = useInstantiation();
 

src/features/instantiate/containers/InstantiationContainer.tsx

@@ -9,20 +9,20 @@ import { Footer } from 'src/features/footer/Footer';
 import classes from 'src/features/instantiate/containers/InstantiationContainer.module.css';
 import { useProfile } from 'src/features/profile/ProfileProvider';
 import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
-import { changeBodyBackground } from 'src/utils/bodyStyling';
+import { BackgroundColor } from 'src/utils/BackgroundColor';
 
 export interface IInstantiateContainerProps {
   children?: React.ReactNode;
 }
 
 export function InstantiationContainer({ children }: IInstantiateContainerProps) {
-  changeBodyBackground(AltinnAppTheme.altinnPalette.primary.white);
   const profile = useProfile();
 
   return (
     <TaskStoreProvider>
       <DataLoadingProvider>
         <RenderStart>
+          <BackgroundColor color={AltinnAppTheme.altinnPalette.primary.white} />
           <div className={classes.container}>
             <AltinnAppHeader profile={profile} />
             <main id='main-content'>{children}</main>

src/features/instantiate/containers/PartySelection.tsx

@@ -18,8 +18,6 @@ import {
   useSetHasSelectedParty,
 } from 'src/features/party/PartiesProvider';
 import { useNavigate } from 'src/features/routing/AppRoutingContext';
-import { AltinnAppTheme } from 'src/theme/altinnAppTheme';
-import { changeBodyBackground } from 'src/utils/bodyStyling';
 import { HttpStatusCodes } from 'src/utils/network/networking';
 import { capitalizeName } from 'src/utils/stringHelper';
 import type { IParty } from 'src/types/shared';
@@ -77,7 +75,6 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 export const PartySelection = () => {
-  changeBodyBackground(AltinnAppTheme.altinnPalette.primary.white);
   const classes = useStyles();
   const match = useMatch(`/party-selection/:errorCode`);
   const errorCode = match?.params.errorCode;

src/index.tsx

@@ -4,6 +4,7 @@ import 'core-js';
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import { createHashRouter, RouterProvider, ScrollRestoration } from 'react-router-dom';
 import { Slide, ToastContainer } from 'react-toastify';
 
@@ -64,15 +65,17 @@ document.addEventListener('DOMContentLoaded', () => {
       <AppPrefetcher />
       <ErrorBoundary>
         <AppWrapper>
-          <LanguageProvider>
-            <LangToolsStoreProvider>
-              <ThemeWrapper>
-                <UiConfigProvider>
-                  <RouterProvider router={router} />
-                </UiConfigProvider>
-              </ThemeWrapper>
-            </LangToolsStoreProvider>
-          </LanguageProvider>
+          <HelmetProvider>
+            <LanguageProvider>
+              <LangToolsStoreProvider>
+                <ThemeWrapper>
+                  <UiConfigProvider>
+                    <RouterProvider router={router} />
+                  </UiConfigProvider>
+                </ThemeWrapper>
+              </LangToolsStoreProvider>
+            </LanguageProvider>
+          </HelmetProvider>
         </AppWrapper>
       </ErrorBoundary>
     </AppQueriesProvider>,

src/utils/BackgroundColor.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+
+export function BackgroundColor({ color }: { color: string }) {
+  return (
+    <Helmet>
+      <style>{`html > body { background-color: ${color}; }`}</style>
+    </Helmet>
+  );
+}

yarn.lock

@@ -5263,6 +5263,7 @@ __metadata:
     react-device-detect: "npm:2.2.3"
     react-dom: "npm:18.3.1"
     react-dropzone: "npm:14.2.3"
+    react-helmet-async: "npm:^2.0.5"
     react-leaflet: "npm:^4.2.1"
     react-number-format: "npm:^5.3.1"
     react-refresh: "npm:0.14.2"
@@ -13889,6 +13890,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 10c0/0bbd2f3eb41ab2ff7380daaa55105db698d965c396df73e6874831dbafec8c4b5b08ba36ff09df01526caa3c61595247e3269558c284e37646241cba2b90a367
+  languageName: node
+  linkType: hard
+
+"react-helmet-async@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "react-helmet-async@npm:2.0.5"
+  dependencies:
+    invariant: "npm:^2.2.4"
+    react-fast-compare: "npm:^3.2.2"
+    shallowequal: "npm:^1.1.0"
+  peerDependencies:
+    react: ^16.6.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/f390ea8bf13c2681850e5f8eb5b73d8613f407c245a5fd23e9db9b2cc14a3700dd1ce992d3966632886d1d613083294c2aeee009193f49dfa7d145d9f13ea2b0
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.13.1, react-is@npm:^16.7.0":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -14875,6 +14896,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shallowequal@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "shallowequal@npm:1.1.0"
+  checksum: 10c0/b926efb51cd0f47aa9bc061add788a4a650550bbe50647962113a4579b60af2abe7b62f9b02314acc6f97151d4cf87033a2b15fc20852fae306d1a095215396c
+  languageName: node
+  linkType: hard
+
 "shebang-command@npm:^2.0.0":
   version: 2.0.0
   resolution: "shebang-command@npm:2.0.0"