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

package/src/modules/fixedTimingForLight/FixedTimingForLightDetailPage.tsx

@@ -21,6 +21,7 @@ import LdvSwitch from "@ledvance/base/src/components/ldvSwitch";
 import LampAdjustView from "@ledvance/base/src/components/LampAdjustView";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 import LdvPickerView from "@ledvance/base/src/components/ldvPickerView";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {parseTimer} = Utils.TimeUtils
 const {convertX: cx} = Utils.RatioUtils;
@@ -53,7 +54,7 @@ const newFixedTimingItem = (): FixedTimingItem => {
   }
 }
 
-const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
+const FixedTimingForLightDetailPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const params = useRoute().params as FixedTimeDetailParam
   const initItem = newFixedTimingItem();
@@ -163,13 +164,13 @@ const FixedTimingForLightDetailPage = (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,
@@ -182,11 +183,11 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
-      backgroundColor: props.theme.global.background,
+      backgroundColor: props.theme?.global.background,
       height: cx(35),
     },
     rightTitle: {
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
       paddingLeft: cx(12),
       paddingRight: cx(12),
       fontSize: cx(10),
@@ -195,7 +196,7 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
     },
     filletCorner: {
       flexDirection: 'row',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
       borderRadius: cx(16),
       alignSelf: 'flex-start'
     }
@@ -230,8 +231,8 @@ const FixedTimingForLightDetailPage = (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={!params.is24Hour}
           startTime={state.item.startTime}
           endTime={state.item.endTime}
@@ -247,7 +248,7 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
             state.item.weeks[rawIndex] = state.item.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.item.weeks, parseTimer(state.item.endTime * 60))}
         </Text>
         <Spacer/>
@@ -257,17 +258,17 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
           <Spacer height={cx(10)}/>
           <View style={styles.applyContent}>
             {state.item.channel === undefined ?
-              <Text style={{color: props.theme.global.fontColor}}>
+              <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.channels[state.item.channel]}</Text>
+                <Text style={{color: props.theme?.global.fontColor}}>{params.channels[state.item.channel]}</Text>
                 {params.channels.length > 1 && <TouchableOpacity
                     onPress={() => {
                       state.item.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>
             }
@@ -284,8 +285,8 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
                   state.item.channel = index
                 }}
               >
-                <Text style={{color: props.theme.global.fontColor}}>{item}</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}</Text>
+                <Image style={{width: cx(16), height: cx(16), tintColor: props.theme?.global.fontColor}} source={res.device_panel_timer_add}/>
               </TouchableOpacity>
             )
           })}
