From 5cf0077e3d13953d5d3f79698be529c011f0f3d5 Mon Sep 17 00:00:00 2001
From: Kanav Arora <kanavarora1515@gmail.com>
Date: Wed, 17 Jan 2024 16:24:29 +0530
Subject: [PATCH] UI Fixes for Dark Mode (#3337)

* Forced Scroll BG color fix

* pr requested changes
---
 .../modules/ui/layout/page/DefaultLayout.tsx  | 58 +++++++++++--------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
index 9c5c51a8a..932d19cfe 100644
--- a/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/page/DefaultLayout.tsx
@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { css, Global, useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { AnimatePresence, LayoutGroup } from 'framer-motion';
 
@@ -62,30 +63,39 @@ type DefaultLayoutProps = {
 export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   const onboardingStatus = useOnboardingStatus();
   const isMobile = useIsMobile();
-
+  const theme = useTheme();
   return (
-    <StyledLayout>
-      <CommandMenu />
-      <KeyboardShortcutMenu />
-      <StyledPageContainer>
-        <StyledAppNavigationDrawer />
-        <StyledMainContainer>
-          {onboardingStatus &&
-          onboardingStatus !== OnboardingStatus.Completed ? (
-            <>
-              <SignInBackgroundMockPage />
-              <AnimatePresence mode="wait">
-                <LayoutGroup>
-                  <AuthModal>{children}</AuthModal>
-                </LayoutGroup>
-              </AnimatePresence>
-            </>
-          ) : (
-            <AppErrorBoundary>{children}</AppErrorBoundary>
-          )}
-        </StyledMainContainer>
-      </StyledPageContainer>
-      {isMobile && <MobileNavigationBar />}
-    </StyledLayout>
+    <>
+      <Global
+        styles={css`
+          body {
+            background: ${theme.background.tertiary};
+          }
+        `}
+      />
+      <StyledLayout>
+        <CommandMenu />
+        <KeyboardShortcutMenu />
+        <StyledPageContainer>
+          <StyledAppNavigationDrawer />
+          <StyledMainContainer>
+            {onboardingStatus &&
+            onboardingStatus !== OnboardingStatus.Completed ? (
+              <>
+                <SignInBackgroundMockPage />
+                <AnimatePresence mode="wait">
+                  <LayoutGroup>
+                    <AuthModal>{children}</AuthModal>
+                  </LayoutGroup>
+                </AnimatePresence>
+              </>
+            ) : (
+              <AppErrorBoundary>{children}</AppErrorBoundary>
+            )}
+          </StyledMainContainer>
+        </StyledPageContainer>
+        {isMobile && <MobileNavigationBar />}
+      </StyledLayout>
+    </>
   );
 };