Support color-scheme in meta tag

JustMarkov · May 21, 2024 · 45f2586 · 45f2586
1 parent 7f10c9b
commit 45f2586
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 12 deletions.
diff --git a/apps/app/components/screens/_layout.tsx b/apps/app/components/screens/_layout.tsx
@@ -156,18 +156,6 @@ const ThemedLayout = () => {
   const theme = settings.theme === 'system' ? colorSheme : settings.theme
   const media = useMedia()
 
-  // Update colorScheme (for scrollbar)
-  useEffect(() => {
-    if (Platform.OS !== 'web') {
-      return
-    }
-
-    const rootElem = document.getElementById('root')
-    if (rootElem && typeof theme === 'string') {
-      rootElem.style.colorScheme = theme
-    }
-  }, [theme])
-
   return (
     <Theme name={theme}>
       <StatusBar

diff --git a/apps/app/public/index.html b/apps/app/public/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="%LANG_ISO_CODE%">
+  <head>
+    <meta charset="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="color-scheme" content="light dark">
+    <title>%WEB_TITLE%</title>
+    <!-- The `react-native-web` recommended style reset: https://necolas.github.io/react-native-web/docs/setup/#root-element -->
+    <style id="expo-reset">
+      /* These styles make the body full-height */
+      html,
+      body {
+        height: 100%;
+      }
+      /* These styles disable body scrolling if you are using <ScrollView> */
+      body {
+        overflow: hidden;
+      }
+      /* These styles make the root element full-height */
+      #root {
+        display: flex;
+        height: 100%;
+        flex: 1;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Use static rendering with Expo Router to support running without JavaScript. -->
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <!-- The root element for your Expo app. -->
+    <div id="root"></div>
+  </body>
+</html>