@@ -298,7 +299,7 @@ const FixedTimingForLightDetailPage = (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={() => { }}
@@ -343,11 +344,11 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
         <View style={styles.cardContainer}>
           <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline4_text')}</Text>
           {!isTimeEffective && <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={state.onHour}
               minute={state.onMinute}
@@ -357,7 +358,7 @@ const FixedTimingForLightDetailPage = (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={state.offHour}
               minute={state.offMinute}
@@ -379,7 +380,7 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
           actions={<View style={{ flex: 1 }}>
             <>
               <View>
-                <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+                <Text style={{ fontSize: cx(12), color: props.theme?.global.fontColor }}>
                   {I18n.formatValue('feature_summary_action_txt_4', `${Number(state.onHour)}`, `${Number(state.onMinute)}`)}
                 </Text>
               </View>
@@ -391,7 +392,7 @@ const FixedTimingForLightDetailPage = (props: { theme?: any }) => {
             </>
             <>
               <View>
-                <Text style={{ fontSize: cx(12), color: props.theme.global.fontColor }}>
+                <Text style={{ fontSize: cx(12), color: props.theme?.global.fontColor }}>
                   {I18n.formatValue('feature_summary_action_txt_6', `${Number(state.offHour)}`, `${Number(state.offMinute)}`)}
                 </Text>
               </View>

package/src/modules/fixedTimingForLight/FixedTimingForLightPage.tsx

@@ -13,12 +13,13 @@ import Spacer from "@ledvance/base/src/components/Spacer";
 import ItemCard from "./ItemCard";
 import {cloneDeep} from "lodash";
 import InfoText from "@ledvance/base/src/components/InfoText";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx, topBarHeight} = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 const MAX_NUM = 4
 
-const FixedTimeForLightPage =  (props: { theme?: any}) => {
+const FixedTimeForLightPage =  (props: { theme?: ThemeType}) => {
   const devInfo = useDeviceInfo()
   const navigation = useNavigation()
   const params = useRoute().params as FixedTimingParam
@@ -76,19 +77,19 @@ const FixedTimeForLightPage =  (props: { theme?: any}) => {
     },
     emptyNoTime: {
       fontSize: cx(12),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
     },
     execTip: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       marginLeft: cx(24),
     },
     maxImg: {
       width: cx(16),
       height: cx(16),
-      tintColor: props.theme.global.warning
+      tintColor: props.theme?.global.warning
     },
     maxTip: {
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
     },
   })
 
@@ -140,7 +141,7 @@ const FixedTimeForLightPage =  (props: { theme?: any}) => {
           icon={res.device_panel_schedule_alert}
           text={I18n.getLang('fixedTimeCycle_information_text')}
           textStyle={{flex: undefined}}
-          contentColor={props.theme.global.secondFontColor}
+          contentColor={props.theme?.global.secondFontColor}
         />
         <View
           style={{
@@ -149,7 +150,7 @@ const FixedTimeForLightPage =  (props: { theme?: any}) => {
             marginVertical: cx(25),
             marginHorizontal: cx(24),
             borderRadius: cx(6),
-            backgroundColor: props.theme.button.primary,
+            backgroundColor: props.theme?.button.primary,
           }}
         >
           <TouchableOpacity
@@ -160,7 +161,7 @@ const FixedTimeForLightPage =  (props: { theme?: any}) => {
             }}
             onPress={() => onAddOrEditItem('add')}
           >
-            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: props.theme.button.fontColor, textAlign: 'center'}}>
+            <Text style={{fontSize: cx(12), fontWeight: 'bold', color: props.theme?.button.fontColor, textAlign: 'center'}}>
               {I18n.getLang('fixedTimeCycle_bttn_text')}
             </Text>
           </TouchableOpacity>

package/src/modules/fixedTimingForLight/ItemCard.tsx

@@ -6,13 +6,14 @@ import {SwitchButton, Utils} from "tuya-panel-kit";
 import {getIsClosed, loopText} from "@ledvance/base/src/utils/common";
 import {parseHour12} from "@tuya/tuya-panel-lamp-sdk/lib/utils";
 import {FixedTimingItem} from "./FixedTimingForLightAction";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const {convertX: cx} = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
 const {parseTimer} = Utils.TimeUtils
 
 export interface ItemCardProps {
-  theme?: any
+  theme?: ThemeType
   item: FixedTimingItem,
   is24Hour?: boolean,
   onSwitch: (enable: boolean) => void
@@ -35,14 +36,14 @@ const ItemCard = (props: ItemCardProps) => {
     },
     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',
     },

package/src/modules/fixedTimingForLight/Summary.tsx

@@ -4,12 +4,13 @@ import res from "@ledvance/base/src/res"
 import I18n from "@ledvance/base/src/i18n";
 import { Utils } from "tuya-panel-kit";
 import Spacer from "@ledvance/base/src/components/Spacer";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils;
 const { withTheme } = Utils.ThemeUtils
 
 interface SummaryProps {
-  theme?: any
+  theme?: ThemeType
   style?: ViewStyle
   frequency?: string | ReactElement
   time?: string | ReactElement
@@ -24,7 +25,7 @@ const Summary = (props: SummaryProps) => {
       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',
@@ -40,14 +41,14 @@ const Summary = (props: SummaryProps) => {
       minWidth: cx(100)
     },
     summaryImg: {
-      tintColor: props.theme.global.fontColor,
+      tintColor: props.theme?.global.fontColor,
       width: cx(12),
       height: cx(12),
       marginRight: cx(6)
     },
     leftTitle: {
       fontSize: cx(14),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
     },
     summaryRight: {
       flex: 1,
@@ -58,10 +59,10 @@ const Summary = (props: SummaryProps) => {
       borderRadius: cx(16),
       paddingHorizontal: cx(12),
       alignSelf: 'flex-start',
-      backgroundColor: props.theme.tag.background,
+      backgroundColor: props.theme?.tag.background,
     },
     rightItem: {
-      color: props.theme.tag.fontColor,
+      color: props.theme?.tag.fontColor,
     },
   })
 

package/src/modules/flags/FlagEditPage.tsx

@@ -21,6 +21,7 @@ import { FlagPageProps } from './FlagPage'
 import ColorTempAdjustView from '@ledvance/base/src/components/ColorTempAdjustView'
 import { showDialog } from '@ledvance/base/src/utils/common'
 import { cctToColor } from '@ledvance/base/src/utils/cctUtils'
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX
 const { withTheme } = Utils.ThemeUtils
@@ -33,7 +34,7 @@ export interface FlagEditParams {
   modDeleteFlag: (mode: 'add' | 'edit' | 'del', currentMood: FlagUiInfo, options?: FlagOption) => Promise<Result<any>>
 }
 
-const FlagEditPage = (props: { theme?: any }) => {
+const FlagEditPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation()
   const params = cloneDeep(useRoute().params as FlagEditParams)
   const state = useReactive({
@@ -101,7 +102,7 @@ const FlagEditPage = (props: { theme?: any }) => {
       marginHorizontal: cx(16),
     },
     light: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(18),
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
@@ -139,7 +140,7 @@ const FlagEditPage = (props: { theme?: any }) => {
       height: cx(40),
       borderRadius: cx(8),
       borderWidth: 1,
-      borderColor: props.theme.card.border
+      borderColor: props.theme?.card.border
     },
     nodeDeleteBtn: {
       width: cx(24),
@@ -159,17 +160,17 @@ const FlagEditPage = (props: { theme?: any }) => {
       borderRadius: cx(8),
       borderWidth: cx(1),
       borderStyle: 'dashed',
-      borderColor: props.theme.addNode.border,
-      backgroundColor: props.theme.addNode.background,
+      borderColor: props.theme?.addNode.border,
+      backgroundColor: props.theme?.addNode.background,
     },
     deleteBtn: {
       width: '100%',
       height: cx(50),
-      backgroundColor: props.theme.button.delete,
+      backgroundColor: props.theme?.button.delete,
       borderRadius: cx(8),
     },
     deleteBtnText: {
-      color: props.theme.button.fontColor,
+      color: props.theme?.button.fontColor,
       fontSize: cx(16),
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
@@ -213,7 +214,7 @@ const FlagEditPage = (props: { theme?: any }) => {
             }}
             maxLength={33}
             showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? props.theme.global.error : undefined}
+            tipColor={nameRepeat ? props.theme?.global.error : undefined}
             tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
             errorText={I18n.getLang(nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')} />
           {(params.moduleParams.isMixLight || params.moduleParams.isCeilingLight) && <><Card style={styles.adjustCard}>
@@ -292,7 +293,7 @@ const FlagEditPage = (props: { theme?: any }) => {
                     state.colorPaintBucketSelected = true
                   }}>
                   <Image
-                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? props.theme.icon.primary : props.theme.icon.normal }]}
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? props.theme?.icon.primary : props.theme?.icon.normal }]}
                     source={res.ic_paint_bucket} />
                 </TouchableOpacity>
                 <TouchableOpacity
@@ -300,7 +301,7 @@ const FlagEditPage = (props: { theme?: any }) => {
                     state.colorPaintBucketSelected = false
                   }}>
                   <Image
-                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? props.theme.icon.normal : props.theme.icon.primary }]}
+                    style={[styles.adjustButton, { tintColor: state.colorPaintBucketSelected ? props.theme?.icon.normal : props.theme?.icon.primary }]}
                     source={res.ic_colorize} />
                 </TouchableOpacity>
               </View>
@@ -332,7 +333,7 @@ const FlagEditPage = (props: { theme?: any }) => {
                           style={[
                             styles.nodeDeleteIcon,
                             {
-                              tintColor: state.mood.colors.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
+                              tintColor: state.mood.colors.length < 3 ? props.theme?.icon.disable : props.theme?.icon.normal,
                             },
                           ]}
                           source={res.ic_mood_del} />
@@ -363,7 +364,7 @@ const FlagEditPage = (props: { theme?: any }) => {
                           style={{
                             width: cx(18),
                             height: cx(18),
-                            tintColor: props.theme.global.fontColor,
+                            tintColor: props.theme?.global.fontColor,
                           }}
                           source={{ uri: res.add }} />
                       </TouchableOpacity>

package/src/modules/flags/FlagItem.tsx

@@ -4,12 +4,13 @@ import Card from '@ledvance/base/src/components/Card'
 import { SwitchButton, Utils } from 'tuya-panel-kit'
 import MoodColorsLine from '@ledvance/base/src/components/MoodColorsLine'
 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
 
 interface RecommendMoodItemProps {
-  theme?: any
+  theme?: ThemeType
   enable: boolean
   title: string
   colors: string[]
@@ -32,7 +33,7 @@ const FlagItem = (props: RecommendMoodItemProps) => {
       justifyContent: 'space-between',
     },
     headText: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       fontFamily: 'helvetica_neue_lt_std_bd',
       lineHeight: cx(20),
@@ -66,7 +67,7 @@ const FlagItem = (props: RecommendMoodItemProps) => {
         <View style={styles.gradientItem}>
           <MoodColorsLine
             type={'separate'}
-            nodeStyle={{ borderColor: props.theme.card.border, borderWidth: 1 }}
+            nodeStyle={{ borderColor: props.theme?.card.border, borderWidth: 1 }}
             colors={props.colors} />
         </View>
         <Spacer height={cx(16)} />

package/src/modules/flags/FlagPage.tsx

@@ -19,6 +19,8 @@ import TextField from "@ledvance/base/src/components/TextField";
 import { useParams } from "@ledvance/base/src/hooks/Hooks";
 import { WorkMode } from "@ledvance/base/src/utils/interface";
 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
 
@@ -33,7 +35,7 @@ export interface FlagPageProps {
   switchLedCode: string
 }
 
-const FlagPage = (props: { theme?: any }) => {
+const FlagPage = (props: { theme?: ThemeType }) => {
   const params = useParams<FlagPageProps>()
   const devInfo = useDeviceInfo()
   const uaGroupInfo = useUAGroupInfo()
@@ -170,7 +172,7 @@ const FlagPage = (props: { theme?: any }) => {
                             })
                           }}
         >
-          <Image source={res.ic_refresh} style={{width: cx(24), height: cx(24), tintColor: props.theme.global.fontColor}}/>
+          <Image source={res.ic_refresh} style={{width: cx(24), height: cx(24), tintColor: props.theme?.global.fontColor}}/>
         </TouchableOpacity>
       </View>
       <FlatList

package/src/modules/lightMode/LightModePage.tsx

@@ -9,6 +9,7 @@ import Card from '@ledvance/base/src/components/Card'
 import res from '@ledvance/base/src/res'
 import {useReactive, useUpdateEffect} from 'ahooks'
 import {Result} from "@ledvance/base/src/models/modules/Result";
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const { convertX: cx } = Utils.RatioUtils
 const { withTheme } = Utils.ThemeUtils
@@ -28,7 +29,7 @@ export function useLightMode(): [LightMode, (v: LightMode) => Promise<Result<any
   return useFeatureHook<LightModeConfig, LightMode>('lightMode', 'relay')
 }
 
-const LightModePage = (props: { theme?: any }) => {
+const LightModePage = (props: { theme?: ThemeType }) => {
   const deviceInfo = useDeviceInfo()
   const [lightMode, setLightMode] = useLightMode()
 
@@ -47,25 +48,25 @@ const LightModePage = (props: { theme?: any }) => {
     },
     desc: {
       marginHorizontal: cx(24),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
     tipText: {
       marginHorizontal: cx(24),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     modeSelectGroup: {
       marginHorizontal: cx(24),
-      backgroundColor: props.theme.container.background,
+      backgroundColor: props.theme?.container.background,
       borderRadius: cx(4),
     },
     modeTip: {
       marginHorizontal: cx(8),
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontWeight: 'bold',
       fontFamily: 'helvetica_neue_lt_std_bd',
@@ -76,7 +77,7 @@ const LightModePage = (props: { theme?: any }) => {
     line: {
       height: cx(1),
       marginHorizontal: cx(12),
-      backgroundColor: props.theme.container.divider,
+      backgroundColor: props.theme?.container.divider,
     },
     itemRoot: {
       flexDirection: 'row',
@@ -90,12 +91,12 @@ const LightModePage = (props: { theme?: any }) => {
       justifyContent: 'center',
     },
     itemTitle: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },
     itemContent: {
-      color: props.theme.global.secondFontColor,
+      color: props.theme?.global.secondFontColor,
       fontSize: cx(14),
       fontFamily: 'helvetica_neue_lt_std_roman',
     },

package/src/modules/mood_new/AddMoodPage.tsx

@@ -17,6 +17,7 @@ import { Result } from '@ledvance/base/src/models/modules/Result';
 import { ui_biz_routerKey } from '../../navigation/Routers'
 import { difference, head, range } from 'lodash';
 import { RecommendMood, getRecommendMixMoods, getRecommendMoods } from './MoodInfo';
+import ThemeType from '@ledvance/base/src/config/themeType'
 
 const cx = Utils.RatioUtils.convertX;
 const { withTheme } = Utils.ThemeUtils
@@ -33,7 +34,7 @@ interface AddMoodPageState {
   data: RecommendMood[];
 }
 
-const AddMoodPage = (props: { theme?: any }) => {
+const AddMoodPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation();
   const routeParams = useRoute().params as AddMoodPageParams;
   const moduleParams = routeParams.moduleParams;
@@ -84,7 +85,7 @@ const AddMoodPage = (props: { theme?: any }) => {
       flexDirection: 'column',
     },
     desc: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(16),
       marginHorizontal: cx(24),
       marginTop: cx(12),

package/src/modules/mood_new/DynamicMoodEditorPage.tsx

@@ -41,6 +41,7 @@ import Segmented from '@ledvance/base/src/components/Segmented';
 import { MoodNodeInfo } from './Interface';
 import { showDialog } from '@ledvance/base/src/utils/common';
 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
@@ -53,7 +54,7 @@ interface DynamicMoodEditorPageState {
   loading: boolean;
 
 }
-const DynamicMoodEditorPage = (props: { theme?: any }) => {
+const DynamicMoodEditorPage = (props: { theme?: ThemeType }) => {
   const navigation = useNavigation();
   const routeParams = useParams<StaticMoodEditorPageParams>()
   const params = cloneDeep(routeParams);
@@ -156,7 +157,7 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
       marginHorizontal: cx(16),
     },
     light: {
-      color: props.theme.global.fontColor,
+      color: props.theme?.global.fontColor,
       fontSize: cx(18),
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
@@ -212,17 +213,17 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
       borderRadius: cx(8),
       borderWidth: cx(1),
       borderStyle: 'dashed',
-      borderColor: props.theme.addNode.border,
-      backgroundColor: props.theme.addNode.background,
+      borderColor: props.theme?.addNode.border,
+      backgroundColor: props.theme?.addNode.background,
     },
     deleteBtn: {
       width: '100%',
       height: cx(50),
-      backgroundColor: props.theme.button.delete,
+      backgroundColor: props.theme?.button.delete,
       borderRadius: cx(8),
     },
     deleteBtnText: {
-      color: props.theme.button.fontColor,
+      color: props.theme?.button.fontColor,
       fontSize: cx(16),
       fontFamily: 'helvetica_neue_lt_std_bd',
     },
@@ -266,7 +267,7 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
             }}
             maxLength={33}
             showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? props.theme.global.error : undefined}
+            tipColor={nameRepeat ? props.theme?.global.error : undefined}
             tipIcon={nameRepeat ? res.ic_text_field_input_error : undefined}
             errorText={I18n.getLang(
               nameRepeat ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text'
@@ -383,7 +384,7 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
                   <Image
                     style={[
                       styles.adjustButton,
-                      { tintColor: state.mainBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
+                      { tintColor: state.mainBucketSelected ? props.theme?.icon.primary : props.theme?.icon.normal },
                     ]}
                     source={res.ic_paint_bucket}
                   />
@@ -396,7 +397,7 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
                   <Image
                     style={[
                       styles.adjustButton,
-                      { tintColor: state.mainBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
+                      { tintColor: state.mainBucketSelected ? props.theme?.icon.normal : props.theme?.icon.primary },
                     ]}
                     source={res.ic_colorize}
                   />
@@ -431,7 +432,7 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
                           style={[
                             styles.nodeDeleteIcon,
                             {
-                              tintColor: state.mood.mainLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
+                              tintColor: state.mood.mainLamp.nodes.length < 3 ? props.theme?.icon.disable : props.theme?.icon.normal,
                             },
                           ]}
                           source={res.ic_mood_del}
@@ -463,7 +464,7 @@ const DynamicMoodEditorPage = (props: { theme?: any }) => {
                           style={{
                             width: cx(18),
                             height: cx(18),
-                            tintColor: props.theme.global.fontColor,
+                            tintColor: props.theme?.global.fontColor,
                           }}
                           source={{ uri: res.add }}
                         />