Ajout squelette HTML

2024-12-09 23:24:53 +01:00 · 2024-12-09 23:24:53 +01:00 · ff85c8bd51
commit ff85c8bd51
parent 1f4cfe0b77
1 changed files with 36 additions and 0 deletions
--- a/client/app/+html.tsx
+++ b/client/app/+html.tsx
@ -0,0 +1,36 @@
+import Head from 'expo-router/head'
+import { ScrollViewStyleReset } from 'expo-router/html'
+import React from 'react'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="fr">
+      <head>
+        <Head>
+          <title>Traintrape-moi</title>
+        </Head>
+        <meta charSet="utf-8" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <title>Traintrape-moi</title>
+        <ScrollViewStyleReset />
+
+        {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
+        <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`