Recordscreen darkkmode updated

src/pages/RecordingPage.tsx

@@ -15,6 +15,7 @@ import { editRecordingFromStorage } from "../api/storage";
 import { WhereWhatPair } from "maxun-core";
 import styled from "styled-components";
 import BrowserRecordingSave from '../components/molecules/BrowserRecordingSave';
+import { useThemeMode } from '../context/theme-provider';
 
 interface RecordingPageProps {
   recordingName?: string;
@@ -26,13 +27,14 @@ export interface PairForEdit {
 }
 
 export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
-
+  const { darkMode } = useThemeMode();
   const [isLoaded, setIsLoaded] = React.useState(false);
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const [pairForEdit, setPairForEdit] = useState<PairForEdit>({
     pair: null,
     index: 0,
   });
+
   const [showOutputData, setShowOutputData] = useState(false);
 
   const browserContentRef = React.useRef<HTMLDivElement>(null);
@@ -56,15 +58,16 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
   useEffect(() => changeBrowserDimensions(), [isLoaded])
 
   useEffect(() => {
-    document.body.style.background = 'radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(232, 191, 222, 1) 100%, rgba(255, 255, 255, 1) 100%)';
-    document.body.style.filter = 'progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1);'
+    if (darkMode) {
+      document.body.style.background = 'radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(35, 1, 18, 1) 100%, rgba(255, 255, 255, 1) 100%)';
+    } else {
+      document.body.style.background = 'radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(232, 191, 222, 1) 100%, rgba(255, 255, 255, 1) 100%)';
+    }
 
     return () => {
-      // Cleanup the background when leaving the page
       document.body.style.background = '';
-      document.body.style.filter = '';
     };
-  }, []);
+  }, [darkMode]);
 
   useEffect(() => {
     let isCancelled = false;
@@ -159,4 +162,5 @@ const RecordingPageWrapper = styled.div`
   width: 100vw;
   height: 100vh;
   overflow: hidden;
+  
 `;