@ledvance/ui-biz-bundle 1.1.93 → 1.1.95

package/src/modules/timer/TimerPage.tsx

@@ -15,6 +15,7 @@ import {timeFormatToRealTime, useProgress} from "./TimerPageAction";
 import { cloneDeep } from "lodash";
 import dayjs from "dayjs";
 import DeleteButton from "@ledvance/base/src/components/DeleteButton";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { withTheme } = Utils.ThemeUtils
 
@@ -37,7 +38,7 @@ type Props = {
 }
 
 const { convertX: cx } = Utils.RatioUtils
-const TimerPage = (props: {theme?: any}) => {
+const TimerPage = (props: {theme?: ThemeType}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const { dps } = useRoute<Props['route']>().params
@@ -133,12 +134,12 @@ const TimerPage = (props: {theme?: any}) => {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        backgroundColor: props.theme.global.background,
+        backgroundColor: props.theme?.global.background,
         marginBottom: cx(8)
       }}>
         <Text
           style={{
-            color: props.theme.global.fontColor,
+            color: props.theme?.global.fontColor,
             fontSize: 14,
             marginHorizontal: cx(6),
             marginVertical: cx(9),
@@ -147,7 +148,7 @@ const TimerPage = (props: {theme?: any}) => {
           {item.label}
         </Text>
         {progress.length > 1 && <TouchableOpacity onPress={() => handelTimer(item, false)}>
-            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5), tintColor: props.theme.global.fontColor, }} source={res.ic_arrows_nav_clear} />
+            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5), tintColor: props.theme?.global.fontColor, }} source={res.ic_arrows_nav_clear} />
         </TouchableOpacity>}
       </View>
     );
@@ -158,7 +159,7 @@ const TimerPage = (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',
@@ -184,7 +185,7 @@ const TimerPage = (props: {theme?: any}) => {
     },
     activeTimerTitle: {
       fontSize: cx(20),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       flex: 1,
       paddingRight: cx(10)
     },
@@ -193,7 +194,7 @@ const TimerPage = (props: {theme?: any}) => {
       paddingVertical: cx(5),
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: props.theme.button.cancel,
+      backgroundColor: props.theme?.button.cancel,
       borderRadius: cx(5)
     },
     activeTimerTimeBox: {
@@ -229,14 +230,14 @@ const TimerPage = (props: {theme?: any}) => {
                   <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
                   <View
                       style={{
-                        backgroundColor: props.theme.container.background,
+                        backgroundColor: props.theme?.container.background,
                         borderRadius: 4,
                         minHeight: cx(50),
                         flex: 1,
                         justifyContent: 'center',
                       }}
                   >
-                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10), color: props.theme.global.fontColor }}>
+                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10), color: props.theme?.global.fontColor }}>
                         {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
                       </Text> :
                       <View
@@ -256,8 +257,8 @@ const TimerPage = (props: {theme?: any}) => {
                 {state.skillList.map((skill: dpItem) => {
                   return (
                     <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
-                      <Text style={{ color: props.theme.global.fontColor }}>{skill.label}</Text>
-                      <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.device_panel_timer_add} />
+                      <Text style={{ color: props.theme?.global.fontColor }}>{skill.label}</Text>
+                      <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }} source={res.device_panel_timer_add} />
                     </TouchableOpacity>
                   )
                 })}
@@ -269,7 +270,7 @@ const TimerPage = (props: {theme?: any}) => {
                   text={I18n.getLang('timer_sockets_button_text')}
                   onPress={onStartPress}
                   textStyle={{ fontSize: cx(14) }}
-                  style={{ backgroundColor: !state.selectedSkill.length ? props.theme.button.disabled : props.theme.button.primary }}
+                  style={{ backgroundColor: !state.selectedSkill.length ? props.theme?.button.disabled : props.theme?.button.primary }}
               />
               <Spacer />
           </>}
@@ -288,7 +289,7 @@ const TimerPage = (props: {theme?: any}) => {
                             getProgressByDp(timer.dpId).endTimer()
                           }}
                           style={styles.activeTimerCancelBtn}>
