@ledvance/ui-biz-bundle 1.1.93 → 1.1.94

package/src/newModules/energyConsumption/EnergyConsumptionPage.tsx

@@ -21,6 +21,7 @@ import { EnergyConsumptionChartProps } from "./EnergyConsumptionChart";
 import EnergyPopup, { EnergyData, UnitList } from "./component/EnergyModal";
 import { NativeApi } from "@ledvance/base/src/api/native";
 import { carbonDioxideEmission, countryAndRegion } from "./co2Data";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -50,7 +51,7 @@ interface EnergyConsumptionState {
   popupType: PopupType
   co2Saved: string
 }
-const EnergyConsumptionPage = (props: {theme?: any}) => {
+const EnergyConsumptionPage = (props: {theme?: ThemeType}) => {
   const params = useRoute().params as EnergyConsumptionPageProps
   const devId = useDeviceId()
   const navigation = useNavigation()
@@ -138,7 +139,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'
     },
@@ -147,7 +148,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: {
@@ -158,19 +159,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)
@@ -183,7 +184,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'
     },
@@ -290,12 +291,12 @@ const EnergyConsumptionPage = (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
@@ -305,11 +306,11 @@ const EnergyConsumptionPage = (props: {theme?: any}) => {
                                 <Image
                                     source={res.co2Icon}
                                     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 }}
                                 />
                             </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)} />
@@ -320,20 +321,20 @@ const EnergyConsumptionPage = (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(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
-                  <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 2)} ${state.unit}` : '-'}</Text>
+                  <Text style={{ color: props.theme?.global.secondFontColor }}>{I18n.getLang(isSolarPlug ? 'consumption_data_monthly_overview_field1_text2' : 'consumption_data_field3_value_text2')}</Text>
+                  <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{state.price ? `${localeNumber(Number(state.price ) * Number(state.totalElectricity), 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/newModules/energyConsumption/component/BarChart.tsx

@@ -2,8 +2,21 @@ import React from 'react';
 import { View } from 'react-native';
 import ECharts from '@ledvance/react-native-echarts-pro';
 import I18n from "@ledvance/base/src/i18n";
+import ThemeType from "@ledvance/base/src/config/themeType";
+import {Utils} from "tuya-panel-kit";
+import {OverviewItem} from "../EnergyConsumptionPage";
 
-const BarChartWithTouch = ({ data, height, width }) => {
+const { withTheme } = Utils.ThemeUtils
+
+interface BarChartProps {
+    theme?: ThemeType
+    data: OverviewItem[]
+    height: number
+    width: number
+}
+
+const BarChartWithTouch = (props: BarChartProps) => {
+    const { data, height, width } = props
     const dataX = data?.map(item => { return item.chartTitle });
     const dataY = data?.map(item => { return item.value });
     const option = {
@@ -11,7 +24,7 @@ const BarChartWithTouch = ({ data, height, width }) => {
             text: I18n.getLang('consumption_data_annual_bar_chart_text'),
             textStyle: {
                 fontSize: 14,
-                color: "#666666",
+                color: props.theme?.global.secondFontColor,
             },
             top: 10,
         },
@@ -30,7 +43,7 @@ const BarChartWithTouch = ({ data, height, width }) => {
             },
             axisLabel: {
                 show: true,
-                color: '#999999',
+                color: props.theme?.global.secondFontColor,
                 interval: 0,
             }
         },
@@ -55,7 +68,7 @@ const BarChartWithTouch = ({ data, height, width }) => {
                     distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                     verticalAlign: 'middle',
                     textStyle: { // 数值样式
-                        color: 'black',
+                        color: props.theme?.global.fontColor,
                         fontSize: 12
                     },
                 },
@@ -90,4 +103,4 @@ const BarChartWithTouch = ({ data, height, width }) => {
     );
 };
 
-export default BarChartWithTouch;
+export default withTheme(BarChartWithTouch)

package/src/newModules/energyConsumption/component/EnergyModal.tsx

@@ -8,6 +8,7 @@ import { TouchableOpacity, View, Text, TextInput, StyleSheet, Linking, FlatList,
 import { Utils, Modal, Popup } from "tuya-panel-kit";
 import { useReactive, useUpdateEffect } from "ahooks";
 import { cloneDeep } from "lodash";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx, height } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -24,7 +25,7 @@ export interface EnergyData {
   unit: string
 }
 interface EnergyModalProps {
-  theme?: any
+  theme?: ThemeType
   visible: boolean
   popupType: 'money' | 'co2' | 'unit'
   title: string
@@ -51,14 +52,14 @@ const EnergyModal = (props: EnergyModalProps) => {
     const text = string.split(separators)
     const length = text.length - 1
     return <View>
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 6] + '.'}</Text>
+      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 6] + '.'}</Text>
       <Spacer />
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 5] + '.'}</Text>
+      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 5] + '.'}</Text>
       <Spacer />
