Time works.

Author: iM-GeeKy

src/Time/AmPmSwitcher.tsx

@@ -18,12 +18,16 @@ export default function AmPmSwitcher({
   onChange: (newHours: number) => any
 }) {
   const { setMode, mode } = React.useContext(DisplayModeContext)
-  const theme: Theme = useTheme()
+  const theme = useTheme()
   const backgroundColor = useMemo<string>(() => {
     if (theme.dark) {
       return Color(theme.colors.surface).lighten(1.2).hex()
     }
-    return Color(theme.colors.surface).darken(0.1).hex()
+    return Color(
+      theme.isV3 ? theme.colors.inverseOnSurface : theme.colors.surface
+    )
+      .darken(0.1)
+      .hex()
   }, [theme])
 
   const isAM = mode === 'AM'
@@ -100,7 +104,6 @@ function SwitchButton({
       <View style={[styles.switchButtonInner, { backgroundColor }]}>
         <Text
           selectable={false}
-          variant="bodyMedium"
           style={[
             {
               ...textFont,

src/Time/AnalogClock.tsx

@@ -129,6 +129,8 @@ function AnalogClock({
         {
           backgroundColor: theme.dark
             ? Color(theme.colors.surface).lighten(1.2).hex()
+            : theme.isV3
+            ? Color(theme.colors.outline).lighten(0.9).hex()
             : Color(theme.colors.surface).darken(0.1).hex(),
         },
       ]}

src/Time/TimeInputs.tsx

@@ -20,6 +20,7 @@ import {
 import TimeInput from './TimeInput'
 import AmPmSwitcher from './AmPmSwitcher'
 import { useLatest } from '../utils'
+import Color from 'color'
 
 function TimeInputs({
   hours,
@@ -85,6 +86,11 @@ function TimeInputs({
         pressed={focused === clockTypes.hours}
         onPress={onFocusInput}
         inputType={inputType}
+        selectionColor={
+          theme.dark
+            ? Color(theme.colors.primary).darken(0.2).hex()
+            : theme.colors.primary
+        }
         returnKeyType={'next'}
         onSubmitEditing={onSubmitStartInput}
         blurOnSubmit={false}
@@ -98,7 +104,6 @@ function TimeInputs({
             minutes,
           })
         }}
-        // onChangeText={onChangeStartInput}
       />
       <View style={styles.hoursAndMinutesSeparator}>
         <View style={styles.spaceDot} />
@@ -115,6 +120,11 @@ function TimeInputs({
         pressed={focused === clockTypes.minutes}
         onPress={onFocusInput}
         inputType={inputType}
+        selectionColor={
+          theme.dark
+            ? Color(theme.colors.primary).darken(0.2).hex()
+            : theme.colors.primary
+        }
         onSubmitEditing={onSubmitEndInput}
         onChanged={(newMinutesFromInput) => {
           let newMinutes = newMinutesFromInput

src/Time/TimePicker.tsx

@@ -117,7 +117,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     width: 24 * 3 + 96 * 2 + 52 + circleSize,
   },
-  rootPortrait: {},
+  rootPortrait: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   clockContainer: { paddingTop: 36, paddingLeft: 12, paddingRight: 12 },
 })
 

src/Time/TimePickerModal.tsx

@@ -10,6 +10,10 @@ import {
 } from 'react-native'
 
 import { Button, IconButton, overlay, useTheme } from 'react-native-paper'
+import type {
+  Fonts,
+  MD3Typescale,
+} from 'react-native-paper/lib/typescript/types'
 import TimePicker from './TimePicker'
 import {
   clockTypes,
@@ -59,6 +63,12 @@ export function TimePickerModal({
 }) {
   const theme = useTheme()
 
+  let textFont = (theme.fonts as Fonts)?.medium
+
+  if (theme.isV3) {
+    textFont = (theme.fonts as MD3Typescale)?.bodyMedium
+  }
+  
   const [inputType, setInputType] = React.useState<PossibleInputTypes>(
     inputTypes.picker
   )
@@ -114,7 +124,7 @@ export function TimePickerModal({
             style={[
               StyleSheet.absoluteFill,
               styles.modalBackground,
-              { backgroundColor: theme.colors.backdrop },
+              { backgroundColor: theme.colors?.backdrop },
             ]}
           />
         </TouchableWithoutFeedback>
@@ -139,7 +149,17 @@ export function TimePickerModal({
               ]}
             >
               <View style={styles.labelContainer}>
-                <Text style={[styles.label, { color: theme.colors.text }]}>
+                <Text
+                  style={[
+                    styles.label,
+                    {
+                      ...textFont,
+                      color: theme?.isV3
+                        ? theme.colors.onBackground
+                        : theme.colors.text,
+                    },
+                  ]}
+                >
                   {uppercase ? label.toUpperCase() : label}
                 </Text>
               </View>
@@ -225,6 +245,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     paddingLeft: 24,
     paddingRight: 24,
+    marginTop: 8,
   },
   label: {
     letterSpacing: 1,

src/Time/timeUtils.ts

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Color from 'color'
-import { Theme, useTheme } from 'react-native-paper'
+import { useTheme } from 'react-native-paper'
 
 // 250? when bigger?
 export const circleSize = 215
@@ -157,17 +157,23 @@ export function getAngle(left: number, top: number, size: number) {
 }
 
 export function useSwitchColors(highlighted: boolean) {
-  const theme: Theme = useTheme()
-
+  const theme = useTheme()
   const backgroundColor = React.useMemo<string>(() => {
     if (theme.dark) {
       if (highlighted) {
         return Color(theme.colors.primary).hex()
       }
+      if (theme.isV3) {
+        return Color(theme.colors.surface).lighten(1.2).hex()
+      }
       return theme.colors.backdrop
     }
 
     if (highlighted) {
+      if (theme.isV3) {
+        return theme.colors.primaryContainer
+      }
+
       return Color(theme.colors.primary).lighten(1).hex()
     }
     return theme.colors.surface
@@ -177,9 +183,11 @@ export function useSwitchColors(highlighted: boolean) {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-
+    if (highlighted && theme.dark) {
+      return theme.colors.background
+    }
     if (theme.isV3) {
-      return theme.colors.primary
+      return theme.colors.onSurfaceVariant
     } else {
       return theme.colors.placeholder
     }
@@ -199,16 +207,29 @@ export function useInputColors(highlighted: boolean) {
     }
 
     if (highlighted) {
+      if (theme.isV3) {
+        return Color(theme.colors.primaryContainer).hex()
+      }
       return Color(theme.colors.primary).lighten(1).hex()
     }
+    if (theme.isV3) {
+      return Color(theme.colors.outline).lighten(0.9).hex()
+    }
     return Color(theme.colors.surface).darken(0.1).hex()
   }, [highlighted, theme])
 
   const color = React.useMemo<string>(() => {
     if (highlighted && !theme.dark) {
       return theme.colors.primary
     }
-    return theme.colors.text
+    if (theme.isV3) {
+      if (!highlighted) {
+        return theme.colors.onBackground
+      }
+      return theme.colors.background
+    } else {
+      return theme.colors.text
+    }
   }, [highlighted, theme])
 
   return { backgroundColor, color }