Fix bugs with different colors in dark mode

Author: RichardLindhout

example/src/App.tsx

@@ -315,17 +315,17 @@ export default function AppWithProviders() {
               roundness: 10,
               colors: {
                 ...DarkTheme.colors,
-                primary: '#F59E00',
-                accent: '#FBBE5E',
+                // primary: '#F59E00',
+                // accent: '#FBBE5E',
               },
             }
           : {
               ...DefaultTheme,
               roundness: 10,
               colors: {
                 ...DefaultTheme.colors,
-                primary: '#F59E00',
-                accent: '#FBBE5E',
+                // primary: '#F59E00',
+                // accent: '#FBBE5E',
               },
             }
       }

example/src/index.css

@@ -8,6 +8,7 @@ html,
 #root {
   display: flex;
   min-height: 100vh;
+  max-height: 100vh;
   width: 100%;
   flex: 1;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,

src/Date/DatePickerModalContentHeader.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
-import { IconButton, Text, useTheme } from 'react-native-paper'
+import { IconButton, Text } from 'react-native-paper'
 import { ModeType } from './Calendar'
 import { LocalState } from './DatePickerModalContent'
+import { useHeaderTextColor } from '../utils'
 
 export interface HeaderPickProps {
   label?: string
@@ -20,8 +21,6 @@ export interface HeaderContentProps extends HeaderPickProps {
 }
 
 export default function DatePickerModalHeader(props: HeaderContentProps) {
-  const theme = useTheme()
-
   const { onToggle, collapsed, mode } = props
 
   const label = props.label
@@ -30,7 +29,7 @@ export default function DatePickerModalHeader(props: HeaderContentProps) {
     ? 'Select period'
     : 'Select date'
 
-  const color = theme.dark ? '#fff' : '#000'
+  const color = useHeaderTextColor()
 
   return (
     <View style={[styles.header]}>

src/Date/DatePickerModalHeader.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { Animated, StyleSheet, SafeAreaView } from 'react-native'
-import { Appbar, Button, overlay, useTheme } from 'react-native-paper'
+import { Appbar, Button } from 'react-native-paper'
 
-import { useColorOnPrimaryBackground } from '../utils'
+import { useHeaderTextColor } from '../utils'
 
 export interface DatePickerModalHeaderProps {
   disableSafeTop?: boolean
@@ -14,39 +14,18 @@ export interface DatePickerModalHeaderProps {
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
-  const theme = useTheme()
-
   const { saveLabel = 'Save', disableSafeTop } = props
-
-  const backgroundColor =
-    theme.dark && theme.mode === 'adaptive'
-      ? overlay(4, theme.colors.surface)
-      : theme.colors.primary
-
-  const color = useColorOnPrimaryBackground(backgroundColor)
-
+  const color = useHeaderTextColor()
   return (
     <>
-      <Animated.View
-        style={[
-          styles.animated,
-          {
-            backgroundColor,
-          },
-        ]}
-      >
+      <Animated.View style={styles.animated}>
         <SafeAreaView
           style={[
             styles.safeContent,
             disableSafeTop && styles.safeContentNoTop,
           ]}
         >
-          <Appbar
-            style={[
-              styles.appbarHeader,
-              { backgroundColor: backgroundColor.toString() },
-            ]}
-          >
+          <Appbar style={styles.appbarHeader}>
             <Appbar.Action
               icon="close"
               onPress={props.onDismiss}
@@ -98,6 +77,7 @@ const styles = StyleSheet.create({
   },
   appbarHeader: {
     elevation: 0,
+    backgroundColor: 'transparent',
     // alignItems:'center'
   },
 })

src/Date/DatePickerModalHeaderBackground.tsx

@@ -1,17 +1,13 @@
-import { overlay, useTheme } from 'react-native-paper'
 import { Animated, SafeAreaView, StyleSheet } from 'react-native'
 import * as React from 'react'
+import { useHeaderBackgroundColor } from '../utils'
 
 export default function DatePickerModalHeaderBackground({
   children,
 }: {
   children: any
 }) {
-  const theme = useTheme()
-  const backgroundColor =
-    theme.dark && theme.mode === 'adaptive'
-      ? overlay(4, theme.colors.surface)
-      : theme.colors.primary
+  const backgroundColor = useHeaderBackgroundColor()
 
   return (
     <Animated.View

src/Date/Day.tsx

@@ -3,7 +3,7 @@ import { Text, TouchableRipple, useTheme } from 'react-native-paper'
 import { StyleSheet, View } from 'react-native'
 import DayRange from './DayRange'
 import { daySize } from './dateUtils'
-import { useColorOnPrimaryBackground } from '../utils'
+import { useTextColorOnPrimary } from '../utils'
 
 function EmptyDayPure() {
   return <View style={styles.empty} />
@@ -40,8 +40,12 @@ function Day(props: {
   const onPress = React.useCallback(() => {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
-  const color = useColorOnPrimaryBackground()
-  const todayColor = theme.dark ? '#fff' : '#000'
+  const color = useTextColorOnPrimary()
+
+  const borderColor =
+    selected || (inRange && theme.dark) ? color : theme.dark ? '#fff' : '#000'
+  const textColor = selected || (inRange && theme.dark) ? color : undefined
+
   return (
     <View style={[styles.root]}>
       <DayRange
@@ -62,16 +66,11 @@ function Day(props: {
         <View
           style={[
             styles.day,
-            isToday
-              ? { borderColor: selected || inRange ? color : todayColor }
-              : null,
+            isToday ? { borderColor: borderColor } : null,
             selected ? { backgroundColor: primaryColor } : null,
           ]}
         >
-          <Text
-            style={selected || inRange ? { color } : null}
-            selectable={false}
-          >
+          <Text style={textColor && { color: textColor }} selectable={false}>
             {day}
           </Text>
         </View>

src/Time/AnalogClock.tsx

@@ -107,7 +107,15 @@ function AnalogClock({
         }
       }
     },
-    [focusedRef, is24HourRef, hoursRef, onChangeRef, minutesRef]
+    [
+      focusedRef,
+      is24HourRef,
+      hoursRef,
+      onChangeRef,
+      minutesRef,
+      elementX,
+      elementY,
+    ]
   )
 
   const panResponder = React.useRef(
@@ -130,6 +138,7 @@ function AnalogClock({
       if (!clockRef.current) {
         return
       }
+
       clockRef.current.measureInWindow((x, y) => {
         elementX.current = x
         elementY.current = y

src/Time/AnalogClockHours.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './AnalogClock'
-import { useColorOnPrimaryBackground } from '../utils'
+import { useTextColorOnPrimary } from '../utils'
 
 function AnalogClockHours({
   is24Hour,
@@ -13,7 +13,7 @@ function AnalogClockHours({
 }) {
   const outerRange = getHourNumbers(false, circleSize, 12)
   const innerRange = getHourNumbers(true, circleSize, 12)
-  const color = useColorOnPrimaryBackground()
+  const color = useTextColorOnPrimary()
   return (
     <>
       {outerRange.map((a, i) => (

src/Time/AnalogClockMinutes.tsx

@@ -2,11 +2,11 @@ import * as React from 'react'
 import { View, StyleSheet } from 'react-native'
 import { Text } from 'react-native-paper'
 import { circleSize } from './AnalogClock'
-import { useColorOnPrimaryBackground } from '../utils'
+import { useTextColorOnPrimary } from '../utils'
 
 function AnalogClockMinutes({ minutes }: { minutes: number }) {
   const range = getMinuteNumbers(circleSize, 12)
-  const color = useColorOnPrimaryBackground()
+  const color = useTextColorOnPrimary()
   return (
     <>
       {range.map((a, i) => {

src/utils.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useTheme } from 'react-native-paper'
+import { overlay, useTheme } from 'react-native-paper'
 import Color from 'color'
 
 export function useLatest<T>(value: T) {
@@ -10,9 +10,25 @@ export function useLatest<T>(value: T) {
   return valueRef
 }
 
-export function useColorOnPrimaryBackground(background?: any) {
+export function useHeaderBackgroundColor() {
   const theme = useTheme()
-  const isDark = !Color(background || theme.colors.primary).isLight()
+  return theme.dark && theme.mode === 'adaptive'
+    ? overlay(4, theme.colors.surface)
+    : theme.colors.primary
+}
+export function useHeaderTextColor() {
+  const theme = useTheme()
+  const background =
+    theme.dark && theme.mode === 'adaptive'
+      ? theme.colors.surface
+      : theme.colors.primary
+  const isDark = !Color(background).isLight()
+  return isDark ? '#fff' : '#000'
+}
+
+export function useTextColorOnPrimary() {
+  const theme = useTheme()
+  const isDark = !Color(theme.colors.primary).isLight()
   return isDark ? '#fff' : '#000'
 }