feat: update theme colors and enhance layout for mobile responsiveness

- Changed theme and background colors in the web manifest and meta tags to a darker shade (#121212) for improved aesthetics.
- Adjusted the `MainAppBar` component to include safe area insets for better layout on devices with notches.
- Modified the `MobilePlayground` component to account for safe area insets in its height calculation, ensuring a more consistent user experience across different devices.
- These updates enhance the visual consistency and usability of the application, particularly on mobile devices.

Author: mkayander

public/site.webmanifest

@@ -13,7 +13,7 @@
       "type": "image/png"
     }
   ],
-  "theme_color": "#ffffff",
-  "background_color": "#ffffff",
+  "theme_color": "#121212",
+  "background_color": "#121212",
   "display": "standalone"
 }

src/features/appBar/ui/MainAppBar.tsx

@@ -155,6 +155,7 @@ export const MainAppBar: React.FC<MainAppBarProps> = ({
         variant={appBarVariant}
         color={"transparent"}
         sx={{
+          paddingTop: "env(safe-area-inset-top, 0px)",
           transition: "all .2s",
           backdropFilter: isScrolled ? "blur(12px)" : "blur(0px)",
           background: isScrolled

src/features/playground/ui/MobilePlayground.tsx

@@ -25,7 +25,7 @@ export const MobilePlayground: React.FC = () => {
     <Box
       component="main"
       sx={{
-        height: `calc(100vh - ${MOBILE_APPBAR_HEIGHT}px)`,
+        height: `calc(100vh - ${MOBILE_APPBAR_HEIGHT}px - env(safe-area-inset-top, 0px))`,
         overflow: "hidden",
       }}
     >

src/pages/_document.tsx

@@ -69,8 +69,14 @@ function Document({ emotionStyleTags }: MyDocumentProps) {
         />
         <link rel="manifest" href="/site.webmanifest" />
         <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-        <meta name="msapplication-TileColor" content="#da532c" />
-        {/*<meta name="theme-color" content="#ffffff"/>*/}
+        <meta name="msapplication-TileColor" content="#121212" />
+        <meta name="theme-color" content="#121212" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content="black-translucent"
+        />
+        <meta name="apple-mobile-web-app-title" content="dStruct" />
 
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />