@ledvance/ui-biz-bundle 1.1.90 → 1.1.91

package/src/modules/history/HistoryPage.tsx

@@ -14,6 +14,7 @@ import { exportHistoryFile } from '@ledvance/base/src/utils/common'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export type SwitchHistoryPageRouteParams = {
   dpIds: string[],
@@ -24,7 +25,7 @@ export type SwitchHistoryPageRouteParams = {
   getActionsText: (dpData: any) => I18nKey
 }
 
-const SwitchHistoryPage = () => {
+const SwitchHistoryPage = (props: { theme?: any }) => {
   const deviceInfo = useDeviceInfo()
   const { dpIds, tags, headlineText, backText, showLimit, getActionsText } = useParams<SwitchHistoryPageRouteParams>()
 
@@ -83,6 +84,86 @@ const SwitchHistoryPage = () => {
     exportHistoryFile(state.data)
   }
 
+  const styles = StyleSheet.create({
+    content: {
+      flex: 1,
+    },
+    list: {
+      flex: 1,
+    },
+    listEmptyView: {
+      alignItems: 'center',
+    },
+    listEmptyImage: {
+      width: cx(200),
+      height: cx(200),
+    },
+    listEmptyTextIcon: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: props.theme.global.fontColor,
+    },
+    listEmptyText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(12),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    titleText: {
+      marginHorizontal: cx(24),
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    switchHistoryItem: {
+      marginHorizontal: cx(24),
+    },
+    switchHistoryItemTitle: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(18),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    switchHistoryItemActionItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flex: 1
+    },
+    switchHistoryItemActionItemLineGroup: {
+      width: cx(7),
+      minHeight: cx(30),
+      height: '100%',
+      alignItems: 'center',
+    },
+    switchHistoryItemActionItemLine: {
+      width: cx(1),
+      flex: 1,
+      backgroundColor: props.theme.container.divider,
+    },
+    switchHistoryItemActionItemPoint: {
+      width: cx(7),
+      height: cx(7),
+      backgroundColor: props.theme.icon.primary,
+      borderRadius: cx(4),
+      position: 'absolute',
+      top: '50%',
+      transform: [{ translateY: cx(-3) }]
+    },
+    switchHistoryItemActionItemText: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    switchHistoryItemTag: {
+      paddingHorizontal: cx(10),
+      borderRadius: cx(10),
+      backgroundColor: props.theme.tag.background,
+      marginLeft: cx(5),
+    },
+    switchHistoryItemTagText: {
+      fontSize: cx(14),
+      color: props.theme.tag.fontColor
+    }
+  })
+
   return (
     <Page
       backText={backText || deviceInfo.name}
@@ -94,31 +175,31 @@ const SwitchHistoryPage = () => {
         <Text style={styles.titleText}>{I18n.getLang('history_contact_sensor_description_text')}</Text>
         <Spacer />
         {!isEmpty(state.filterTags) && !!state.data.length &&
-          <View style={{
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'wrap',
-            marginHorizontal: cx(24),
-            marginBottom: cx(12),
-            alignSelf: 'flex-start'
-          }}>
-            {
-              Object.keys(state.filterTags)?.map((tag) => {
-                return <Tag
-                  key={tag}
-                  text={tags && tags[tag]}
-                  checked={state.filterTags[tag]}
-                  onCheckedChange={(v) => changeFilter(v, tag)}
-                  style={{ marginTop: cx(5), marginHorizontal: cx(5) }}
-                />
-              })
-            }
-          </View>
+            <View style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              marginHorizontal: cx(24),
+              marginBottom: cx(12),
+              alignSelf: 'flex-start'
+            }}>
+              {
+                Object.keys(state.filterTags)?.map((tag) => {
+                  return <Tag
+                    key={tag}
+                    text={tags && tags[tag]}
+                    checked={state.filterTags[tag]}
+                    onCheckedChange={(v) => changeFilter(v, tag)}
+                    style={{ marginTop: cx(5), marginHorizontal: cx(5) }}
+                  />
+                })
+              }
+            </View>
         }
         <FlatList
           data={state.data}
           style={styles.list}
-          renderItem={({ item }) => <SwitchHistoryItem {...{ itemData: item, tags }} />}
+          renderItem={({ item }) => <SwitchHistoryItem {...{ itemData: item, tags, styles }} />}
           keyExtractor={(_, index) => `${index}`}
           ListFooterComponent={<Spacer />}
           ListEmptyComponent={(
@@ -149,12 +230,13 @@ const SwitchHistoryPage = () => {
 }
 
 interface SwitchHistoryItemBean {
+  styles: StyleSheet.NamedStyles<any>
   itemData: SwitchHistoryUIItemData
   tags?: object
 }
 
 const SwitchHistoryItem = (props: SwitchHistoryItemBean) => {
-  const { itemData, tags } = props
+  const { itemData, tags, styles } = props
   return (
     <View style={styles.switchHistoryItem}>
       <Text style={styles.switchHistoryItemTitle}>{itemData.title}</Text>
@@ -169,9 +251,11 @@ const SwitchHistoryItem = (props: SwitchHistoryItemBean) => {
           <Text style={styles.switchHistoryItemActionItemText}>{`${actionData.time}`}</Text>
           <Spacer width={cx(10)} height={0} />
           <View style={{ flex: 1, display: 'flex', flexDirection: 'row', flexWrap: 'wrap',alignItems: 'baseline'
-           }}>
+          }}>
             <Text style={styles.switchHistoryItemActionItemText}>{`${actionData.action}`}</Text>
-            {!!tags && <View style={styles.switchHistoryItemTag}><Text style={{ fontSize: cx(14), color: '#000' }}>{tags[actionData.dpId]}</Text></View>}
+            {!!tags && <View style={styles.switchHistoryItemTag}>
+                <Text style={styles.switchHistoryItemTagText}>{tags[actionData.dpId]}</Text>
+            </View>}
           </View>
         </View>
       ))}
@@ -180,83 +264,7 @@ const SwitchHistoryItem = (props: SwitchHistoryItemBean) => {
   )
 }
 
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-  },
-  list: {
-    flex: 1,
-  },
-  listEmptyView: {
-    alignItems: 'center',
-  },
-  listEmptyImage: {
-    width: cx(200),
-    height: cx(200),
-  },
-  listEmptyTextIcon: {
-    width: cx(16),
-    height: cx(16),
-    tintColor: '#000',
-  },
-  listEmptyText: {
-    color: '#000',
-    fontSize: cx(12),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  titleText: {
-    marginHorizontal: cx(24),
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  switchHistoryItem: {
-    marginHorizontal: cx(24),
-  },
-  switchHistoryItemTitle: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  switchHistoryItemActionItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1
-  },
-  switchHistoryItemActionItemLineGroup: {
-    width: cx(7),
-    minHeight: cx(30),
-    height: '100%',
-    alignItems: 'center',
-  },
-  switchHistoryItemActionItemLine: {
-    width: cx(1),
-    flex: 1,
-    backgroundColor: '#E6E7E8',
-  },
-  switchHistoryItemActionItemPoint: {
-    width: cx(7),
-    height: cx(7),
-    backgroundColor: '#f60',
-    borderRadius: cx(4),
-    position: 'absolute',
-    top: '50%',
-    transform: [{ translateY: cx(-3) }]
-  },
-  switchHistoryItemActionItemText: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  switchHistoryItemTag: {
-    paddingHorizontal: cx(10),
-    borderRadius: cx(10),
-    backgroundColor: '#cbcbcb',
-    marginLeft: cx(5),
-  }
-})
-
-export default SwitchHistoryPage
+export default withTheme(SwitchHistoryPage)
 
 type RefreshType = 'refresh' | 'loadMore'
 
