@ledvance/ui-biz-bundle 1.1.93 → 1.1.95

package/src/newModules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -31,6 +31,7 @@ import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustVi
 import ColorAdjustView from '@ledvance/base/src/components/ColorAdjustView';
 import Summary from '@ledvance/base/src/components/Summary';
 import { getEndTime, getStartTime } from './SleepWakeUpActions'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -48,7 +49,7 @@ interface SleepWakeUpDetailPageProps extends SleepWakeUpPageRouteParams {
   ) => Promise<Result<any>>;
 }
 
-const SleepWakeUpDetailPage = (props: { theme?: any }) => {
+const SleepWakeUpDetailPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation();
   const params = useParams<SleepWakeUpDetailPageProps>();
   const is24HourClock = useSystemTimeFormate();
@@ -139,7 +140,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
             <Card style={{ marginHorizontal: cx(24) }}>
               <LdvSwitch
                 title={item.key}
-                color={props.theme.card.background}
+                color={props.theme?.card.background}
                 colorAlpha={1}
                 enable={
                   item.type === 'mainLight'
@@ -202,11 +203,11 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
     picker: {
       marginHorizontal: cx(24),
       marginVertical: cx(15),
-      color: props.theme.global.backgournd,
+      color: props.theme?.global.backgournd,
     },
     week: {},
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
@@ -228,7 +229,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
     summaryImg: {
       height: cx(12),
       width: cx(12),
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
     },
     summaryLeft: {
       flexDirection: 'row',
@@ -237,17 +238,17 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
     },
     leftTitle: {
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
     },
     summaryRight: {
       flexDirection: 'column',
       marginLeft: cx(21),
       borderRadius: cx(16),
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
     },
     rightItem: {
       paddingHorizontal: cx(12),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
     },
     rightTitle: {
       paddingLeft: cx(12),
@@ -255,11 +256,11 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
       fontSize: cx(10),
       textAlign: 'center',
       alignSelf: 'flex-start',
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
     },
     filletCorner: {
       flexDirection: 'row',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       borderRadius: cx(16),
       alignSelf: 'flex-start',
     },
@@ -328,8 +329,8 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
         {/* pick */}
         <TimerPicker
           itemTextColor="#aeadb5"
-          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
-          pickerFontColor={props.theme.global.fontColor}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme?.global.background }}
+          pickerFontColor={props.theme?.global.fontColor}
           is12Hours={!is24HourClock}
           singlePicker={true}
           amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -357,7 +358,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
             }}
           />
           <Spacer />
-          <Text style={{ marginHorizontal: cx(24), color: props.theme.global.fontColor }}>
+          <Text style={{ marginHorizontal: cx(24), color: props.theme?.global.fontColor }}>
             {loopText(state.sleepWakeUp.weeks, parseTimer(getEndTime(state.sleepWakeUp) * 60))}
           </Text>
           <Spacer />
@@ -370,7 +371,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
           </Text>
           <View
             style={{
-              backgroundColor: props.theme.container.background,
+              backgroundColor: props.theme?.container.background,
               borderRadius: 4,
               minHeight: cx(50),
               flex: 1,
@@ -390,14 +391,14 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
                     flexDirection: 'row',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                    backgroundColor: props.theme.global.background,
+                    backgroundColor: props.theme?.global.background,
                     marginBottom: cx(8),
                   }}
                   key={`${apply.dp}-key`}
                 >
                   <Text
                     style={{
-                      color: props.theme.global.fontColor,
+                      color: props.theme?.global.fontColor,
                       fontSize: cx(14),
                       marginHorizontal: cx(6),
                       marginVertical: cx(9),
@@ -476,7 +477,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
             {I18n.getLang('timeschedule_add_schedule_subheadline4_text')}
           </Text>
           <Spacer />
-          <Text style={{color: props.theme.global.secondFontColor}}>
+          <Text style={{color: props.theme?.global.secondFontColor}}>
             {I18n.getLang(
               params.isSleep
                 ? 'add_sleepschedule_one_source_settings_text'
@@ -499,7 +500,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
             unit={['h', 'min']}
             maxHour={3}
           />
-          <Text style={{color: props.theme.global.secondFontColor}}>
+          <Text style={{color: props.theme?.global.secondFontColor}}>
             {I18n.formatValue(
               params.isSleep
                 ? 'add_sleepschedule_one_source_settings_text2'
@@ -513,7 +514,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
               <LdvSwitch
                 title={I18n.getLang('add_wakeupschedule_settings_text3')}
                 enable={state.sleepWakeUp.last > 0}
-                color={props.theme.global.background}
+                color={props.theme?.global.background}
                 colorAlpha={1}
                 setEnable={v => {
                   state.sleepWakeUp.last = v ? 1 : 0;
@@ -523,7 +524,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
           )}
           {state.sleepWakeUp.last > 0 && (
             <>
-              <Text style={{ fontSize: cx(14), color: props.theme.global.secondFontColor }}>
+              <Text style={{ fontSize: cx(14), color: props.theme?.global.secondFontColor }}>
                 {I18n.getLang('add_wakeupschedule_settings_text4')}
               </Text>
               <LdvPickerView
@@ -550,7 +551,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
                 unit={['h', 'min']}
                 maxHour={3}
               />
-              <Text style={{color: props.theme.global.secondFontColor}}>
+              <Text style={{color: props.theme?.global.secondFontColor}}>
                 {I18n.formatValue(
                   'add_wakeupschedule_settings_text5',
                   `${convertMinutesTo12HourFormat(
@@ -569,7 +570,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
           time={`${convertMinutesTo12HourFormat(state.sleepWakeUp.startTime, is24HourClock)} - ${convertMinutesTo12HourFormat(state.sleepWakeUp.endTime, is24HourClock)}`}
           actions={(
             <View>
-              <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+              <Text style={{ fontSize: cx(12), color: props.theme?.global.fontColor }}>
                 {I18n.getLang(
                   !params.isSleep ? 'feature_summary_action_txt_11' : 'feature_summary_action_txt_10'
                 )}
@@ -580,7 +581,7 @@ const SleepWakeUpDetailPage = (props: { theme?: any }) => {
                 </Text>
               </View>
               <Spacer height={cx(10)} />
-              <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+              <Text style={{ fontSize: cx(12), color: props.theme?.global.fontColor }}>
                 {I18n.getLang(
                   params.isSleep
                     ? 'feature_summary_action_txt_2'

package/src/newModules/sleepWakeUp/SleepWakeUpPage.tsx

@@ -20,6 +20,7 @@ import Card from "@ledvance/base/src/components/Card";
 import { useParams } from "@ledvance/base/src/hooks/Hooks";
 import { ApplyForItem } from "../timeSchedule/Interface";
 import InfoText from "@ledvance/base/src/components/InfoText";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { parseTimer } = Utils.TimeUtils
@@ -41,7 +42,7 @@ export interface SleepWakeUpPageRouteParams {
 }
 
 const MAX_SCHEDULE = 4
-const SleepWakeUpPage = (props: { theme?: any }) => {
+const SleepWakeUpPage = (props: { theme?: ThemeType }) => {
   const deviceInfo = useDeviceInfo()
   const navigation = useNavigation()
   const is24HourClock = useSystemTimeFormate()
@@ -188,7 +189,7 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
       height: cx(90.5),
       marginStart: cx(115),
       marginTop: cx(100),
-      backgroundColor: props.theme.card.background,
+      backgroundColor: props.theme?.card.background,
     },
     popoverItem: {
       width: cx(210),
@@ -212,13 +213,13 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
       lineHeight: cx(20),
       textAlign: 'center',
       fontFamily: 'helvetica_neue_lt_std_roman',
-      color: props.theme.global.fontColor
+      color: props.theme?.global.fontColor
     },
     emptyBtnView: {
       alignItems: 'center'
     },
     emptyBtn: {
-      backgroundColor: props.theme.button.primary,
+      backgroundColor: props.theme?.button.primary,
       borderRadius: cx(5),
       paddingHorizontal: cx(15),
       paddingVertical: cx(10)
@@ -243,14 +244,14 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
     },
     time: {
       flex: 1,
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     switchBtn: {},
     loopText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
       height: cx(20)
@@ -259,14 +260,14 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
       alignSelf: 'flex-start',
       borderRadius: cx(16),
       height: cx(16),
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       paddingHorizontal: cx(10),
     },
     tagTitle: {
       fontSize: cx(10),
       textAlign: 'center',
       fontFamily: 'PingFangSC-Medium',
-      color: props.theme.tag.fontColor
+      color: props.theme?.tag.fontColor
     },
   })
 
@@ -283,7 +284,7 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
         loading={state.loading}
       >
         <View style={{ marginHorizontal: cx(24) }}>
-          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>
+          <Text style={{ color: props.theme?.global.fontColor, fontSize: cx(12) }}>
             {I18n.getLang('timeschedule_overview_description_text')}
           </Text>
         </View>
@@ -291,8 +292,8 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
         {!!getTipText() && <InfoText
             style={{ marginHorizontal: cx(24), marginBottom: cx(5) }}
             icon={res.ic_warning_amber}
-            iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }}
-            contentColor={props.theme.global.secondFontColor}
+            iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }}
+            contentColor={props.theme?.global.secondFontColor}
             text={tipText}
             textStyle={{ fontSize: cx(12) }}
         />}
@@ -348,7 +349,7 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
             <View style={styles.emptyText}>
               <Image
                 source={{ uri: res.device_panel_schedule_alert }}
-                style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
+                style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }}
               />
               <Text style={styles.emptyNoTime}>
                 {
@@ -363,14 +364,14 @@ const SleepWakeUpPage = (props: { theme?: any }) => {
                     <Spacer />
                     <TextButton
                         style={styles.emptyBtn}
-                        textStyle={isSleepMax ? styles.disableItemText : { color: props.theme.button.fontColor }}
+                        textStyle={isSleepMax ? styles.disableItemText : { color: props.theme?.button.fontColor }}
                         text={I18n.getLang('sleepwakeschedule_add_button_text1')}
                         onPress={() => onAddScheduleDialogItemClick(true, 'add', getNewSleepWakeUp(true, params))}
                     />
                     <Spacer />
                     <TextButton
                         style={styles.emptyBtn}
-                        textStyle={isWakeUpMax ? styles.disableItemText : { color: props.theme.button.fontColor }}
+                        textStyle={isWakeUpMax ? styles.disableItemText : { color: props.theme?.button.fontColor }}
                         text={I18n.getLang('sleepwakeschedule_add_button_text2')}
                         onPress={() => onAddScheduleDialogItemClick(false, 'add', getNewSleepWakeUp(false, params))}
                     />

package/src/newModules/switchGradient/SwitchGradientPage.tsx

@@ -12,6 +12,7 @@ import {useNavigation} from '@react-navigation/core'
 import I18n from '@ledvance/base/src/i18n'
 import Stepper from '@ledvance/base/src/components/Stepper'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -20,7 +21,7 @@ export interface SwitchGradientPageParams {
   switchGradientDpCode: string
 }
 
-const SwitchGradientPage = (props: { theme?: any }) => {
+const SwitchGradientPage = (props: { theme?: ThemeType }) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useParams<SwitchGradientPageParams>()
@@ -48,7 +49,7 @@ const SwitchGradientPage = (props: { theme?: any }) => {
       paddingHorizontal: cx(16),
     },
     stepTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
     },
     stepGroup: {
@@ -57,7 +58,7 @@ const SwitchGradientPage = (props: { theme?: any }) => {
     },
     stepText: {
       flex: 1,
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
     },
   })

package/src/newModules/swithInching/SwithInching.tsx

@@ -11,6 +11,7 @@ import {SwitchInchingPageParams, useCountdown1, useSwitchInching} from "./SwithI
 import {useRandomTime} from "../randomTime/RandomTimeActions";
 import {useFixedTime} from "../fixedTime/FixedTimeActions";
 import {useParams} from "@ledvance/base/src/hooks/Hooks";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -22,7 +23,7 @@ interface SwitchInchingState {
   flag: Symbol | number
 }
 
-const SwitchInching = (props: { theme?: any }) => {
+const SwitchInching = (props: { theme?: ThemeType }) => {
   const params = useParams<SwitchInchingPageParams>()
   const deviceInfo = useDeviceInfo()
   const navigation = useNavigation()
@@ -134,7 +135,7 @@ const SwitchInching = (props: { theme?: any }) => {
 
   const styles = StyleSheet.create({
     switchContainer: {
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       marginHorizontal: cx(24),
       padding: cx(10),
       borderRadius: cx(6),
@@ -143,26 +144,26 @@ const SwitchInching = (props: { theme?: any }) => {
     switchCardContainer: {
       paddingVertical: cx(4),
       paddingHorizontal: cx(10),
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       flexDirection: 'row',
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: cx(6),
     },
     switchCardTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       flex: 1,
       fontWeight: '400',
     },
     switchDescription: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       flexWrap: 'wrap',
       fontSize: cx(12),
       marginTop: cx(4),
     },
     secondTopic: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       flexWrap: 'wrap',
       fontSize: cx(14),
       marginTop: cx(30),

package/src/newModules/timeSchedule/TimeScheduleDetailPage.tsx

@@ -44,6 +44,7 @@ import MoodItem from '../mood/MoodItem';
 import { getRemoteMoodList } from '../mood/MoodActions';
 import { MoodUIInfo } from '../mood/Interface';
 import Summary from '@ledvance/base/src/components/Summary'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { toFixedString } = Utils.NumberUtils;
@@ -56,7 +57,7 @@ interface TimeScheduleDetailPageParams extends TimeSchedulePageParams {
   refreshFn: () => void;
 }
 
-const TimeScheduleDetailPage = (props: { theme?: any }) => {
+const TimeScheduleDetailPage = (props: { theme?: ThemeType }) => {
   const is24HourClock = useSystemTimeFormate();
   const params = useParams<TimeScheduleDetailPageParams>();
   const navigation = useNavigation();
@@ -215,13 +216,13 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       marginHorizontal: cx(24),
     },
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     applyContent: {
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       borderRadius: 4,
       minHeight: cx(55),
       flex: 1,
@@ -234,7 +235,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       height: cx(35),
     },
     moodScrollView: {
@@ -249,7 +250,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
     summaryImg: {
       height: cx(12),
       width: cx(12),
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
     },
     summaryLeft: {
       flexDirection: 'row',
@@ -258,19 +259,19 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
     },
     leftTitle: {
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       marginTop: 0,
     },
     summaryRight: {
       flexDirection: 'column',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       borderRadius: cx(16),
       alignItems: 'center'
     },
 
     rightItem: {
       paddingHorizontal: cx(12),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
     switchButton: {
@@ -280,7 +281,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
       marginBottom: cx(10),
     },
     text: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
   });
@@ -336,8 +337,8 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
         {/* pick */}
         <TimerPicker
           itemTextColor="#aeadb5"
-          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme.global.background }}
-          pickerFontColor={props.theme.global.fontColor}
+          style={{ paddingVertical: cx(0), marginVertical: cx(0), backgroundColor: props.theme?.global.background }}
+          pickerFontColor={props.theme?.global.fontColor}
           is12Hours={!is24HourClock}
           singlePicker={true}
           amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -360,7 +361,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
           }}
         />
         <Spacer />
-        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>{loopText(state.timeSchedule.loops.split(''))}</Text>
+        <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>{loopText(state.timeSchedule.loops.split(''))}</Text>
         <Spacer height={cx(30)} />
 
         {/* Apply for */}
@@ -371,14 +372,14 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
           <Spacer height={cx(10)} />
           <View style={[styles.applyContent, { paddingTop: state.selectedSkill.length ? cx(10) : 0 }]}>
             {state.selectedSkill.length === 0 ? (
-              <Text style={{color: props.theme.global.fontColor}}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text>
+              <Text style={{color: props.theme?.global.fontColor}}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text>
             ) : (
               state.selectedSkill.map(skill => (
                 <View
                   style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}
                   key={skill.dp}
                 >
-                  <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{skill.key}</Text>
+                  <Text style={{ color: props.theme?.global.fontColor, fontSize: cx(12) }}>{skill.key}</Text>
                   {showSelectedIcon && (
                     <TouchableOpacity
                       onPress={() => {
@@ -388,7 +389,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
                       style={{ paddingHorizontal: cx(5) }}
                     >
                       <Image
-                        style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
+                        style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }}
                         source={res.ic_arrows_nav_clear}
                       />
                     </TouchableOpacity>
@@ -407,9 +408,9 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
                   state.unSelectedSkill = state.unSelectedSkill.filter(s => item.dp !== s.dp);
                 }}
               >
-                <Text style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{item.key}</Text>
+                <Text style={{ color: props.theme?.global.fontColor, fontSize: cx(12) }}>{item.key}</Text>
                 <Image
-                  style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }}
+                  style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }}
                   source={res.device_panel_timer_add}
                 />
               </TouchableOpacity>
@@ -521,7 +522,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
               <>
                 {!!state.selectedSkill.filter(skill => skill.enable).length && (
                   <>
-                    <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>
+                    <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>
                       {I18n.getLang('feature_summary_action_txt_1')}
                     </Text>
                     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
@@ -544,7 +545,7 @@ const TimeScheduleDetailPage = (props: { theme?: any }) => {
 
                 {!!state.selectedSkill.filter(skill => !skill.enable).length && (
                   <>
-                    <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>
+                    <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>
                       {I18n.getLang('feature_summary_action_txt_2')}
                     </Text>
                     <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>

package/src/newModules/timeSchedule/TimeSchedulePage.tsx

@@ -21,6 +21,7 @@ import ScheduleCard from './components/ScheduleCard';
 import { ui_biz_routerKey } from '../../navigation/Routers';
 import Tag from '@ledvance/base/src/components/Tag';
 import { cloneDeep } from 'lodash';
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
@@ -46,7 +47,7 @@ export interface TimeSchedulePageParams {
   manualDataObj2Dp: (deviceState: DeviceStateType, applyForList: ApplyForItem[]) => Record<string, any>;
 }
 
-const TimeSchedulePage = (props: { theme?: any }) => {
+const TimeSchedulePage = (props: { theme?: ThemeType }) => {
   const deviceInfo = useDeviceInfo();
   const devId = useDeviceId();
   const navigation = useNavigation();
@@ -125,7 +126,7 @@ const TimeSchedulePage = (props: { theme?: any }) => {
 
   const styles = StyleSheet.create({
     overviewDescription: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       marginHorizontal: cx(24),
     },
     emptyImage: {
@@ -141,7 +142,7 @@ const TimeSchedulePage = (props: { theme?: any }) => {
       width: 'auto',
       minWidth: cx(150),
       paddingHorizontal: cx(16),
-      backgroundColor: props.theme.button.primary,
+      backgroundColor: props.theme?.button.primary,
     },
     categoryList: {
       display: 'flex',
@@ -190,8 +191,8 @@ const TimeSchedulePage = (props: { theme?: any }) => {
             text={I18n.getLang('motion_detection_time_schedule_notifications_warning_text')}
             icon={res.ic_warning_amber}
             style={{ marginHorizontal: cx(24) }}
-            textStyle={{ color: props.theme.global.fontColor }}
-            iconStyle={{ tintColor: props.theme.global.warning }}
+            textStyle={{ color: props.theme?.global.fontColor }}
+            iconStyle={{ tintColor: props.theme?.global.warning }}
           />
         )}
         {params.applyForList.length > 1 && !!state.originList.length && !(params.isCeilingLight || params.isMixLight) && showTags}
@@ -232,8 +233,8 @@ const TimeSchedulePage = (props: { theme?: any }) => {
               icon={res.device_panel_schedule_alert}
               text={I18n.getLang(!state.originList.length ? 'timeschedule_overview_empty_information_text' : 'sleepwakeschedule_empty_filtering_information_text')}
               style={{ width: 'auto', alignItems: 'center' }}
-              textStyle={{ color: props.theme.global.fontColor, flex: undefined }}
-              iconStyle={{ tintColor: props.theme.global.fontColor }}
+              textStyle={{ color: props.theme?.global.fontColor, flex: undefined }}
+              iconStyle={{ tintColor: props.theme?.global.fontColor }}
             />
             <Spacer height={cx(16)} />
             {!state.originList.length && <DeleteButton