-      <Text style={{ color: props.theme.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
+      <Text style={{ color: props.theme?.global.fontColor }}>{text[length - 4] + text[length - 3] + ':'}</Text>
       <Spacer />
       <Text
-        style={{ textDecorationLine: 'underline', color: props.theme.button.primary }}
+        style={{ textDecorationLine: 'underline', color: props.theme?.button.primary }}
         onPress={() => openLink(`${text[length - 2]}:${text[length - 1]}${text[length]}`)}
       >
         {`${text[length - 2]}:${text[length - 1]}${text[length]}`}
@@ -73,7 +74,7 @@ const EnergyModal = (props: EnergyModalProps) => {
   const styles = StyleSheet.create({
     popupTip: {
       fontSize: cx(16),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontWeight: 'bold'
     },
     textInput: {
@@ -82,13 +83,13 @@ const EnergyModal = (props: EnergyModalProps) => {
       marginStart: cx(16),
       marginEnd: cx(6),
       fontSize: cx(16),
-      color: props.theme.textInput.fontColor,
+      color: props.theme?.textInput.fontColor,
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     textInputGroup: {
       flexDirection: 'row',
       borderRadius: cx(4),
-      backgroundColor: props.theme.textInput.background,
+      backgroundColor: props.theme?.textInput.background,
       alignItems: 'center',
     },
     iconTouchable: {
@@ -101,7 +102,7 @@ const EnergyModal = (props: EnergyModalProps) => {
       start: cx(4),
       end: cx(4),
       bottom: 0,
-      backgroundColor: props.theme.textInput.line,
+      backgroundColor: props.theme?.textInput.line,
     },
     unitItem: {
       flexDirection: 'row',
@@ -120,12 +121,12 @@ const EnergyModal = (props: EnergyModalProps) => {
           <Spacer />
           <Text style={styles.popupTip}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
           <Spacer height={cx(40)} />
-          <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
+          <Text style={{ fontSize: cx(14), color: props.theme?.global.fontColor }}>{I18n.getLang('consumption_data_price_per_kwh_description_text')}</Text>
           <Spacer height={cx(15)} />
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             <View style={{ flex: 3 }}>
               <Spacer height={cx(4)} />
-              <Text style={{ color: props.theme.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
+              <Text style={{ color: props.theme?.global.secondFontColor, marginStart: cx(13), fontFamily: 'helvetica_neue_lt_std_bd' }}>{I18n.getLang('consumption_data_price_per_kwh_headline_text')}</Text>
               <View style={styles.textInputGroup}>
                 <TextInput
                   value={state.energyData?.price}
@@ -169,7 +170,7 @@ const EnergyModal = (props: EnergyModalProps) => {
               data={UnitList}
               renderItem={({ item }) => (
                 <View style={styles.unitItem}>
-                  <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                  <Text style={{ fontSize: cx(16), color: props.theme?.global.fontColor }}>{item}</Text>
                   {props.energyData && props.energyData.unit === item && <Image
                       style={{ width: cx(16), height: cx(16) }}
                       source={res.app_music_check}
@@ -178,7 +179,7 @@ const EnergyModal = (props: EnergyModalProps) => {
                 </View>
               )}
               ItemSeparatorComponent={() => (
-                <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+                <View style={{ flex: 1, height: 1, backgroundColor: props.theme?.card.background }}></View>
               )}
               keyExtractor={item => item}
             />
@@ -205,23 +206,23 @@ const EnergyModal = (props: EnergyModalProps) => {
     return (
       Popup.custom({
         title: (
-          <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+          <View style={{ backgroundColor: props.theme?.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
             <TouchableOpacity onPress={() => Popup.close()}>
-              <Text style={{ color: props.theme.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+              <Text style={{ color: props.theme?.global.secondBrand, fontSize: cx(16) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
             </TouchableOpacity>
           </View>
         ),
         wrapperStyle: {
           height: height - cx(40),
-          backgroundColor: props.theme.global.background
+          backgroundColor: props.theme?.global.background
         },
-        footer: (<View style={{ backgroundColor: props.theme.global.background}}></View>),
+        footer: (<View style={{ backgroundColor: props.theme?.global.background}}></View>),
         onMaskPress: () => { },
         motionType: 'none',
         useKeyboardView: true,
         content: (
           <View
-            style={{ backgroundColor: props.theme.global.background, paddingHorizontal: cx(16) }}>
+            style={{ backgroundColor: props.theme?.global.background, paddingHorizontal: cx(16) }}>
             <Spacer />
             <Card>
               <FlatList
@@ -234,7 +235,7 @@ const EnergyModal = (props: EnergyModalProps) => {
                     }}
                   >
                     <View style={styles.unitItem}>
-                      <Text style={{ fontSize: cx(16), color: props.theme.global.fontColor }}>{item}</Text>
+                      <Text style={{ fontSize: cx(16), color: props.theme?.global.fontColor }}>{item}</Text>
                       {energyData && energyData.unit === item && <Image
                           style={{ width: cx(16), height: cx(16) }}
                           source={res.app_music_check}
@@ -244,7 +245,7 @@ const EnergyModal = (props: EnergyModalProps) => {
                   </TouchableOpacity>
                 )}
                 ItemSeparatorComponent={() => (
-                  <View style={{ flex: 1, height: 1, backgroundColor: props.theme.card.background }}></View>
+                  <View style={{ flex: 1, height: 1, backgroundColor: props.theme?.card.background }}></View>
                 )}
                 keyExtractor={item => item}
               />
@@ -260,20 +261,20 @@ const EnergyModal = (props: EnergyModalProps) => {
       visible={props.visible}
     >
       <ScrollView>
-        <View style={{ backgroundColor: props.theme.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
+        <View style={{ backgroundColor: props.theme?.card.head, flexDirection: 'row', height: cx(60), justifyContent: 'space-between', alignItems: 'center', borderTopLeftRadius: cx(10), borderTopRightRadius: cx(10), paddingHorizontal: cx(8) }}>
           <TouchableOpacity onPress={() => {
             props.onCancel && props.onCancel()
           }}>
-            <Text style={{ color: props.theme.button.cancel, fontSize: cx(16) }}>{props.cancelText}</Text>
+            <Text style={{ color: props.theme?.button.cancel, fontSize: cx(16) }}>{props.cancelText}</Text>
           </TouchableOpacity>
-          <Text style={{ color: props.theme.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
+          <Text style={{ color: props.theme?.global.fontColor, fontSize: cx(16), fontWeight: 'bold' }}>{props.title}</Text>
           <TouchableOpacity onPress={() => {
             props.onConfirm && props.onConfirm(state.energyData)
           }}>
-            <Text style={{ color: props.theme.button.primary, fontSize: cx(16) }}>{props.confirmText}</Text>
+            <Text style={{ color: props.theme?.button.primary, fontSize: cx(16) }}>{props.confirmText}</Text>
           </TouchableOpacity>
         </View>
-        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme.global.background }}>
+        <View style={{ height: height - cx(100), paddingHorizontal: cx(16), backgroundColor: props.theme?.global.background }}>
           {getContent()}
         </View>
       </ScrollView>

package/src/newModules/energyConsumption/component/Overview.tsx

@@ -8,12 +8,13 @@ import { isEmpty } from "lodash";
 import { OverviewItem } from "../EnergyConsumptionPage";
 import { EnergyConsumptionChartProps } from "../EnergyConsumptionChart";
 import { useRoute } from '@react-navigation/core'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 
 interface OverViewProps {
-  theme?: any
+  theme?: ThemeType
   style?: StyleProp<ViewStyle>
   headlineText?: string
   headlineClick?: () => void
@@ -34,22 +35,22 @@ const OverView = (props: OverViewProps) => {
     listEmptyTextIcon: {
       width: cx(16),
       height: cx(16),
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
     },
     listEmptyText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(12),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     overviewItemText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14)
     },
   })
   return (
     <View style={[props.style]}>
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-        <Text style={{ color: props.theme.global.fontColor, fontWeight: 'bold' }}>{props.headlineText}</Text>
+        <Text style={{ color: props.theme?.global.fontColor, fontWeight: 'bold' }}>{props.headlineText}</Text>
         {!isEmpty(props.overViewList) && <TouchableOpacity
             onPress={() => {
               props.headlineClick && props.headlineClick()
@@ -71,16 +72,16 @@ const OverView = (props: OverViewProps) => {
                 props.overviewItemClick && props.overviewItemClick(item)
               }}
             >
-              <View style={{ backgroundColor: props.theme.card.background, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', }}>
+              <View style={{ backgroundColor: props.theme?.card.background, alignItems: 'center', justifyContent: 'space-between', flexDirection: 'row', }}>
                 <Text style={styles.overviewItemText}>{item.key}</Text>
                 <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                   <View style={{ flexDirection: 'row' }}>
-                    <Text style={[styles.overviewItemText, { color: props.theme.global.secondFontColor }]}>{item.value}</Text>
-                    <Text style={[styles.overviewItemText, { color: props.theme.global.secondFontColor }]}> kWh</Text>
+                    <Text style={[styles.overviewItemText, { color: props.theme?.global.secondFontColor }]}>{item.value}</Text>
+                    <Text style={[styles.overviewItemText, { color: props.theme?.global.secondFontColor }]}> kWh</Text>
                   </View>
                   <Image
                     source={res.energy_consumption_right}
-                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8), tintColor: props.theme.global.secondFontColor }}
+                    style={{ width: cx(16), height: cx(16), marginLeft: cx(8), tintColor: props.theme?.global.secondFontColor }}
                   />
                 </View>
               </View>

package/src/newModules/fixedTime/FixedTimeDetailPage.tsx

@@ -22,6 +22,7 @@ import { FixedTimePageParams } from "./FixedTimePage";
 import { Result } from "@ledvance/base/src/models/modules/Result";
 import { useSystemTimeFormate } from "@ledvance/base/src/models/modules/NativePropsSlice";
 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
@@ -34,7 +35,7 @@ export interface FixedTimeDetailPageParams extends FixedTimePageParams {
   onPost: (mode: 'add' | 'edit' | 'del', fixedTime: FixedTimerUiItem) => Promise<Result<any>>
 }
 
-const FixedTimeDetailPage = (props: { theme?: any }) => {
+const FixedTimeDetailPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const params = useParams<FixedTimeDetailPageParams>()
   const is24Hour = useSystemTimeFormate()
@@ -83,13 +84,13 @@ const FixedTimeDetailPage = (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,
@@ -102,11 +103,11 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       height: cx(35),
     },
     summaryTag: {
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       borderRadius: cx(16),
       paddingHorizontal: cx(12),
       alignSelf: 'flex-start'
@@ -160,8 +161,8 @@ const FixedTimeDetailPage = (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={!is24Hour}
           startTime={state.fixedTime.startTime}
           endTime={state.fixedTime.endTime}
@@ -177,7 +178,7 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
             state.fixedTime.weeks[rawIndex] = state.fixedTime.weeks[rawIndex] === 1 ? 0 : 1
           }} />
         <Spacer />
-        <Text style={{ ...styles.cardContainer, color: props.theme.global.fontColor, fontSize: cx(14) }}>
+        <Text style={{ ...styles.cardContainer, color: props.theme?.global.fontColor, fontSize: cx(14) }}>
           {loopText(state.fixedTime.weeks, parseTimer(state.fixedTime.endTime * 60))}
         </Text>
         <Spacer />
@@ -187,15 +188,15 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
           <Spacer height={cx(10)} />
           <View style={[styles.applyContent, { paddingTop: state.fixedTime.channel === undefined ? 0 : cx(10) }]}>
             {state.fixedTime.channel === undefined ?
-              <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> :
               <View style={[styles.applyItem, { marginBottom: cx(10), borderRadius: 4 }]}>
-                <Text style={{ color: props.theme.global.fontColor }}>{params.applyForList[params.isPlug ? state.fixedTime.channel : 0]?.key}</Text>
+                <Text style={{ color: props.theme?.global.fontColor }}>{params.applyForList[params.isPlug ? state.fixedTime.channel : 0]?.key}</Text>
                 {params.applyForList.length > 1 && <TouchableOpacity
                     onPress={() => {
                       state.fixedTime.channel = undefined
                     }}
                     style={{ paddingHorizontal: cx(5) }}>
-                    <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.ic_arrows_nav_clear} />
+                    <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }} source={res.ic_arrows_nav_clear} />
                 </TouchableOpacity>}
               </View>
             }
@@ -209,8 +210,8 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
                 onPress={() => {
                   state.fixedTime.channel = params.isPlug ? index : 1
                 }}>
-                <Text style={{ color: props.theme.global.fontColor }}>{item.key}</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 }}>{item.key}</Text>
+                <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor }} source={res.device_panel_timer_add} />
               </TouchableOpacity>
             )
           })}
@@ -223,7 +224,7 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
             <Card>
                 <LdvSwitch
                     title={I18n.getLang('light_sources_tile_tw_lighting_headline')}
-                    color={props.theme.card.background}
+                    color={props.theme?.card.background}
                     colorAlpha={1}
                     enable={true}
                     setEnable={() => { }}
@@ -270,11 +271,11 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
           <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
           <Spacer height={cx(10)} />
           {!inRangeTime && <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.warning }} source={res.ic_warning_amber} />
-              <Text style={{ fontSize: cx(12), color: props.theme.global.warning }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
+              <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.warning }} source={res.ic_warning_amber} />
+              <Text style={{ fontSize: cx(12), color: props.theme?.global.warning }}>{I18n.getLang('addTimeCycle_warning_text')}</Text>
           </View>}
           <View >
-            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
+            <Text style={{ color: props.theme?.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text')}</Text>
             <LdvPickerView
               hour={toFixedString(Math.trunc(state.fixedTime.openTime / 60), 2)}
               minute={toFixedString(state.fixedTime.openTime % 60, 2)}
@@ -288,7 +289,7 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
             />
           </View>
           <View>
-            <Text style={{ color: props.theme.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
+            <Text style={{ color: props.theme?.global.fontColor, marginVertical: cx(10) }}>{I18n.getLang('addTimeCycle_settings_sec_text2')}</Text>
             <LdvPickerView
               hour={toFixedString(Math.trunc(state.fixedTime.closeTime / 60), 2)}
               minute={toFixedString(state.fixedTime.closeTime % 60, 2)}
@@ -309,14 +310,14 @@ const FixedTimeDetailPage = (props: { theme?: any }) => {
           time={`${convertMinutesTo12HourFormat(state.fixedTime.startTime, is24Hour)} - ${convertMinutesTo12HourFormat(state.fixedTime.endTime, is24Hour)}`}
           actions={(
             <View style={{ flexDirection: 'column' }}>
-              <Text style={{ color: props.theme.global.fontColor }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
+              <Text style={{ color: props.theme?.global.fontColor }}>{I18n.formatValue('feature_summary_action_txt_4', `${Math.trunc(state.fixedTime.openTime / 60)}`, `${state.fixedTime.openTime % 60}`)}</Text>
               <View style={styles.summaryTag}>
-                <Text style={{ color: props.theme.tag.fontColor }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
+                <Text style={{ color: props.theme?.tag.fontColor }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
               </View>
               <Spacer height={cx(5)} />
-              <Text style={{ color: props.theme.global.fontColor }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
+              <Text style={{ color: props.theme?.global.fontColor }}>{I18n.formatValue('feature_summary_action_txt_6', `${Math.trunc(state.fixedTime.closeTime / 60)}`, `${state.fixedTime.closeTime % 60}`)}</Text>
               <View style={styles.summaryTag}>
-                <Text style={{ color: props.theme.tag.fontColor }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
+                <Text style={{ color: props.theme?.tag.fontColor }}>{params.applyForList[params.isPlug ? (state.fixedTime.channel ?? 0) : 0]?.key}</Text>
               </View>
             </View>
           )}

package/src/newModules/fixedTime/FixedTimePage.tsx

@@ -15,10 +15,11 @@ import Card from "@ledvance/base/src/components/Card";
 import { convertMinutesTo12HourFormat, loopText } from "@ledvance/base/src/utils/common";
 import { cloneDeep } from "lodash";
 import dayjs from "dayjs";
-import { ApplyForItem } from "@ledvance/ui-biz-bundle/src/newModules/timeSchedule/Interface";
+import { ApplyForItem } from "@ledvance/base/src/utils/interface";
 import { useParams } from "@ledvance/base/src/hooks/Hooks";
 import Tag from "@ledvance/base/src/components/Tag";
 import InfoText from "@ledvance/base/src/components/InfoText";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -39,7 +40,7 @@ export interface FixedTimePageParams {
   isSupportBrightness?: boolean
 }
 
-const FixedTimePage = (props: { theme?: any }) => {
+const FixedTimePage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const devInfo = useDeviceInfo()
   const params = useParams<FixedTimePageParams>()
@@ -105,14 +106,14 @@ const FixedTimePage = (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',
     },
@@ -130,7 +131,7 @@ const FixedTimePage = (props: { theme?: any }) => {
     tag: {
       borderRadius: cx(16),
       height: cx(16),
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       marginRight: cx(10),
       paddingHorizontal: cx(12)
     },
@@ -138,7 +139,7 @@ const FixedTimePage = (props: { theme?: any }) => {
       fontSize: cx(10),
       textAlign: 'center',
       fontFamily: 'PingFangSC-Medium',
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
     },
   })
 
@@ -172,7 +173,7 @@ const FixedTimePage = (props: { theme?: any }) => {
     >
       <ScrollView nestedScrollEnabled={true}>
         <Text style={{
-          color: props.theme.global.fontColor,
+          color: props.theme?.global.fontColor,
           marginLeft: cx(24),
           fontSize: cx(12)
         }}>{I18n.getLang('timeschedule_overview_description_text')}</Text>
@@ -222,19 +223,19 @@ const FixedTimePage = (props: { theme?: any }) => {
               icon={res.device_panel_schedule_alert}
               text={I18n.getLang(!state.originList.length ? 'fixedTimeCycle_information_text' : 'fixedTimeCycle_empty_filtering_information_text')}
               style={{ width: 'auto', alignItems: 'center' }}
-              textStyle={{ color: props.theme.global.fontColor, fontSize: cx(12), flex: undefined }}
-              iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor, }}
+              textStyle={{ color: props.theme?.global.fontColor, fontSize: cx(12), flex: undefined }}
+              iconStyle={{ width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor, }}
             />
             <Spacer />
             {!state.originList.length && <TextButton
                 text={I18n.getLang('fixedTimeCycle_bttn_text')}
                 style={{
-                  backgroundColor: props.theme.button.primary,
+                  backgroundColor: props.theme?.button.primary,
                   borderRadius: cx(6),
                   paddingVertical: cx(12),
                   paddingHorizontal: cx(24),
                 }}
-                textStyle={{ color: props.theme.button.fontColor, }}
+                textStyle={{ color: props.theme?.button.fontColor, }}
                 onPress={() => {
                   navigateToEdit('add', newFixedTime(!!params.isPlug))
                 }} />}