-                          <Text style={{ color: props.theme.button.fontColor, fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+                          <Text style={{ color: props.theme?.button.fontColor, fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
                         </TouchableOpacity>
                       </View>
                       <View style={styles.activeTimerTimeBox}>
@@ -309,9 +310,9 @@ const TimerPage = (props: {theme?: any}) => {
                           thumbStrokeWidth={2}
                           thumbRadius={0}
                         />
-                        <Text style={{ marginLeft: cx(20), fontSize: cx(22), color: props.theme.global.fontColor }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
+                        <Text style={{ marginLeft: cx(20), fontSize: cx(22), color: props.theme?.global.fontColor }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
                       </View>
-                      <Text style={{color: props.theme.global.fontColor}}>
+                      <Text style={{color: props.theme?.global.fontColor}}>
                         {I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, timeFormatToRealTime(timer.progressHook.countdown))}
                       </Text>
                     </Card>
@@ -348,14 +349,14 @@ const TimerPage = (props: {theme?: any}) => {
                   thumbStroke={'#f60'}
                   renderCenterView={
                     <View style={{ position: 'absolute' }}>
-                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: props.theme.global.secondFontColor }}>
+                      <Text style={{ fontSize: cx(22), fontWeight: 'bold', color: props.theme?.global.secondFontColor }}>
                         {getActiveTimeString(runningTimer()[0].progressHook.countdown)}
                       </Text>
                     </View>
                   }
                 />
                 <View style={{ marginVertical: cx(30) }}>
-                  <Text style={{color: props.theme.global.fontColor}}>
+                  <Text style={{color: props.theme?.global.fontColor}}>
                     {I18n.formatValue(
                       runningTimer()[0].enable ?
                         runningTimer()[0].stringOff :

package/src/newModules/biorhythm/BiorhythmEditPage.tsx

@@ -19,6 +19,7 @@ import Page from '@ledvance/base/src/components/Page'
 import Card from '@ledvance/base/src/components/Card'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import { showDialog } from '@ledvance/base/src/utils/common'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -37,7 +38,7 @@ export interface BiorhythmEditPageParams {
   showDeleteBtn?: boolean
 }
 
-const BiorhythmEditPage = (props: { theme?: any }) => {
+const BiorhythmEditPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const route = useRoute<any>()
   const {
@@ -112,7 +113,7 @@ const BiorhythmEditPage = (props: { theme?: any }) => {
       borderRadius: cx(4),
     },
     title: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontFamily: 'helvetica_neue_lt_std_bd',
       paddingVertical: cx(16),
@@ -134,14 +135,14 @@ const BiorhythmEditPage = (props: { theme?: any }) => {
         <View
           style={{
             marginHorizontal: cx(24),
-            backgroundColor: props.theme.global.background,
+            backgroundColor: props.theme?.global.background,
           }}>
           <View style={{ height: cx(20) }} />
           <TextField
             value={state.planData.name}
             showError={state.planData.name?.length > 32 || nameRepeatFlag}
             maxLength={33}
-            tipColor={nameRepeatFlag ? props.theme.global.error : undefined}
+            tipColor={nameRepeatFlag ? props.theme?.global.error : undefined}
             errorText={I18n.getLang(nameRepeatFlag ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')}
             placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
             onChangeText={text => {
@@ -151,8 +152,8 @@ const BiorhythmEditPage = (props: { theme?: any }) => {
           <View style={{ height: cx(20) }} />
           <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={!is24Hour}
             singlePicker={true}
             amText={I18n.getLang('manage_user_calendar_label_am')}
@@ -164,14 +165,14 @@ const BiorhythmEditPage = (props: { theme?: any }) => {
             }}
           />
           {minimumTipEnable() && <View style={{ flexDirection: 'row', marginVertical: cx(5) }}>
-              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.ic_info} />
+              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }} source={res.ic_info} />
               <Text
-                  style={{ color: props.theme.global.fontColor, fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
+                  style={{ color: props.theme?.global.fontColor, fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
           </View>}
           <View style={{ height: cx(20) }} />
           <View style={{ flexDirection: 'row' }}>
             <View style={{ flex: 1 }}>
-              <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang('add_new_trigger_time_text')}</Text>
+              <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>{I18n.getLang('add_new_trigger_time_text')}</Text>
             </View>
             <TouchableOpacity
               activeOpacity={1}
@@ -188,15 +189,15 @@ const BiorhythmEditPage = (props: { theme?: any }) => {
               <View
                 style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignContent: 'center', alignItems: 'center' }}>
                 <Image
-                  style={{ width: cx(24), height: cx(24), tintColor: props.theme.global.fontColor }}
+                  style={{ width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor }}
                   source={setImg()}
                 />
-                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={BiologicalRes.biorhythom_select_rightIcon} />
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }} source={BiologicalRes.biorhythom_select_rightIcon} />
               </View>
             </TouchableOpacity>
           </View>
           <Text
-            style={{ fontSize: cx(16), color: props.theme.global.fontColor, fontFamily: 'helvetica_neue_lt_std_bd', marginTop: cx(33), marginBottom: cx(16) }}>
+            style={{ fontSize: cx(16), color: props.theme?.global.fontColor, fontFamily: 'helvetica_neue_lt_std_bd', marginTop: cx(33), marginBottom: cx(16) }}>
             {I18n.getLang('add_new_trigger_time_subheadline_text')}
           </Text>
           <Card>

package/src/newModules/biorhythm/BiorhythmPage.tsx

@@ -32,6 +32,7 @@ import Card from '@ledvance/base/src/components/Card'
 import Spacer from '@ledvance/base/src/components/Spacer'
 import DeleteButton from '@ledvance/base/src/components/DeleteButton'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -58,7 +59,7 @@ export interface BiorhythmPageParams {
   isMixLight?: boolean
 }
 
-const BiorhythmPage = (props: { theme?: any }) => {
+const BiorhythmPage = (props: { theme?: ThemeType }) => {
   const params = useParams<BiorhythmPageParams>()
   const navigation = useNavigation()
   const [biorhythm, setBiorhythm] = useBiorhythm(params.biorhythmDpCode)
@@ -228,20 +229,20 @@ const BiorhythmPage = (props: { theme?: any }) => {
 
   const sunHomeText = string => {
     const text = string.split('SUN@HOME')
-    return text?.length === 1 && <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{text[0]}</Text> ||
+    return text?.length === 1 && <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>{text[0]}</Text> ||
         <Text style={{
           fontSize: cx(14),
           flexDirection: 'row',
         }}>
-            <Text style={{color: props.theme.global.fontColor }}>{text[0]}</Text>
+            <Text style={{color: props.theme?.global.fontColor }}>{text[0]}</Text>
             <Text onPress={openLink}
                   style={{
                     fontFamily: 'helvetica_neue_lt_std_roman',
-                    color: props.theme.button.primary,
+                    color: props.theme?.button.primary,
                     textDecorationLine: 'underline',
                     flexWrap: 'wrap',
                   }}>SUN@HOME</Text>
-            <Text style={{color: props.theme.global.fontColor }}>{text[1]}</Text>
+            <Text style={{color: props.theme?.global.fontColor }}>{text[1]}</Text>
         </Text>
   }
 
@@ -265,7 +266,7 @@ const BiorhythmPage = (props: { theme?: any }) => {
         headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
         headlineIconContent={<Switch
           value={state.enable}
-          thumbColor={props.theme.icon.primary}
+          thumbColor={props.theme?.icon.primary}
           trackColor={{ false: '#00000026', true: '#ff660036' }}
           onValueChange={async enable => {
             state.loading = true
@@ -305,14 +306,14 @@ const BiorhythmPage = (props: { theme?: any }) => {
                       justifyContent: 'center',
                       alignItems: 'center',
                       borderRadius: cx(20),
-                      backgroundColor: period.enabled ? props.theme.global.thirdBrand : props.theme.global.background,
+                      backgroundColor: period.enabled ? props.theme?.global.thirdBrand : props.theme?.global.background,
                       borderWidth: cx(1),
-                      borderColor: props.theme.global.brand,
+                      borderColor: props.theme?.global.brand,
                     }}
                   >
                     <Text
                       style={{
-                        color: props.theme.global.brand,
+                        color: props.theme?.global.brand,
                         textAlign: 'center',
                       }}
                     >
@@ -324,10 +325,10 @@ const BiorhythmPage = (props: { theme?: any }) => {
             })}
           </View>
           <View style={{ marginHorizontal: cx(24), marginTop: cx(20) }}>
-            <Text style={{color: props.theme.global.fontColor}}>{state.weekString}</Text>
+            <Text style={{color: props.theme?.global.fontColor}}>{state.weekString}</Text>
           </View>
           <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
-            <Text style={{color: props.theme.global.fontColor}}>
+            <Text style={{color: props.theme?.global.fontColor}}>
               {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
             </Text>
             <TouchableOpacity
@@ -339,17 +340,17 @@ const BiorhythmPage = (props: { theme?: any }) => {
                 style={{
                   flexDirection: 'row',
                   borderRadius: cx(4),
-                  backgroundColor: props.theme.textInput.background,
+                  backgroundColor: props.theme?.textInput.background,
                   alignItems: 'center',
                   flex: 1,
                   height: cx(44),
                   borderBottomWidth: cx(1),
-                  borderBottomColor: props.theme.textInput.line,
+                  borderBottomColor: props.theme?.textInput.line,
                 }}
               >
                 <Text style={{
                   fontSize: cx(16),
-                  color: props.theme.textInput.fontColor,
+                  color: props.theme?.textInput.fontColor,
                   fontFamily: 'helvetica_neue_lt_std_roman',
                   paddingLeft: cx(16),
                 }}>
@@ -391,12 +392,12 @@ const BiorhythmPage = (props: { theme?: any }) => {
             }}>
             {state.planList.length === 8 && <View
                 style={{ marginVertical: cx(10), flexDirection: 'row', alignItems: 'center', width: width - cx(48) }}>
-                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }} source={res.ic_warning_amber} />
                 <Text
                     style={{
                       flexWrap: 'wrap',
                       fontSize: cx(12),
-                      color: props.theme.global.fontColor
+                      color: props.theme?.global.fontColor
                     }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
             </View>}
             {state.planList.length < 8 &&
@@ -405,7 +406,7 @@ const BiorhythmPage = (props: { theme?: any }) => {
                         style={{
                           fontSize: cx(16),
                           fontWeight: 'bold',
-                          color: props.theme.global.fontColor,
+                          color: props.theme?.global.fontColor,
                         }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
                     <TouchableOpacity
                         onPress={() => {
@@ -447,7 +448,7 @@ const BiorhythmPage = (props: { theme?: any }) => {
                           }
                           navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
                         }}>
-                        <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24), tintColor: props.theme.icon.primary }} />
+                        <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24), tintColor: props.theme?.icon.primary }} />
                     </TouchableOpacity>
                 </>
             }
@@ -504,13 +505,13 @@ const BiorhythmPage = (props: { theme?: any }) => {
                             height: cx(24),
                             marginStart: cx(10),
                             marginRight: cx(6),
-                            tintColor: props.theme.icon.normal,
+                            tintColor: props.theme?.icon.normal,
                           }}
                         />
                         <Text
                           style={{
                             fontSize: cx(16),
-                            color: props.theme.global.fontColor,
+                            color: props.theme?.global.fontColor,
                             fontFamily: 'helvetica_neue_lt_std_roman',
                           }}
                         >
@@ -519,7 +520,7 @@ const BiorhythmPage = (props: { theme?: any }) => {
                       </View>
                       <Switch
                         value={item.enable}
-                        thumbColor={props.theme.icon.primary}
+                        thumbColor={props.theme?.icon.primary}
                         trackColor={{ false: '#00000026', true: '#ff660036' }}
                         onValueChange={e => {
                           item.enable = e
@@ -532,7 +533,7 @@ const BiorhythmPage = (props: { theme?: any }) => {
                       <Text
                         style={{
                           fontSize: cx(12),
-                          color: props.theme.global.secondFontColor,
+                          color: props.theme?.global.secondFontColor,
                           fontFamily: 'helvetica_neue_lt_std_roman',
                           paddingLeft: cx(20),
                         }}

package/src/newModules/biorhythm/IconSelect.tsx

@@ -2,9 +2,10 @@ import { useNavigation, useRoute } from '@react-navigation/native'
 import React, { useEffect, useState } from 'react'
 import { Image, ScrollView, Text, TouchableOpacity, View } from 'react-native'
 import { Utils } from 'tuya-panel-kit'
-import iconList from '@ledvance/ui-biz-bundle/src/newModules/biorhythm/iconListData'
+import iconList from '../biorhythm/iconListData'
 import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
 import I18n from '@ledvance/base/src/i18n'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -16,7 +17,7 @@ interface SceneDetailPageParams {
   iconIdList: any
 }
 
-function IconSelect(props: { theme?: any }) {
+function IconSelect(props: { theme?: ThemeType }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
   const params = useRoute().params as SceneDetailPageParams
@@ -54,7 +55,7 @@ function IconSelect(props: { theme?: any }) {
       />
       <ScrollView nestedScrollEnabled={true} style={{ marginHorizontal: cx(24) }}>
         <View style={{ marginTop: cx(40), marginBottom: cx(20) }}>
-          <Text style={{ fontSize: cx(24), color: props.theme.global.brand }}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
+          <Text style={{ fontSize: cx(24), color: props.theme?.global.brand }}>{I18n.getLang('add_new_trigger_time_icon_selection_headline_text')}</Text>
         </View>
         <View
           style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'flex-start' }}>
@@ -73,7 +74,7 @@ function IconSelect(props: { theme?: any }) {
                   width: cx(32),
                   height: cx(32),
                   margin: cx(10),
-                  tintColor: item?.selectStatus ? props.theme.icon.primary : item?.disabled && props.theme.icon.disable || props.theme.icon.normal,
+                  tintColor: item?.selectStatus ? props.theme?.icon.primary : item?.disabled && props.theme?.icon.disable || props.theme?.icon.normal,
                 }}
               />
             </TouchableOpacity>

package/src/newModules/childLock/ChildLockPage.tsx

@@ -9,6 +9,7 @@ import {View, Text, StyleSheet, Image} from "react-native";
 import {Result} from "@ledvance/base/src/models/modules/Result";
 import res from "@ledvance/base/src/res";
 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
@@ -21,7 +22,7 @@ export function useChildLock(childLockCode: string): [boolean, (v: boolean) => P
   return useDp(childLockCode)
 }
 
-const ChildLockPage = (props: { theme?: any }) => {
+const ChildLockPage = (props: { theme?: ThemeType }) => {
   const params = useParams<ChildLockPageParams>()
   const devInfo = useDeviceInfo()
   const [childLock, setChildLock] = useChildLock(params.childLockCode)
@@ -39,7 +40,7 @@ const ChildLockPage = (props: { theme?: any }) => {
       width: cx(16),
       height: cx(16),
       marginRight: cx(5),
-      tintColor: props.theme.global.fontColor
+      tintColor: props.theme?.global.fontColor
     },
     titleBGView: {
       flexDirection: 'row',
@@ -54,13 +55,13 @@ const ChildLockPage = (props: { theme?: any }) => {
       borderRadius: cx(4),
     },
     title: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_bd',
       paddingVertical: cx(16),
     },
     shadow: {
-      shadowColor: props.theme.card.shadowColor,
+      shadowColor: props.theme?.card.shadowColor,
       shadowOpacity: 0.2,
       shadowRadius: 8,
       elevation:8,
@@ -68,7 +69,7 @@ const ChildLockPage = (props: { theme?: any }) => {
         width: 0,
         height: 4,
       },
-      backgroundColor: props.theme.card.background,
+      backgroundColor: props.theme?.card.background,
       borderRadius: 8,
     },
   })
@@ -79,7 +80,7 @@ const ChildLockPage = (props: { theme?: any }) => {
     loading={state.loading}>
     <View style={styles.tipInfoContainer}>
       <Image style={styles.image} source={res.ic_info} />
-      <Text style={{ color: props.theme.global.fontColor }}>
+      <Text style={{ color: props.theme?.global.fontColor }}>
         {I18n.getLang('childlock_overview_description_text')}
       </Text>
     </View>

package/src/newModules/energyConsumption/EnergyConsumptionChart.tsx

@@ -10,6 +10,7 @@ import { exportFile } from "@ledvance/base/src/utils/common";
 import { OverviewItem } from "./EnergyConsumptionPage";
 import Spacer from "@ledvance/base/src/components/Spacer";
 import InfoText from "@ledvance/base/src/components/InfoText";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx, height, width } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -22,7 +23,7 @@ export interface EnergyConsumptionChartProps {
   over7Days?: boolean
 }
 
-const EnergyConsumptionChart = (props: { theme?: any }) => {
+const EnergyConsumptionChart = (props: { theme?: ThemeType }) => {
   const params = useRoute().params as EnergyConsumptionChartProps
   const computeNum = Platform.OS === 'ios' && 180 || 130
 
@@ -59,7 +60,7 @@ const EnergyConsumptionChart = (props: { theme?: any }) => {
               <InfoText
                 text={I18n.getLang('energyconsumption_hourlylimit')}
                 icon={res.ic_info}
-                contentColor={props.theme.global.fontColor}
+                contentColor={props.theme?.global.fontColor}
               />
             </View>
           ) : (

package/src/newModules/energyConsumption/EnergyConsumptionDetail.tsx

@@ -20,6 +20,7 @@ import {EnergyConsumptionChartProps} from "./EnergyConsumptionChart";
 import {overDays} from "@ledvance/base/src/utils";
 import EnergyPopup, {EnergyData} from "./component/EnergyModal";
 import {carbonDioxideEmission, countryAndRegion} from "./co2Data";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -32,7 +33,7 @@ export interface EnergyConsumptionDetailProps {
   updateEnergyData: (data: EnergyData) => {}
 }
 
-const EnergyConsumptionDetail = (props: {theme?: any}) => {
+const EnergyConsumptionDetail = (props: {theme?: ThemeType}) => {
   const params = useRoute().params as EnergyConsumptionDetailProps
   const devId = useDeviceId()
   const isSolarPlug = useEngergyGeneration()
@@ -133,7 +134,7 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
       padding: cx(16)
     },
     cardTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold'
     },
@@ -142,7 +143,7 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
       flexDirection: 'row',
     },
     consumptionNum: {
-      color: props.theme.global.secondBrand,
+      color: props.theme?.global.secondBrand,
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     subContent: {
@@ -153,19 +154,19 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
     valueText: {
       fontSize: cx(24),
       fontWeight: 'bold',
-      color: props.theme.global.secondBrand,
+      color: props.theme?.global.secondBrand,
     },
     titleText: {
       fontFamily: 'helvetica_neue_lt_std_roman',
       fontSize: cx(14),
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       textAlign: 'center',
     },
     priceBg: {
       height: cx(40),
       width: cx(40),
       borderRadius: cx(40),
-      backgroundColor: props.theme.global.thirdBrand,
+      backgroundColor: props.theme?.global.thirdBrand,
       justifyContent: 'center',
       alignItems: 'center',
       marginRight: cx(10)
@@ -178,7 +179,7 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
       paddingHorizontal: cx(10),
       paddingVertical: cx(8),
       marginTop: cx(8),
-      backgroundColor: props.theme.button.primary,
+      backgroundColor: props.theme?.button.primary,
       alignItems: 'center',
       justifyContent: 'center'
     }
@@ -217,12 +218,12 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
                         <Image
                             source={res.energy_consumption_cash}
                             resizeMode="contain"
-                            style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.primary }}
+                            style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
                         />
                     </View>
                     <View style={styles.priceNum}>
                         <View style={{ flexDirection: 'row' }}>
-                            <Text style={{ color: props.theme.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
+                            <Text style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}>{I18n.getLang('consumption_data_field3_co2_topic_text')}</Text>
                             <TouchableOpacity
                                 onPress={() => {
                                   state.showPopup = true
@@ -232,11 +233,11 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
                                 <Image
                                     source={res.co2Icon}
                                     resizeMode="contain"
-                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.action }}
+                                    style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.action }}
                                 />
                             </TouchableOpacity>
                         </View>
-                        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
+                        <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{`${state.co2Saved} kg`}</Text>
                     </View>
                 </View>
                 <Spacer height={cx(10)} />
@@ -247,20 +248,20 @@ const EnergyConsumptionDetail = (props: {theme?: any}) => {
                 <Image
                   source={res.energy_consumption_cash}
                   resizeMode="contain"
-                  style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.primary }}
+                  style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.primary }}
                 />
               </View>
               <View>
                 <View style={styles.priceNum}>
-                  <Text style={{ color: props.theme.global.secondFontColor }}>{I18n.getLang('consumption_data_field3_value_text2')}</Text>
-                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(params.curMonth.value), 2)} ${state.unit}` : '-'}</Text>
+                  <Text style={{ color: props.theme?.global.secondFontColor }}>{I18n.getLang('consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(params.curMonth.value), 2)} ${state.unit}` : '-'}</Text>
                 </View>
                 <TouchableOpacity onPress={() => {
                   state.showPopup = true
                   state.popupType = 'money'
                 }}>
                   <View style={styles.priceButton}>
-                    <Text style={{ color: props.theme.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
+                    <Text style={{ color: props.theme?.button.fontColor }}>{I18n.getLang('consumption_data_field3_button_text')}</Text>
                   </View>
                 </TouchableOpacity>
               </View>