@ledvance/group-ui-biz-bundle 1.0.82 → 1.0.84

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/group-ui-biz-bundle",
   "pid": [],
   "uiid": "",
-  "version": "1.0.82",
+  "version": "1.0.84",
   "scripts": {},
   "dependencies": {
     "@ledvance/base": "^1.x",

package/src/modules/biorhythm/BiorhythmDetailPage.tsx

@@ -20,6 +20,7 @@ import { useParams } from '@ledvance/base/src/hooks/Hooks'
 import Card from '@ledvance/base/src/components/Card'
 import { useSystemTimeFormate } from '@ledvance/base/src/models/modules/NativePropsSlice'
 import Spacer from '@ledvance/base/src/components/Spacer'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -38,7 +39,7 @@ export interface BiorhythmEditPageParams {
   showDeleteBtn?: boolean
 }
 
-const BiorhythmEditPage = (props: { theme?: any }) => {
+const BiorhythmEditPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const is24Hour = useSystemTimeFormate()
   const params = useParams<BiorhythmEditPageParams>()
@@ -119,7 +120,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),
@@ -141,7 +142,7 @@ 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
@@ -157,8 +158,8 @@ const BiorhythmEditPage = (props: { theme?: any }) => {
           <Spacer />
           <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')}
@@ -170,14 +171,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>}
           <Spacer />
           <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}
@@ -194,15 +195,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/modules/biorhythm/BiorhythmPage.tsx

@@ -34,6 +34,7 @@ import Spacer from '@ledvance/base/src/components/Spacer'
 import ApplyForDeviceList from '@ledvance/base/src/components/ApplyForDeviceList'
 import DeleteButton from '@ledvance/base/src/components/DeleteButton'
 import InfoText from '@ledvance/base/src/components/InfoText'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -54,7 +55,7 @@ export interface BiorhythmPageParams {
   isMixLight: boolean
 }
 
-const BiorhythmPage = (props: { theme?: any }) => {
+const BiorhythmPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const params = useParams<BiorhythmPageParams>()
   const [biorhythm, setBiorhythm] = useBiorhythm()
@@ -209,20 +210,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>
   }
 
@@ -249,7 +250,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 => {
           if (enable) return showDialog({
@@ -304,14 +305,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',
                         }}
                       >
@@ -323,10 +324,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
@@ -338,17 +339,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),
                   }}>
@@ -390,12 +391,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 &&
@@ -404,7 +405,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={() => {
@@ -446,7 +447,7 @@ const BiorhythmPage = (props: { theme?: any }) => {
                             }
                             navigation.navigate(ui_biz_routerKey.group_ui_biz_biological_detail, 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>
                   </>
               }
@@ -465,9 +466,9 @@ const BiorhythmPage = (props: { theme?: any }) => {
                   <View
                     style={{
                       height: cx(118),
-                      backgroundColor: props.theme.card.background,
+                      backgroundColor: props.theme?.card.background,
                       elevation: cx(7),
-                      shadowColor: props.theme.card.shadowColor,
+                      shadowColor: props.theme?.card.shadowColor,
                       shadowOpacity: 0.2,
                       shadowRadius: cx(7),
                       shadowOffset: {
@@ -518,13 +519,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',
                               }}
                             >
@@ -533,7 +534,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
@@ -546,7 +547,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/modules/biorhythm/IconSelect.tsx

@@ -6,6 +6,7 @@ import iconList from './iconListData'
 import LDVTopBar from '@ledvance/base/src/components/ldvTopBar'
 import I18n from '@ledvance/base/src/i18n'
 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
@@ -16,7 +17,7 @@ interface IconSelectPageParams {
   iconIdList: any
 }
 
-function IconSelectPage(props: { theme?: any }) {
+function IconSelectPage(props: { theme?: ThemeType }) {
   const [list, setList] = useState(iconList)
   const navigation = useNavigation()
   const params = useParams<IconSelectPageParams>()
@@ -52,7 +53,7 @@ function IconSelectPage(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'}}>
@@ -71,7 +72,7 @@ function IconSelectPage(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/modules/childLock/ChildLockPage.tsx

@@ -8,6 +8,7 @@ import Spacer from "@ledvance/base/src/components/Spacer";
 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 ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -20,7 +21,7 @@ export function useChildLock(): [boolean, (v: boolean) => Promise<Result<any>>]
   return useFeatureHook<ChildLockConfig, boolean>('childLock', false)
 }
 
-const ChildLockPage = (props: { theme?: any }) => {
+const ChildLockPage = (props: { theme?: ThemeType }) => {
   const devInfo = useDeviceInfo()
   const [childLock, setChildLock] = useChildLock()
   const state = useReactive({
@@ -37,7 +38,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',
@@ -52,13 +53,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,
@@ -66,7 +67,7 @@ const ChildLockPage = (props: { theme?: any }) => {
         width: 0,
         height: 4,
       },
-      backgroundColor: props.theme.card.background,
+      backgroundColor: props.theme?.card.background,
       borderRadius: 8,
     },
   })
@@ -77,7 +78,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/modules/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/modules/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
@@ -34,7 +35,7 @@ export interface EnergyConsumptionDetailProps {
   updateEnergyData: (data: EnergyData) => {}
 }
 
-const EnergyConsumptionDetail = (props: { theme?: any }) => {
+const EnergyConsumptionDetail = (props: { theme?: ThemeType }) => {
   const params = useRoute().params as EnergyConsumptionDetailProps
   const navigation = useNavigation()
   const timeZoneCity = useTimeZoneCity()
@@ -158,7 +159,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'
     },
@@ -167,7 +168,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: {
@@ -178,19 +179,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)
@@ -203,7 +204,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'
     }
@@ -242,12 +243,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.active }}
+                    style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.active }}
                   />
                 </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
@@ -257,11 +258,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)} />
@@ -272,20 +273,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.active }}
+                  style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.active }}
                 />
               </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>

