Refactor code structure for improved readability and maintainability

src/main.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { FluentProvider, webLightTheme, webDarkTheme } from '@fluentui/react-components';
 import App from './App';
 import './index.css';
 
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <FluentProvider theme={prefersDark ? webDarkTheme : webLightTheme} style={{ height: '100vh' }}>
+      <App />
+    </FluentProvider>
   </React.StrictMode>
 );