WIP - basic color scheme switching

pachun · Feb 21, 2024 · 1c1311c · 1c1311c
1 parent 151e5ee
commit 1c1311c
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 41 deletions.
diff --git a/app.json b/app.json
@@ -6,7 +6,7 @@
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",

diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
@@ -1,54 +1,53 @@
 import React from "react"
 import * as ExpoRouter from "expo-router"
+import * as ExpoStatusBar from "expo-status-bar"
 import * as ExpoVectorIcons from "@expo/vector-icons"
 import * as ReactNavigationNative from "@react-navigation/native"
 import NavigationHeaderToastNotification from "components/NavigationHeaderToastNotification"
 import useOverTheAirUpdates from "hooks/useOverTheAirUpdates"
-
-const theme = {
-  ...ReactNavigationNative.DefaultTheme,
-  colors: {
-    ...ReactNavigationNative.DefaultTheme.colors,
-    background: "#fff",
-  },
-}
+import useTheme from "hooks/useTheme"
 
 const Layout = (): React.ReactElement => {
   useOverTheAirUpdates()
 
+  const theme = useTheme()
+
   return (
-    <ReactNavigationNative.ThemeProvider value={theme}>
-      <NavigationHeaderToastNotification.Provider>
-        <ExpoRouter.Tabs>
-          <ExpoRouter.Tabs.Screen
-            name="index"
-            options={{
-              title: "Team",
-              tabBarIcon: ({ color }) => (
-                <ExpoVectorIcons.FontAwesome6
-                  name="people-group"
-                  color={color}
-                  size={20}
-                />
-              ),
-            }}
-          />
-          <ExpoRouter.Tabs.Screen
-            name="games"
-            options={{
-              title: "Games",
-              tabBarIcon: ({ color }) => (
-                <ExpoVectorIcons.FontAwesome
-                  name="calendar"
-                  color={color}
-                  size={20}
-                />
-              ),
-            }}
-          />
-        </ExpoRouter.Tabs>
-      </NavigationHeaderToastNotification.Provider>
-    </ReactNavigationNative.ThemeProvider>
+    <>
+      <ExpoStatusBar.StatusBar style="auto" />
+      <ReactNavigationNative.ThemeProvider value={theme}>
+        <NavigationHeaderToastNotification.Provider>
+          <ExpoRouter.Tabs>
+            <ExpoRouter.Tabs.Screen
+              name="index"
+              options={{
+                title: "Team",
+                tabBarIcon: ({ color }) => (
+                  <ExpoVectorIcons.FontAwesome6
+                    name="people-group"
+                    color={color}
+                    size={20}
+                  />
+                ),
+              }}
+            />
+            <ExpoRouter.Tabs.Screen
+              name="games"
+              options={{
+                title: "Games",
+                tabBarIcon: ({ color }) => (
+                  <ExpoVectorIcons.FontAwesome
+                    name="calendar"
+                    color={color}
+                    size={20}
+                  />
+                ),
+              }}
+            />
+          </ExpoRouter.Tabs>
+        </NavigationHeaderToastNotification.Provider>
+      </ReactNavigationNative.ThemeProvider>
+    </>
   )
 }
 

diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
@@ -0,0 +1,28 @@
+import * as ReactNative from "react-native"
+import * as ReactNavigationNative from "@react-navigation/native"
+import type { ColorScheme } from "types/ColorScheme"
+
+const lightTheme = {
+  ...ReactNavigationNative.DefaultTheme,
+  colors: {
+    ...ReactNavigationNative.DefaultTheme.colors,
+    background: "#fff",
+  },
+}
+
+const darkTheme = ReactNavigationNative.DarkTheme
+
+const useTheme = (): ReactNavigationNative.Theme => {
+  const colorScheme: ColorScheme = ReactNative.useColorScheme()
+
+  switch (colorScheme) {
+    case "light":
+      return lightTheme
+    case "dark":
+      return darkTheme
+    default:
+      return lightTheme
+  }
+}
+
+export default useTheme
diff --git a/src/types/ColorScheme.ts b/src/types/ColorScheme.ts
@@ -0,0 +1 @@
+export type ColorScheme = "light" | "dark" | null | undefined
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export type ColorScheme = "light" \| "dark" \| null \| undefined