package/src/modules/energyConsumption/EnergyConsumptionPage.tsx

@@ -27,6 +27,7 @@ import { carbonDioxideEmission, countryAndRegion } from './co2Data';
 import { EnergyConsumptionDetailProps } from './EnergyConsumptionDetail';
 import { EnergyConsumptionChartProps } from './EnergyConsumptionChart';
 import SegmentControl from '@ledvance/base/src/components/segmentControl';
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils;
@@ -67,7 +68,7 @@ interface EnergyConsumptionState {
   collapsed: boolean
 }
 
-const EnergyConsumptionPage = (props: { theme?: any }) => {
+const EnergyConsumptionPage = (props: { theme?: ThemeType }) => {
   const params = useRoute().params as EnergyConsumptionPageProps;
   const navigation = useNavigation();
   const timeZoneCity = useTimeZoneCity();
@@ -204,7 +205,7 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
       padding: cx(16),
     },
     cardTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontWeight: 'bold',
     },
@@ -213,7 +214,7 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
       flexDirection: 'row',
     },
     consumptionNum: {
-      color: props.theme.global.secondBrand,
+      color: props.theme?.global.secondBrand,
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     subContent: {
@@ -224,19 +225,19 @@ const EnergyConsumptionPage = (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),
@@ -249,7 +250,7 @@ const EnergyConsumptionPage = (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',
     },
@@ -377,14 +378,14 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
                       style={{
                         height: cx(20),
                         width: cx(20),
-                        tintColor: props.theme.button.active,
+                        tintColor: props.theme?.button.active,
                       }}
                     />
                   </View>
                   <View style={styles.priceNum}>
                     <View style={{ flexDirection: 'row' }}>
                       <Text
-                        style={{ color: props.theme.global.secondFontColor, marginRight: cx(5) }}
+                        style={{ color: props.theme?.global.secondFontColor, marginRight: cx(5) }}
                       >
                         {I18n.getLang('consumption_data_field3_co2_topic_text')}
                       </Text>
@@ -400,13 +401,13 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
                           style={{
                             height: cx(20),
                             width: cx(20),
-                            tintColor: props.theme.button.active,
+                            tintColor: props.theme?.button.active,
                           }}
                         />
                       </TouchableOpacity>
                     </View>
                     <Text
-                      style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}
+                      style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}
                     >{`${state.co2Saved} kg`}</Text>
                   </View>
                 </View>
@@ -419,19 +420,19 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
                 <Image
                   source={res.energy_consumption_cash}
                   resizeMode="contain"
-                  style={{ height: cx(20), width: cx(20), tintColor: props.theme.button.active }}
+                  style={{ height: cx(20), width: cx(20), tintColor: props.theme?.button.active }}
                 />
               </View>
               <View>
                 <View style={styles.priceNum}>
-                  <Text style={{ color: props.theme.global.secondFontColor }}>
+                  <Text style={{ color: props.theme?.global.secondFontColor }}>
                     {I18n.getLang(
                       state.isSolarMode
                         ? 'consumption_data_monthly_overview_field1_text2'
                         : 'consumption_data_field3_value_text2'
                     )}
                   </Text>
-                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>
+                  <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>
                     {state.price
                       ? `${localeNumber(Number(state.price) * Number(state.isSolarMode ? state.solarTotalElectricity : state.wifiTotalElectricity), 2)} ${state.unit
                       }`
@@ -445,7 +446,7 @@ const EnergyConsumptionPage = (props: { theme?: any }) => {
                   }}
                 >
                   <View style={styles.priceButton}>
-                    <Text style={{ color: props.theme.button.fontColor }}>
+                    <Text style={{ color: props.theme?.button.fontColor }}>
                       {I18n.getLang('consumption_data_field3_button_text')}
                     </Text>
                   </View>