Root mobile detection and some theming fixes

regalijan · Oct 19, 2023 · 672cd0c · 672cd0c
1 parent 9e753e0
commit 672cd0c
Showing 1 changed file with 27 additions and 2 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -22,6 +22,7 @@ import {
 } from "@remix-run/react";
 import { type ErrorResponse } from "@remix-run/router";
 import { LinksFunction } from "@remix-run/cloudflare";
+import MobileDetect from "mobile-detect";
 import Login from "../components/Login.js";
 import Navigation from "../components/Navigation.js";
 
@@ -117,6 +118,18 @@ export async function loader({
   if (context.env.DSN) data.dsn = context.env.DSN;
   if (context.data.theme) data.theme = context.data.theme;
 
+  const isMobileCH = context.request.headers.get("sec-ch-ua-mobile");
+
+  if (isMobileCH) {
+    data.mobile = isMobileCH;
+    return data;
+  }
+
+  const ua = context.request.headers.get("user-agent");
+
+  if (!ua) data.mobile = "?0";
+  else data.mobile = `?${Number(new MobileDetect(ua).mobile())}`;
+
   return data;
 }
 
@@ -164,7 +177,13 @@ function getMarkup(
       );
 
       return (
-        <html lang="en-US">
+        <html
+          lang="en-US"
+          {...(loaderData.theme && {
+            "data-theme": loaderData.theme,
+            style: { colorScheme: loaderData.theme },
+          })}
+        >
           <head>
             <Links />
             {serverStyleData?.map(({ key, ids, css }) => (
@@ -186,7 +205,13 @@ function getMarkup(
             />
             <Meta />
           </head>
-          <body>{body}</body>
+          <body
+            {...(loaderData.theme && {
+              className: `chakra-ui-${loaderData.theme}`,
+            })}
+          >
+            {body}
+          </body>
         </html>
       );
     }