Root mobile detection and some theming fixes

2023-10-19 16:49:49 -04:00 · 2023-10-19 16:49:49 -04:00 · 672cd0c1b9
commit 672cd0c1b9
parent 9e753e033d
1 changed files with 27 additions and 2 deletions
--- 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>
      );
    }