withTheme -> themed (#11 by @jamonholmgren)

We are now using `themed(...)` to handle dark/light mode.

---------

Signed-off-by: Robin Heinze <robin@infinite.red>
Co-authored-by: Robin Heinze <robin@infinite.red>
Co-authored-by: Robin Heinze <robin.m.heinze@gmail.com>

Author: jamonholmgren

app/app.tsx

@@ -6,7 +6,7 @@
  */
 import { StatusBar, View, type ViewStyle } from "react-native"
 import { connectToServer } from "./state/connectToServer"
-import { useTheme, useThemeName, withTheme } from "./theme/theme"
+import { useTheme, themed } from "./theme/theme"
 import { useEffect } from "react"
 import { TimelineScreen } from "./screens/TimelineScreen"
 import { AppHeader } from "./components/AppHeader"
@@ -24,8 +24,7 @@ const menuConfig = {
 }
 
 function App(): React.JSX.Element {
-  const [theme] = useThemeName()
-  const { colors } = useTheme(theme)
+  const { colors } = useTheme()
 
   useMenuItem(menuConfig)
 
@@ -43,24 +42,24 @@ function App(): React.JSX.Element {
   useEffect(() => connectToServer(), [])
 
   return (
-    <View style={$container(theme)}>
+    <View style={$container()}>
       <Titlebar />
       <StatusBar barStyle={"dark-content"} backgroundColor={colors.background} />
       <AppHeader />
-      <View style={$contentContainer(theme)}>
+      <View style={$contentContainer}>
         <TimelineScreen />
       </View>
     </View>
   )
 }
 
-const $container = withTheme<ViewStyle>(({ colors }) => ({
+const $container = themed<ViewStyle>(({ colors }) => ({
   flex: 1,
   backgroundColor: colors.background,
 }))
 
-const $contentContainer = withTheme<ViewStyle>(({ spacing }) => ({
+const $contentContainer: ViewStyle = {
   flex: 1,
-}))
+}
 
 export default App

app/components/ActionButton.tsx

@@ -1,5 +1,5 @@
 import { GestureResponderEvent, TouchableOpacity, ViewStyle } from "react-native"
-import { useThemeName, withTheme } from "../theme/theme"
+import { themed } from "../theme/theme"
 
 interface ActionButtonProps {
   icon: React.ElementType<{ size: number }>
@@ -8,16 +8,14 @@ interface ActionButtonProps {
 }
 
 function ActionButton({ icon: Icon, onClick, style }: ActionButtonProps) {
-  const [theme] = useThemeName()
-
   return (
-    <TouchableOpacity style={[$container(theme), style]} onPress={onClick} activeOpacity={0.7}>
+    <TouchableOpacity style={[$container(), style]} onPress={onClick} activeOpacity={0.7}>
       <Icon size={24} />
     </TouchableOpacity>
   )
 }
 
-const $container = withTheme<ViewStyle>(({ spacing }) => ({
+const $container = themed<ViewStyle>(({ spacing }) => ({
   marginHorizontal: spacing.sm,
   padding: spacing.sm,
   justifyContent: "center",

app/components/AppHeader.tsx

@@ -10,7 +10,7 @@ import { ClearLogsButton } from "./ClearLogsButton"
 import { ClientTab } from "./ClientTab"
 import Header from "./Header"
 import { HeaderTitle } from "./HeaderTitle"
-import { useThemeName, withTheme } from "../theme/theme"
+import { useThemeName, themed } from "../theme/theme"
 import { useGlobal } from "../state/useGlobal"
 import { getReactotronAppId } from "../state/connectToServer"
 
@@ -24,31 +24,26 @@ export function AppHeader() {
 
   return (
     <Header>
-      <View style={$tabContainer(theme)}>
+      <View style={$tabContainer()}>
         {clientIds.map((id) => (
           <ClientTab key={id} clientId={id} />
         ))}
       </View>
       <HeaderTitle title={`Reactotron ${reactotronAppId}`} />
-      <View style={$statusRow(theme)}>
+      <View style={$statusRow()}>
         <View>
-          <TextInput value={"SEARCHING"} placeholder="Search" style={{ width: 100 }} />
+          <TextInput value={"SEARCHING"} placeholder="Search" style={$searchInput} />
           <Text>Search</Text>
         </View>
-        <View style={$statusItem(theme)}>
-          <View
-            style={[
-              $dot(theme),
-              error ? $dotRed(theme) : isConnected ? $dotGreen(theme) : $dotGray(theme),
-            ]}
-          />
-          <Text style={$statusText(theme)}>Server</Text>
+        <View style={$statusItem()}>
+          <View style={[$dot(), error ? $dotRed() : isConnected ? $dotGreen() : $dotGray()]} />
+          <Text style={$statusText()}>Server</Text>
           <ClearLogsButton />
         </View>
-        <View style={$divider(theme)} />
-        <View style={$statusItem(theme)}>
-          <View style={[$dot(theme), arch === "Fabric" ? $dotGreen(theme) : $dotOrange(theme)]} />
-          <Text style={$statusText(theme)}>{arch}</Text>
+        <View style={$divider()} />
+        <View style={$statusItem()}>
+          <View style={[$dot(), arch === "Fabric" ? $dotGreen() : $dotOrange()]} />
+          <Text style={$statusText()}>{arch}</Text>
         </View>
       </View>
       <ActionButton
@@ -61,49 +56,51 @@ export function AppHeader() {
   )
 }
 
-const $tabContainer = withTheme<ViewStyle>(({ spacing }) => ({
+const $tabContainer = themed<ViewStyle>(({ spacing }) => ({
   flexDirection: "row",
   paddingHorizontal: spacing.xl,
   paddingVertical: spacing.md,
   gap: spacing.md,
 }))
 
-const $statusRow = withTheme<ViewStyle>(({ spacing }) => ({
+const $statusRow = themed<ViewStyle>(({ spacing }) => ({
   flexDirection: "row",
   alignItems: "center",
   padding: spacing.sm,
   justifyContent: "center",
 }))
 
-const $statusItem = withTheme<ViewStyle>(() => ({
+const $statusItem = themed<ViewStyle>(() => ({
   flexDirection: "row",
   alignItems: "center",
   minWidth: 80,
 }))
 
-const $divider = withTheme<ViewStyle>(({ colors, spacing }) => ({
+const $divider = themed<ViewStyle>(({ colors, spacing }) => ({
   width: 1,
   height: 24,
   backgroundColor: colors.border,
   marginHorizontal: spacing.md,
   borderRadius: 1,
 }))
 
-const $dot = withTheme<ViewStyle>(({ colors }) => ({
+const $dot = themed<ViewStyle>(({ colors }) => ({
   width: 12,
   height: 12,
   borderRadius: 6,
   marginRight: 8,
   borderWidth: 1,
   borderColor: colors.border,
 }))
-const $dotGray = withTheme<ViewStyle>(({ colors }) => ({ backgroundColor: colors.neutral }))
-const $dotGreen = withTheme<ViewStyle>(({ colors }) => ({ backgroundColor: colors.success }))
-const $dotRed = withTheme<ViewStyle>(({ colors }) => ({ backgroundColor: colors.danger }))
-const $dotOrange = withTheme<ViewStyle>(({ colors }) => ({ backgroundColor: colors.primary }))
+const $dotGray = themed<ViewStyle>(({ colors }) => ({ backgroundColor: colors.neutral }))
+const $dotGreen = themed<ViewStyle>(({ colors }) => ({ backgroundColor: colors.success }))
+const $dotRed = themed<ViewStyle>(({ colors }) => ({ backgroundColor: colors.danger }))
+const $dotOrange = themed<ViewStyle>(({ colors }) => ({ backgroundColor: colors.primary }))
 
-const $statusText = withTheme<TextStyle>(({ colors }) => ({
+const $statusText = themed<TextStyle>(({ colors }) => ({
   fontSize: 16,
   color: colors.mainText,
   fontWeight: "600",
 }))
+
+const $searchInput: ViewStyle = { width: 100 }

app/components/ClientTab.tsx

@@ -1,12 +1,11 @@
 import type { ClientData } from "../types"
 import { useGlobal } from "../state/useGlobal"
-import { useThemeName, withTheme } from "../theme/theme"
+import { themed } from "../theme/theme"
 import { Pressable, Text, TextStyle, ViewStyle } from "react-native"
 
 const tabgroup = "activeClientId"
 
 export function ClientTab({ clientId }: { clientId: string }) {
-  const [theme] = useThemeName()
   const [clientData] = useGlobal<ClientData>(`client-${clientId}`, {} as ClientData)
 
   const label: string = (clientData?.name ?? clientId) + "\n"
@@ -16,32 +15,32 @@ export function ClientTab({ clientId }: { clientId: string }) {
   const active = activeTab === label
 
   return (
-    <Pressable key={clientId} onPress={() => setActiveTab(label)} style={$container(theme)}>
-      <Text style={[$tab(theme), active ? $tabActive(theme) : {}]}>{label}</Text>
-      <Text style={$os(theme)}>{os}</Text>
+    <Pressable key={clientId} onPress={() => setActiveTab(label)} style={$container()}>
+      <Text style={[$tab(), active ? $tabActive() : {}]}>{label}</Text>
+      <Text style={$os()}>{os}</Text>
     </Pressable>
   )
 }
 
-const $container = withTheme<ViewStyle>(({ spacing }) => ({
+const $container = themed<ViewStyle>(({ spacing }) => ({
   flexDirection: "column",
   alignItems: "flex-start",
   gap: spacing.xxs,
   cursor: "pointer",
 }))
 
-const $tab = withTheme<TextStyle>(({ spacing, colors }) => ({
+const $tab = themed<TextStyle>(({ spacing, colors }) => ({
   fontSize: spacing.md,
   color: colors.mainText,
 }))
 
-const $tabActive = withTheme<TextStyle>(({ colors }) => ({
+const $tabActive = themed<TextStyle>(({ colors }) => ({
   borderBottomColor: colors.primary,
   color: colors.mainText,
   textDecorationLine: "underline",
 }))
 
-const $os = withTheme<TextStyle>(({ colors }) => ({
+const $os = themed<TextStyle>(({ colors }) => ({
   fontSize: 12,
   color: colors.mainText,
 }))