diff --git a/src/Date/Calendar.tsx b/src/Date/Calendar.tsx
index f35acd23..76dbc538 100644
--- a/src/Date/Calendar.tsx
+++ b/src/Date/Calendar.tsx
@@ -100,6 +100,9 @@ function Calendar(
   const theme = useTheme()
 
   const selectColor = useMemo<string>(() => {
+    if (theme.isV3) {
+      return theme.colors.primaryContainer
+    }
     if (theme.dark) {
       return darkenBy(Color(theme.colors.primary), 0.1).hex()
     }
diff --git a/src/Date/CalendarHeader.tsx b/src/Date/CalendarHeader.tsx
index e094c92d..d95206b2 100644
--- a/src/Date/CalendarHeader.tsx
+++ b/src/Date/CalendarHeader.tsx
@@ -53,7 +53,6 @@ function CalendarHeader({
               onPress={onPrev}
             />
           </View>
-
           <View
             style={[
               styles.buttonWrapper,
diff --git a/src/Date/DatePickerModalContent.tsx b/src/Date/DatePickerModalContent.tsx
index 41eccaef..cf2c2faa 100644
--- a/src/Date/DatePickerModalContent.tsx
+++ b/src/Date/DatePickerModalContent.tsx
@@ -11,7 +11,6 @@ import Calendar, {
 } from './Calendar'
 
 import AnimatedCrossView from './AnimatedCrossView'
-
 import DatePickerModalHeader from './DatePickerModalHeader'
 import DatePickerModalContentHeader, {
   HeaderPickProps,
@@ -86,7 +85,6 @@ export function DatePickerModalContent(
     startYear,
     endYear,
   } = props
-
   const anyProps = props as any
 
   // use local state to add only onConfirm state changes
@@ -164,11 +162,10 @@ export function DatePickerModalContent(
           endLabel={props.endLabel}
           uppercase={props.uppercase ?? true}
           locale={locale}
-          editIcon={props.editIcon}
+          editIcon={props?.editIcon}
           calendarIcon={props.calendarIcon}
         />
       </DatePickerModalHeaderBackground>
-
       <AnimatedCrossView
         collapsed={collapsed}
         calendar={
diff --git a/src/Date/DatePickerModalContentHeader.tsx b/src/Date/DatePickerModalContentHeader.tsx
index ce69715a..acde2ff6 100644
--- a/src/Date/DatePickerModalContentHeader.tsx
+++ b/src/Date/DatePickerModalContentHeader.tsx
@@ -58,23 +58,26 @@ export default function DatePickerModalContentHeader(
     mode,
     moreLabel,
     uppercase,
-    editIcon = 'pencil',
-    calendarIcon = 'calendar',
+    editIcon,
+    calendarIcon,
   } = props
   const theme = useTheme()
   const label = getLabel(props.locale, props.mode, props.label)
 
   const color = useHeaderTextColor()
+  const supportingTextColor = theme.isV3 ? theme.colors.onSurfaceVariant : color
   const allowEditing = mode !== 'multiple'
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyLarge
+    ? theme.fonts.labelMedium
     : (theme as any as MD2Theme).fonts.medium
 
   return (
-    <View style={[styles.header]}>
+    <View style={styles.header}>
       <View>
-        <Text style={[styles.label, { color, ...textFont }]}>
+        <Text
+          style={[styles.label, { color: supportingTextColor, ...textFont }]}
+        >
           {uppercase ? label.toUpperCase() : label}
         </Text>
         <View style={styles.headerContentContainer}>
@@ -96,13 +99,21 @@ export default function DatePickerModalContentHeader(
       <View style={styles.fill} />
       {allowEditing ? (
         <IconButton
-          icon={collapsed ? editIcon : calendarIcon}
+          icon={
+            collapsed
+              ? editIcon ?? theme.isV3
+                ? 'pencil-outline'
+                : 'pencil'
+              : calendarIcon ?? theme.isV3
+              ? 'calendar-blank'
+              : 'calendar'
+          }
           accessibilityLabel={
             collapsed
               ? getTranslation(props.locale, 'typeInDate')
               : getTranslation(props.locale, 'pickDateFromCalendar')
           }
-          iconColor={color}
+          iconColor={theme.isV3 ? theme.colors.onSurface : color}
           onPress={onToggle}
         />
       ) : null}
@@ -116,8 +127,13 @@ export function HeaderContentSingle({
   color,
   locale,
 }: HeaderContentProps & { color: string }) {
+  const theme = useTheme()
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = state.date ? color : lighterColor
+  const dateColor = state.date
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -140,9 +156,14 @@ export function HeaderContentMulti({
   color,
   locale,
 }: HeaderContentProps & { color: string; moreLabel: string | undefined }) {
+  const theme = useTheme()
   const dateCount = state.dates?.length || 0
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const dateColor = dateCount ? color : lighterColor
+  const dateColor = dateCount
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
@@ -174,6 +195,7 @@ export function HeaderContentRange({
   endLabel = 'End',
   color,
 }: HeaderContentProps & { color: string }) {
+  const theme = useTheme()
   const formatter = React.useMemo(() => {
     return new Intl.DateTimeFormat(locale, {
       month: 'short',
@@ -182,8 +204,16 @@ export function HeaderContentRange({
   }, [locale])
 
   const lighterColor = Color(color).fade(0.5).rgb().toString()
-  const startColor = state.startDate ? color : lighterColor
-  const endColor = state.endDate ? color : lighterColor
+  const startColor = state.startDate
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
+  const endColor = state.endDate
+    ? theme.isV3
+      ? theme.colors.onSurface
+      : color
+    : lighterColor
 
   return (
     <>
@@ -226,7 +256,6 @@ const styles = StyleSheet.create({
     marginTop: -3,
     marginLeft: 3,
   },
-
   headerSeparator: {
     color: 'rgba(255,255,255,1)',
     fontSize: 25,
diff --git a/src/Date/DatePickerModalHeader.tsx b/src/Date/DatePickerModalHeader.tsx
index b8a72083..58079714 100644
--- a/src/Date/DatePickerModalHeader.tsx
+++ b/src/Date/DatePickerModalHeader.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Animated, StyleSheet } from 'react-native'
-import { Appbar, Button } from 'react-native-paper'
+import { Appbar, Button, useTheme } from 'react-native-paper'
 
 import { useHeaderTextColor } from '../utils'
 import { getTranslation } from '../translations/utils'
@@ -20,6 +20,7 @@ export interface DatePickerModalHeaderProps {
 export default function DatePickerModalHeader(
   props: DatePickerModalHeaderProps
 ) {
+  const theme = useTheme()
   const { disableSafeTop, locale, closeIcon = 'close' } = props
   const saveLabel = props.saveLabel || getTranslation(locale, 'save')
   const color = useHeaderTextColor()
@@ -29,6 +30,7 @@ export default function DatePickerModalHeader(
     <Animated.View
       style={[
         styles.animated,
+        // eslint-disable-next-line react-native/no-inline-styles
         {
           paddingTop: disableSafeTop ? 0 : insets.top,
           paddingLeft: insets.left,
@@ -47,7 +49,7 @@ export default function DatePickerModalHeader(
         <Appbar.Content title={''} />
         <Button
           color={color}
-          textColor={color}
+          textColor={theme.isV3 ? theme.colors.primary : color}
           onPress={props.onSave}
           disabled={props.saveLabelDisabled ?? false}
           uppercase={props.uppercase ?? true}
@@ -90,6 +92,5 @@ const styles = StyleSheet.create({
   appbarHeader: {
     elevation: 0,
     backgroundColor: 'transparent',
-    // alignItems:'center'
   },
 })
diff --git a/src/Date/Day.tsx b/src/Date/Day.tsx
index f6c93f8a..f9279780 100644
--- a/src/Date/Day.tsx
+++ b/src/Date/Day.tsx
@@ -47,17 +47,27 @@ function Day(props: {
     onPressDate(new Date(year, month, day))
   }, [onPressDate, year, month, day])
 
-  const borderColor =
-    selected || (inRange && theme.dark)
-      ? textColorOnPrimary
-      : theme.dark
-      ? '#fff'
-      : '#000'
+  const borderColor = theme.isV3
+    ? theme.colors.primary
+    : selected || (inRange && theme.dark)
+    ? textColorOnPrimary
+    : theme.dark
+    ? '#fff'
+    : '#000'
+
   const textColor =
-    selected || (inRange && theme.dark) ? textColorOnPrimary : undefined
+    theme.isV3 && selected
+      ? theme.colors.onPrimary
+      : theme.isV3 && inRange && theme.dark
+      ? theme.colors.onPrimaryContainer
+      : selected || (inRange && theme.dark)
+      ? textColorOnPrimary
+      : theme.isV3
+      ? theme.colors.onSurface
+      : undefined
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.bodySmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -68,7 +78,6 @@ function Day(props: {
         rightCrop={rightCrop}
         selectColor={selectColor}
       />
-
       <TouchableRipple
         testID={`react-native-paper-dates-day-${year}-${month}-${day}`}
         disabled={disabled}
@@ -89,7 +98,12 @@ function Day(props: {
         >
           <Text
             style={[
-              textColor ? { color: textColor } : undefined,
+              textColor
+                ? {
+                    color:
+                      theme.isV3 && isToday ? theme.colors.primary : textColor,
+                  }
+                : undefined,
               { ...textFont },
             ]}
             selectable={false}
diff --git a/src/Date/DayName.tsx b/src/Date/DayName.tsx
index 7c858228..4ab2e5cd 100644
--- a/src/Date/DayName.tsx
+++ b/src/Date/DayName.tsx
@@ -6,12 +6,18 @@ function DayName({ label }: { label: string }) {
   const theme = useTheme()
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.bodySmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
     <View style={styles.dayName}>
-      <Text style={[styles.dayNameLabel, { ...textFont }]} selectable={false}>
+      <Text
+        style={[
+          styles.dayNameLabel,
+          { ...textFont, color: theme.colors.onSurface },
+        ]}
+        selectable={false}
+      >
         {label}
       </Text>
     </View>
diff --git a/src/Date/Month.tsx b/src/Date/Month.tsx
index 345be816..e56fd5e7 100644
--- a/src/Date/Month.tsx
+++ b/src/Date/Month.tsx
@@ -251,7 +251,7 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
   ])
 
   let textFont = theme?.isV3
-    ? theme.fonts.bodyMedium
+    ? theme.fonts.titleSmall
     : (theme as any as MD2Theme).fonts.medium
 
   return (
@@ -288,7 +288,15 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             ]}
           >
             <Text
-              style={[styles.monthLabel, { ...textFont }]}
+              style={[
+                styles.monthLabel,
+                {
+                  ...textFont,
+                  color: theme.isV3
+                    ? theme.colors.onSurfaceVariant
+                    : theme.colors.onSurface,
+                },
+              ]}
               selectable={false}
             >
               {monthName} {year}
@@ -296,13 +304,20 @@ function Month(props: MonthSingleProps | MonthRangeProps | MonthMultiProps) {
             <View style={isHorizontal ? styles.opacity1 : styles.opacity0}>
               <IconButton
                 onPress={isHorizontal ? () => onPressYear(year) : undefined}
-                icon={selectingYear ? 'chevron-up' : 'chevron-down'}
+                icon={
+                  selectingYear
+                    ? theme.isV3
+                      ? 'menu-up'
+                      : 'chevron-up'
+                    : theme.isV3
+                    ? 'menu-down'
+                    : 'chevron-down'
+                }
               />
             </View>
           </View>
         </TouchableRipple>
       </View>
-
       {grid.map(({ weekIndex, generatedDays }) => (
         <View style={styles.week} key={weekIndex}>
           {generatedDays
@@ -350,9 +365,7 @@ const styles = StyleSheet.create({
     marginBottom: weekMargin,
     height: daySize,
   },
-
   month: {},
-
   monthHeader: {
     height: montHeaderHeight,
     justifyContent: 'center',
diff --git a/src/Date/YearPicker.tsx b/src/Date/YearPicker.tsx
index 1a864083..a38ba18a 100644
--- a/src/Date/YearPicker.tsx
+++ b/src/Date/YearPicker.tsx
@@ -96,7 +96,14 @@ function YearPure({
           <Text
             style={[
               styles.yearLabel,
-              selected ? styles.selectedYear : null,
+              selected
+                ? // eslint-disable-next-line react-native/no-inline-styles
+                  { color: theme.isV3 ? theme.colors.onPrimary : '#fff' }
+                : {
+                    color: theme.isV3
+                      ? theme.colors.onSurfaceVariant
+                      : undefined,
+                  },
               { ...textFont },
             ]}
             selectable={false}
@@ -127,7 +134,6 @@ const styles = StyleSheet.create({
     height: ITEM_HEIGHT,
     justifyContent: 'center',
   },
-  selectedYear: { color: '#fff' },
   yearButton: {
     borderRadius: 46 / 2,
     overflow: 'hidden',
diff --git a/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap b/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap
index a6333db1..8cbf1894 100644
--- a/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/AnimatedCrossView.test.tsx.snap
@@ -584,7 +584,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -676,7 +678,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -768,7 +772,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -873,7 +879,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -965,7 +973,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1057,7 +1067,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1162,7 +1174,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1254,7 +1268,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1346,7 +1362,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1451,7 +1469,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1543,7 +1563,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1635,7 +1657,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1740,7 +1764,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1832,7 +1858,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -1924,7 +1952,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2029,7 +2059,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2121,7 +2153,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2213,7 +2247,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2318,7 +2354,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2410,7 +2448,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2502,7 +2542,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2607,7 +2649,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2699,7 +2743,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2791,7 +2837,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2896,7 +2944,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -2988,7 +3038,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -3080,7 +3132,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -3185,7 +3239,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -3277,7 +3333,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
@@ -3369,7 +3427,9 @@ exports[`renders collapsed AnimatedCrossView 1`] = `
                               {
                                 "fontSize": 16,
                               },
-                              null,
+                              {
+                                "color": "rgba(73, 69, 79, 1)",
+                              },
                               {
                                 "fontFamily": "System",
                                 "fontSize": 16,
diff --git a/src/__tests__/Date/__snapshots__/Calendar.test.tsx.snap b/src/__tests__/Date/__snapshots__/Calendar.test.tsx.snap
index b75f7545..a2eead9e 100644
--- a/src/__tests__/Date/__snapshots__/Calendar.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/Calendar.test.tsx.snap
@@ -559,7 +559,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -651,7 +653,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -743,7 +747,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -848,7 +854,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -940,7 +948,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1032,7 +1042,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1137,7 +1149,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1229,7 +1243,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1321,7 +1337,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1426,7 +1444,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1518,7 +1538,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1610,7 +1632,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1715,7 +1739,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1807,7 +1833,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -1899,7 +1927,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2004,7 +2034,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2096,7 +2128,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2188,7 +2222,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2293,7 +2329,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2385,7 +2423,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2477,7 +2517,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2582,7 +2624,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2674,7 +2718,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2766,7 +2812,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2871,7 +2919,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -2963,7 +3013,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -3055,7 +3107,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -3160,7 +3214,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -3252,7 +3308,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
@@ -3344,7 +3402,9 @@ exports[`renders Calendar 1`] = `
                           {
                             "fontSize": 16,
                           },
-                          null,
+                          {
+                            "color": "rgba(73, 69, 79, 1)",
+                          },
                           {
                             "fontFamily": "System",
                             "fontSize": 16,
diff --git a/src/__tests__/Date/__snapshots__/CalendarHeader.test.tsx.snap b/src/__tests__/Date/__snapshots__/CalendarHeader.test.tsx.snap
index 55cb90d2..5ded93e6 100644
--- a/src/__tests__/Date/__snapshots__/CalendarHeader.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/CalendarHeader.test.tsx.snap
@@ -59,11 +59,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
@@ -102,11 +103,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
@@ -145,11 +147,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
@@ -188,11 +191,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
@@ -231,11 +235,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
@@ -274,11 +279,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
@@ -317,11 +323,12 @@ exports[`renders CalendarHeader 1`] = `
                 "opacity": 0.7,
               },
               {
+                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
-                "fontSize": 14,
+                "fontSize": 12,
                 "fontWeight": "400",
-                "letterSpacing": 0.25,
-                "lineHeight": 20,
+                "letterSpacing": 0.4,
+                "lineHeight": 16,
               },
             ],
           ]
diff --git a/src/__tests__/Date/__snapshots__/DayName.test.tsx.snap b/src/__tests__/Date/__snapshots__/DayName.test.tsx.snap
index 67ed1887..4c5c866a 100644
--- a/src/__tests__/Date/__snapshots__/DayName.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/DayName.test.tsx.snap
@@ -31,11 +31,12 @@ exports[`renders DayName 1`] = `
             "opacity": 0.7,
           },
           {
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
-            "fontSize": 14,
+            "fontSize": 12,
             "fontWeight": "400",
-            "letterSpacing": 0.25,
-            "lineHeight": 20,
+            "letterSpacing": 0.4,
+            "lineHeight": 16,
           },
         ],
       ]
diff --git a/src/__tests__/Date/__snapshots__/DayNames.test.tsx.snap b/src/__tests__/Date/__snapshots__/DayNames.test.tsx.snap
index de21a7c4..922ef0ba 100644
--- a/src/__tests__/Date/__snapshots__/DayNames.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/DayNames.test.tsx.snap
@@ -47,11 +47,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
@@ -90,11 +91,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
@@ -133,11 +135,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
@@ -176,11 +179,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
@@ -219,11 +223,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
@@ -262,11 +267,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
@@ -305,11 +311,12 @@ exports[`renders DayNames 1`] = `
               "opacity": 0.7,
             },
             {
+              "color": "rgba(28, 27, 31, 1)",
               "fontFamily": "System",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "400",
-              "letterSpacing": 0.25,
-              "lineHeight": 20,
+              "letterSpacing": 0.4,
+              "lineHeight": 16,
             },
           ],
         ]
diff --git a/src/__tests__/Date/__snapshots__/YearPicker.test.tsx.snap b/src/__tests__/Date/__snapshots__/YearPicker.test.tsx.snap
index 377c7310..5541a032 100644
--- a/src/__tests__/Date/__snapshots__/YearPicker.test.tsx.snap
+++ b/src/__tests__/Date/__snapshots__/YearPicker.test.tsx.snap
@@ -540,7 +540,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -632,7 +634,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -724,7 +728,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -829,7 +835,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -921,7 +929,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1013,7 +1023,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1118,7 +1130,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1210,7 +1224,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1302,7 +1318,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1407,7 +1425,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1499,7 +1519,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1591,7 +1613,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1696,7 +1720,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1788,7 +1814,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1880,7 +1908,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -1985,7 +2015,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2077,7 +2109,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2169,7 +2203,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2274,7 +2310,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2366,7 +2404,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2458,7 +2498,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2563,7 +2605,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2655,7 +2699,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2747,7 +2793,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2852,7 +2900,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -2944,7 +2994,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -3036,7 +3088,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -3141,7 +3195,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -3233,7 +3289,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
@@ -3325,7 +3383,9 @@ exports[`renders YearPicker 1`] = `
                         {
                           "fontSize": 16,
                         },
-                        null,
+                        {
+                          "color": "rgba(73, 69, 79, 1)",
+                        },
                         {
                           "fontFamily": "System",
                           "fontSize": 16,
diff --git a/src/utils.ts b/src/utils.ts
index 69adf757..6faec6a4 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -17,6 +17,9 @@ export function useLatest<T>(value: T) {
 
 export function useHeaderBackgroundColor() {
   const theme = useTheme()
+  if (theme.isV3) {
+    return theme.colors.surface
+  }
   return theme.dark && theme.mode === 'adaptive'
     ? overlay(4, theme.colors.surface)
     : theme.colors.primary
@@ -32,7 +35,11 @@ export function useHeaderColorIsLight() {
 }
 
 export function useHeaderTextColor() {
+  const theme = useTheme()
   const isLight = useHeaderColorIsLight()
+  if (theme.isV3) {
+    return theme.colors.onSurfaceVariant
+  }
   return !isLight ? '#fff' : '#000'
 }