@@ -269,4 +277,4 @@ interface SwitchHistoryPageState {
   hasNext: boolean
   dataOffset: number
   filterTags: object
-}
+}

package/src/modules/music/MusicPage.tsx

@@ -19,6 +19,7 @@ import { SelectPageParams } from '@ledvance/ui-biz-bundle/src/modules/select/Sel
 import { ui_biz_routerKey } from '@ledvance/ui-biz-bundle/src/navigation/Routers'
 import { cloneDeep } from 'lodash'
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface MusicPageRouterParams extends JudgeTimeScheduleProps {
   switch_led: string
@@ -29,21 +30,21 @@ export interface MusicPageRouterParams extends JudgeTimeScheduleProps {
   dreamMusicDp?: string
 }
 
-const MusicPage = () => {
+const MusicPage = (props: { theme?: any }) => {
   const deviceInfo = useDeviceInfo()
   const deviceId = useDeviceId()
   const navigation = useNavigation()
-  const props = useRoute().params as MusicPageRouterParams
-  const [workMode, setWorkMode] = useWorkMode(props.work_mode)
-  const [mixLight] = useMixRgbcw(props.mix_rgbcw, props.switch_led)
-  const [, setMixScene] = useMixScene(props.mix_light_scene, props.work_mode)
-  const [, setMusicData] = useMusicData(props.music_data)
-  const [dreamMusic, setDreamMusic] = props.dreamMusicDp ? useDreamMusic(props.dreamMusicDp) : []
-  const [switchLed, setSwitchLed] = useEnable(props.switch_led)
+  const params = useRoute().params as MusicPageRouterParams
+  const [workMode, setWorkMode] = useWorkMode(params.work_mode)
+  const [mixLight] = useMixRgbcw(params.mix_rgbcw, params.switch_led)
+  const [, setMixScene] = useMixScene(params.mix_light_scene, params.work_mode)
+  const [, setMusicData] = useMusicData(params.music_data)
+  const [dreamMusic, setDreamMusic] = params.dreamMusicDp ? useDreamMusic(params.dreamMusicDp) : []
+  const [switchLed, setSwitchLed] = useEnable(params.switch_led)
 
   const state = useReactive({
     musicEnable: false,
-    musicType: props.dreamMusicDp ? 0 : 1, // 0 设备麦克风, 1 手机麦克风
+    musicType: params.dreamMusicDp ? 0 : 1, // 0 设备麦克风, 1 手机麦克风
     isColourExist: true,
     isTempExist: true,
     deviceGenreMode: dreamMusic ? dreamMusic.id : 0,
@@ -55,7 +56,7 @@ const MusicPage = () => {
   })
 
   useEffect(() => {
-    if (props.dreamMusicDp) {
+    if (params.dreamMusicDp) {
       getRemoteDreamMusic(deviceId).then(res => {
         if (res.success) {
           state.musicModeData = res.data
@@ -67,7 +68,7 @@ const MusicPage = () => {
   useUpdateEffect(() => {
     // 设备麦克风
     if (!state.musicEnable) return
-    if (props.dreamMusicDp && state.musicType === 0) {
+    if (params.dreamMusicDp && state.musicType === 0) {
       openMusic()
     } else {
       changeMusic(state.phoneGenreMode)
@@ -99,9 +100,9 @@ const MusicPage = () => {
       savePreWorkmode().then()
     }
     const extraDp = {}
-    if (!switchLed) extraDp[props.switch_led] = true
-    if (workMode !== 'music') extraDp[props.work_mode] = 'music'
-    if (props.dreamMusicDp && state.musicType === 0) {
+    if (!switchLed) extraDp[params.switch_led] = true
+    if (workMode !== 'music') extraDp[params.work_mode] = 'music'
+    if (params.dreamMusicDp && state.musicType === 0) {
       setDreamMusic && setDreamMusic({
         ...state.currentMusic,
         power: true
@@ -118,14 +119,14 @@ const MusicPage = () => {
         { isColourExist: true, isTempExist: true }
       )
     }
-  }, [state.musicType, state.phoneGenreMode, props.dreamMusicDp, state.currentMusic, switchLed, workMode])
+  }, [state.musicType, state.phoneGenreMode, params.dreamMusicDp, state.currentMusic, switchLed, workMode])
 
   const closeMusic = useCallback(async () => {
     await MusicManager.close()
     const res: any = await NativeApi.getJson(deviceId, 'musicPreWorkMode')
     const workMode = res?.data && JSON.parse(res?.data)?.workMode
     if (state.musicType === 1) {
-      if (props.isMixRGBWLamp) {
+      if (params.isMixRGBWLamp) {
         const mixRes: any = await NativeApi.getJson(deviceId, 'musicPreMixLight')
         const getLight = mixRes?.data && JSON.parse(mixRes?.data)?.mixLight
         await setMixScene({
@@ -173,7 +174,7 @@ const MusicPage = () => {
 
   const savePreWorkmode = async () => {
     await NativeApi.putJson(deviceId, 'musicPreWorkMode', JSON.stringify({ workMode }));
-    if (props.isMixRGBWLamp) {
+    if (params.isMixRGBWLamp) {
       await NativeApi.putJson(deviceId, 'musicPreMixLight', JSON.stringify({ mixLight }));
     }
   }
@@ -181,7 +182,7 @@ const MusicPage = () => {
   const getSelect = async () => {
     const res: any = await NativeApi.getJson(deviceId, 'musicSelect')
     const type = res?.data ? (JSON.parse(res?.data)?.type || 0) : 0
-    state.musicType = res?.data ? JSON.parse(res?.data)?.musicType : props.dreamMusicDp ? 0 : 1
+    state.musicType = res?.data ? JSON.parse(res?.data)?.musicType : params.dreamMusicDp ? 0 : 1
     state.phoneGenreMode = musicDefalutDatasource[type]?.id
     state.musicEnable = workMode === 'music' && !!switchLed
     if (type !== '' && state.musicType === 1 && state.musicEnable) {
@@ -216,8 +217,8 @@ const MusicPage = () => {
   }, [])
 
   const getSelectModeData = useCallback((): [string | undefined, any[]] => {
-    const genreModeData = props.dreamMusicDp && state.musicType === 0 ? state.musicModeData : musicDefalutDatasource
-    const genreMode = props.dreamMusicDp && state.musicType === 0 ? state.deviceGenreMode : state.phoneGenreMode
+    const genreModeData = params.dreamMusicDp && state.musicType === 0 ? state.musicModeData : musicDefalutDatasource
+    const genreMode = params.dreamMusicDp && state.musicType === 0 ? state.deviceGenreMode : state.phoneGenreMode
     const title = genreModeData.find(mode => mode.id === genreMode)?.title
     const selectModeData = genreModeData.map(music => {
       return {
@@ -227,7 +228,26 @@ const MusicPage = () => {
       }
     })
     return [title, selectModeData]
-  }, [state.deviceGenreMode, state.phoneGenreMode, state.musicModeData, state.musicType, props.dreamMusicDp])
+  }, [state.deviceGenreMode, state.phoneGenreMode, state.musicModeData, state.musicType, params.dreamMusicDp])
+
+  const styles = StyleSheet.create({
+    content: {
+      flex: 1,
+      marginHorizontal: cx(18)
+    },
+    headSwitch: {
+      position: 'absolute',
+      right: 0,
+      top: - cx(40),
+      zIndex: 2,
+      marginBottom: cx(24)
+    },
+    tiptext: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(14),
+      lineHeight: cx(14),
+    }
+  })
 
   return (
     <Page
@@ -261,17 +281,18 @@ const MusicPage = () => {
               }
             }
           }} />
-        {props.dreamMusicDp && <TabBar
-          type='radio'
-          tabs={musicTabs}
-          style={{ borderRadius: cx(8), backgroundColor: '#f6f6f6', height: cx(36) }}
-          tabTextStyle={{ color: '#000' }}
-          tabActiveTextStyle={{ color: '#000', fontWeight: 'bold' }}
-          activeKey={state.musicType}
-          onChange={async (v) => {
-            state.musicType = Number(v)
-            await saveSelect(state.phoneGenreMode)
-          }}
+        {params.dreamMusicDp && <TabBar
+            type='radio'
+            tabs={musicTabs}
+            style={{ borderRadius: cx(8), backgroundColor: props.theme.segment.background, height: cx(36) }}
+            tabTextStyle={{ color: props.theme.segment.fontColor, fontSize: cx(14) }}
+            tabActiveTextStyle={{ color: props.theme.segment.fontColor, fontSize: cx(14), fontWeight: 'bold' }}
+            activeColor={props.theme.segment.active}
+            activeKey={state.musicType}
+            onChange={async (v) => {
+              state.musicType = Number(v)
+              await saveSelect(state.phoneGenreMode)
+            }}
         />}
         <Spacer />
         <Text style={styles.tiptext}>{Strings.getLang(state.musicType === 0 ? 'devicemusic_devicemic_description_text' : 'devicemusic_description_text')}</Text>
@@ -284,65 +305,46 @@ const MusicPage = () => {
         </View>
         {
           state.musicEnable &&
-          <>
-            {props.dreamMusicDp && state.musicType === 0 &&
-              <LdvSlider
-                title={Strings.getLang('devicemusic_switch_tab_device_sensitivity')}
-                value={state.currentMusic?.sensitivity || 50}
-                min={1}
-                max={100}
-                onValueChange={() => { }}
-                onSlidingComplete={(v: number) => {
-                  if (state.currentMusic) {
-                    state.currentMusic.sensitivity = v
-                    updateRemoteDreamMusic()
-                  }
-                }}
-                subTitleStr={''} />
-            }
-            <TextFieldStyleButton
-              text={getSelectModeData()[0] || Strings.getLang('devicemusic_music_text')}
-              placeholder={Strings.getLang('devicemusic_subheadline_text')}
-              onPress={() => {
-                const paramsSelect: SelectPageParams<number> = {
-                  title: Strings.getLang('devicemusic_subheadline_text'),
-                  data: getSelectModeData()[1],
-                  onSelect: selectPageData => {
-                    if (props.dreamMusicDp && state.musicType === 0) {
-                      state.deviceGenreMode = selectPageData.value
-                      state.currentMusic = state.musicModeData.find(music => music.id === selectPageData.value) as DreamLightMicMusicData
-                    } else {
-                      state.phoneGenreMode = selectPageData.value
-                    }
-                  },
-                }
-                navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
-              }}
-            />
-          </>
+            <>
+              {params.dreamMusicDp && state.musicType === 0 &&
+                  <LdvSlider
+                      title={Strings.getLang('devicemusic_switch_tab_device_sensitivity')}
+                      value={state.currentMusic?.sensitivity || 50}
+                      min={1}
+                      max={100}
+                      onValueChange={() => { }}
+                      onSlidingComplete={(v: number) => {
+                        if (state.currentMusic) {
+                          state.currentMusic.sensitivity = v
+                          updateRemoteDreamMusic()
+                        }
+                      }}
+                      subTitleStr={''} />
+              }
+                <TextFieldStyleButton
+                    text={getSelectModeData()[0] || Strings.getLang('devicemusic_music_text')}
+                    placeholder={Strings.getLang('devicemusic_subheadline_text')}
+                    onPress={() => {
+                      const paramsSelect: SelectPageParams<number> = {
+                        title: Strings.getLang('devicemusic_subheadline_text'),
+                        data: getSelectModeData()[1],
+                        onSelect: selectPageData => {
+                          if (params.dreamMusicDp && state.musicType === 0) {
+                            state.deviceGenreMode = selectPageData.value
+                            state.currentMusic = state.musicModeData.find(music => music.id === selectPageData.value) as DreamLightMicMusicData
+                          } else {
+                            state.phoneGenreMode = selectPageData.value
+                          }
+                        },
+                      }
+                      navigation.navigate(ui_biz_routerKey.ui_biz_select_page, paramsSelect)
+                    }}
+                />
+            </>
         }
       </View>
     </Page>
   )
 }
 
-const styles = StyleSheet.create({
-  content: {
-    flex: 1,
-    marginHorizontal: cx(18)
-  },
-  headSwitch: {
-    position: 'absolute',
-    right: 0,
-    top: - cx(40),
-    zIndex: 2,
-    marginBottom: cx(24)
-  },
-  tiptext: {
-    color: '#000',
-    fontSize: cx(14),
-    lineHeight: cx(14),
-  }
-})
-
-export default MusicPage
+export default withTheme(MusicPage)

package/src/modules/timer/TimerPage.tsx

@@ -147,7 +147,7 @@ const TimerPage = (props: {theme?: any}) => {
           {item.label}
         </Text>
         {progress.length > 1 && <TouchableOpacity onPress={() => handelTimer(item, false)}>
-            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5) }} source={res.ic_arrows_nav_clear} />
+            <Image style={{ width: cx(16), height: cx(16), marginRight: cx(5), tintColor: props.theme.global.fontColor, }} source={res.ic_arrows_nav_clear} />
         </TouchableOpacity>}
       </View>
     );
@@ -193,7 +193,7 @@ const TimerPage = (props: {theme?: any}) => {
       paddingVertical: cx(5),
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: '#666',
+      backgroundColor: props.theme.button.cancel,
       borderRadius: cx(5)
     },
     activeTimerTimeBox: {
@@ -229,14 +229,16 @@ const TimerPage = (props: {theme?: any}) => {
                   <Text style={styles.itemTitle}>{I18n.getLang('timeschedule_add_schedule_subheadline_text')}</Text>
                   <View
                       style={{
-                        backgroundColor: props.theme.card.border,
+                        backgroundColor: props.theme.container.background,
                         borderRadius: 4,
                         minHeight: cx(50),
                         flex: 1,
                         justifyContent: 'center',
                       }}
                   >
-                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10) }}>{I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}</Text> :
+                    {!state.selectedSkill.length ? <Text style={{ marginLeft: cx(10), color: props.theme.global.fontColor }}>
+                        {I18n.getLang('timer_ceiling_fan_selectionfield_no_components_text')}
+                      </Text> :
                       <View
                         style={{
                           marginHorizontal: cx(8),
@@ -255,7 +257,7 @@ const TimerPage = (props: {theme?: any}) => {
                   return (
                     <TouchableOpacity style={styles.skillListItem} key={skill.dpId} onPress={() => handelTimer(skill, true)}>
                       <Text style={{ color: props.theme.global.fontColor }}>{skill.label}</Text>
-                      <Image style={{ width: cx(16), height: cx(16) }} source={res.device_panel_timer_add} />
+                      <Image style={{ width: cx(16), height: cx(16), tintColor: props.theme.global.fontColor }} source={res.device_panel_timer_add} />
                     </TouchableOpacity>
                   )
                 })}
@@ -286,7 +288,7 @@ const TimerPage = (props: {theme?: any}) => {
                             getProgressByDp(timer.dpId).endTimer()
                           }}
                           style={styles.activeTimerCancelBtn}>
-                          <Text style={{ color: '#fff', fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
+                          <Text style={{ color: props.theme.button.fontColor, fontSize: cx(12) }}>{I18n.getLang('auto_scan_system_cancel')}</Text>
                         </TouchableOpacity>
                       </View>
                       <View style={styles.activeTimerTimeBox}>
@@ -307,9 +309,11 @@ const TimerPage = (props: {theme?: any}) => {
                           thumbStrokeWidth={2}
                           thumbRadius={0}
                         />
-                        <Text style={{ marginLeft: cx(20), fontSize: cx(22) }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
+                        <Text style={{ marginLeft: cx(20), fontSize: cx(22), color: props.theme.global.fontColor }}>{getActiveTimeString(timer.progressHook.countdown)}</Text>
                       </View>
-                      <Text>{I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, timeFormatToRealTime(timer.progressHook.countdown))}</Text>
+                      <Text style={{color: props.theme.global.fontColor}}>
+                        {I18n.formatValue(timer.enable ? timer.stringOff : timer.stringOn, timeFormatToRealTime(timer.progressHook.countdown))}
+                      </Text>
                     </Card>
                     <Spacer height={cx(40)} />
                   </View>
@@ -351,7 +355,7 @@ const TimerPage = (props: {theme?: any}) => {
                   }
                 />
                 <View style={{ marginVertical: cx(30) }}>
-                  <Text>
+                  <Text style={{color: props.theme.global.fontColor}}>
                     {I18n.formatValue(
                       runningTimer()[0].enable ?
                         runningTimer()[0].stringOff :