@ledvance/ui-biz-bundle 1.1.90 → 1.1.92

package/src/newModules/biorhythm/BiorhythmEditPage.tsx

@@ -21,6 +21,7 @@ import Spacer from '@ledvance/base/src/components/Spacer'
 import { showDialog } from '@ledvance/base/src/utils/common'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 export interface BiorhythmEditPageParams {
   planData: Plan
@@ -36,7 +37,7 @@ export interface BiorhythmEditPageParams {
   showDeleteBtn?: boolean
 }
 
-const BiorhythmEditPage = () => {
+const BiorhythmEditPage = (props: { theme?: any }) => {
   const navigation = useNavigation()
   const route = useRoute<any>()
   const {
@@ -98,6 +99,26 @@ const BiorhythmEditPage = () => {
     return state.planData.name.length > 0 && state.planData.name.length < 33 && !nameRepeatFlag && !checkBiorhythmDataChanged && !minimumTipEnable()
   }, [nameRepeatFlag, state.planData.name, checkBiorhythmDataChanged, minimumTipEnable()])
 
+  const styles = StyleSheet.create({
+    titleBGView: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: cx(16),
+    },
+    colorBlock: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    title: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      paddingVertical: cx(16),
+    },
+  })
+
   return (
     <Page
       backText={I18n.getLang('add_new_trigger_time_system_back_text')}
@@ -113,14 +134,14 @@ const BiorhythmEditPage = () => {
         <View
           style={{
             marginHorizontal: cx(24),
-            backgroundColor: '#fff',
+            backgroundColor: props.theme.global.background,
           }}>
           <View style={{ height: cx(20) }} />
           <TextField
             value={state.planData.name}
             showError={state.planData.name?.length > 32 || nameRepeatFlag}
             maxLength={33}
-            tipColor={nameRepeatFlag ? '#f00' : undefined}
+            tipColor={nameRepeatFlag ? props.theme.global.error : undefined}
             errorText={I18n.getLang(nameRepeatFlag ? 'string_light_pp_field_sm_add_error1' : 'add_new_dynamic_mood_alert_text')}
             placeholder={I18n.getLang('add_new_trigger_time_inputfield_value_text')}
             onChangeText={text => {
@@ -130,7 +151,8 @@ const BiorhythmEditPage = () => {
           <View style={{ height: cx(20) }} />
           <TimerPicker
             itemTextColor='#aeadb5'
-            style={{ paddingVertical: cx(0), marginVertical: cx(0) }}
+            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')}
@@ -142,14 +164,14 @@ const BiorhythmEditPage = () => {
             }}
           />
           {minimumTipEnable() && <View style={{ flexDirection: 'row', marginVertical: cx(5) }}>
-            <Image style={{ width: cx(16), height: cx(16), tintColor: '#000' }} source={res.ic_info} />
-            <Text
-              style={{ color: '#000', fontSize: cx(12) }}>{I18n.getLang('add_new_trigger_time_information_text')}</Text>
+              <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>
           </View>}
           <View style={{ height: cx(20) }} />
           <View style={{ flexDirection: 'row' }}>
             <View style={{ flex: 1 }}>
-              <Text style={{ fontSize: cx(14) }}>{I18n.getLang(isAdd ? 'add_new_trigger_time_text' : 'edit_trigger_time_headline_text')}</Text>
+              <Text style={{ fontSize: cx(14), color: props.theme.global.fontColor }}>{I18n.getLang('add_new_trigger_time_text')}</Text>
             </View>
             <TouchableOpacity
               activeOpacity={1}
@@ -166,15 +188,15 @@ const BiorhythmEditPage = () => {
               <View
                 style={{ flex: 1, flexDirection: 'row', justifyContent: 'flex-end', alignContent: 'center', alignItems: 'center' }}>
                 <Image
-                  style={{ width: cx(24), height: cx(24), tintColor: '#000' }}
+                  style={{ width: cx(24), height: cx(24), tintColor: props.theme.global.fontColor }}
                   source={setImg()}
                 />
-                <Image style={{ width: cx(16), height: cx(16) }} 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), 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>
@@ -217,51 +239,29 @@ const BiorhythmEditPage = () => {
           <Spacer />
         </View>
         {!isAdd && showDeleteBtn &&
-          <View
-            style={{
-              marginHorizontal: cx(24),
-              marginVertical: cx(20)
-            }}>
-            <DeleteButton
-              text={I18n.getLang('edit_trigger_time_button_delete_text')}
-              onPress={() =>{
-                showDialog({
-                  method: 'confirm',
-                  title: I18n.getLang('cancel_dialog_delete_item_bio_rhythm_titel'),
-                  subTitle: I18n.getLang('cancel_dialog_delete_item_wakeupschedule_description'),
-                  onConfirm: async (_, { close }) => {
-                    close()
-                    onDeleteBtnClick()
-                  },
-                })
-              }}
-            />
-          </View>}
+            <View
+                style={{
+                  marginHorizontal: cx(24),
+                  marginVertical: cx(20)
+                }}>
+                <DeleteButton
+                    text={I18n.getLang('edit_trigger_time_button_delete_text')}
+                    onPress={() =>{
+                      showDialog({
+                        method: 'confirm',
+                        title: I18n.getLang('cancel_dialog_delete_item_bio_rhythm_titel'),
+                        subTitle: I18n.getLang('cancel_dialog_delete_item_wakeupschedule_description'),
+                        onConfirm: async (_, { close }) => {
+                          close()
+                          onDeleteBtnClick()
+                        },
+                      })
+                    }}
+                />
+            </View>}
       </ScrollView>
     </Page>
   )
 }
 
-
-const styles = StyleSheet.create({
-  titleBGView: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: cx(16),
-  },
-  colorBlock: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  title: {
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    paddingVertical: cx(16),
-  },
-})
-
-
-export default BiorhythmEditPage
+export default withTheme(BiorhythmEditPage)

package/src/newModules/biorhythm/BiorhythmPage.tsx

@@ -34,6 +34,7 @@ import DeleteButton from '@ledvance/base/src/components/DeleteButton'
 import { useParams } from '@ledvance/base/src/hooks/Hooks'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 const width = Utils.RatioUtils.width
 
 interface UIState extends BiorhythmBean {
@@ -48,16 +49,16 @@ export interface BiorhythmPageParams {
   biorhythmDpCode: string
   conflictDps: {
     randomTimeDpCode?: string
-    fixedTimeDpCode?: string 
+    fixedTimeDpCode?: string
     sleepDpCode?: string
-    wakeUpDpCode?: string 
+    wakeUpDpCode?: string
   }
   isSupportTemperature: boolean
   isSupportBrightness: boolean
   isMixLight?: boolean
 }
 
-const BiorhythmPage = () => {
+const BiorhythmPage = (props: { theme?: any }) => {
   const params = useParams<BiorhythmPageParams>()
   const navigation = useNavigation()
   const [biorhythm, setBiorhythm] = useBiorhythm(params.biorhythmDpCode)
@@ -97,7 +98,7 @@ const BiorhythmPage = () => {
   }, [])
 
   const requestSetBiorhythm = useCallback(async (pushFeature: boolean = true) => {
-    state.loading = true 
+    state.loading = true
     const planList = state.planList?.map(item => { return { ...item, icon: `${item.icon}` } })
       .sort((a, b) => a.time - b.time);
     const res = await setBiorhythm(cloneDeep({ ...state, planList }), pushFeature)
@@ -211,7 +212,7 @@ const BiorhythmPage = () => {
     state.gradient = biorhythm.gradient
     state.repeatPeriod = biorhythm.repeatPeriod
     state.planList = planList
-    
+
   }, [JSON.stringify(biorhythm)])
 
 
@@ -227,21 +228,21 @@ const BiorhythmPage = () => {
 
   const sunHomeText = string => {
     const text = string.split('SUN@HOME')
-    return text?.length === 1 && <Text style={{ fontSize: cx(14) }}>{text[0]}</Text> ||
-      <Text style={{
-        fontSize: cx(14),
-        flexDirection: 'row',
-      }}>
-        <Text>{text[0]}</Text>
-        <Text onPress={openLink}
-          style={{
-            fontFamily: 'helvetica_neue_lt_std_roman',
-            color: '#ff6600',
-            textDecorationLine: 'underline',
-            flexWrap: 'wrap',
-          }}>SUN@HOME</Text>
-        <Text>{text[1]}</Text>
-      </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 onPress={openLink}
+                  style={{
+                    fontFamily: 'helvetica_neue_lt_std_roman',
+                    color: props.theme.button.primary,
+                    textDecorationLine: 'underline',
+                    flexWrap: 'wrap',
+                  }}>SUN@HOME</Text>
+            <Text style={{color: props.theme.global.fontColor }}>{text[1]}</Text>
+        </Text>
   }
 
   const randomIcon = () => {
@@ -264,7 +265,7 @@ const BiorhythmPage = () => {
         headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
         headlineIconContent={<Switch
           value={state.enable}
-          thumbColor={'#f60'}
+          thumbColor={props.theme.icon.primary}
           trackColor={{ false: '#00000026', true: '#ff660036' }}
           onValueChange={async enable => {
             state.loading = true
@@ -292,7 +293,7 @@ const BiorhythmPage = () => {
                   key={period.title}
                   onPress={() => {
                     const periodNum = state.repeatPeriod.filter(p => p.enabled)?.length
-                    if (periodNum === 1 && period.enabled) return 
+                    if (periodNum === 1 && period.enabled) return
                     period.enabled = !period.enabled
                     requestSetBiorhythm(false)
                   }}
@@ -304,14 +305,14 @@ const BiorhythmPage = () => {
                       justifyContent: 'center',
                       alignItems: 'center',
                       borderRadius: cx(20),
-                      backgroundColor: period.enabled ? '#ffe0d4' : '#fff',
+                      backgroundColor: period.enabled ? props.theme.global.thirdBrand : props.theme.global.background,
                       borderWidth: cx(1),
-                      borderColor: '#f60',
+                      borderColor: props.theme.global.brand,
                     }}
                   >
                     <Text
                       style={{
-                        color: '#FF6600',
+                        color: props.theme.global.brand,
                         textAlign: 'center',
                       }}
                     >
@@ -323,10 +324,10 @@ const BiorhythmPage = () => {
             })}
           </View>
           <View style={{ marginHorizontal: cx(24), marginTop: cx(20) }}>
-            <Text>{state.weekString}</Text>
+            <Text style={{color: props.theme.global.fontColor}}>{state.weekString}</Text>
           </View>
           <View style={{ marginHorizontal: cx(24), marginTop: cx(16) }}>
-            <Text>
+            <Text style={{color: props.theme.global.fontColor}}>
               {I18n.getLang('bio_ryhthm_default_selectionfield_topic_text')}
             </Text>
             <TouchableOpacity
@@ -338,17 +339,17 @@ const BiorhythmPage = () => {
                 style={{
                   flexDirection: 'row',
                   borderRadius: cx(4),
-                  backgroundColor: '#f6f6f6',
+                  backgroundColor: props.theme.textInput.background,
                   alignItems: 'center',
                   flex: 1,
                   height: cx(44),
                   borderBottomWidth: cx(1),
-                  borderBottomColor: '#cbcbcb',
+                  borderBottomColor: props.theme.textInput.line,
                 }}
               >
                 <Text style={{
                   fontSize: cx(16),
-                  color: '#000',
+                  color: props.theme.textInput.fontColor,
                   fontFamily: 'helvetica_neue_lt_std_roman',
                   paddingLeft: cx(16),
                 }}>
@@ -389,65 +390,66 @@ const BiorhythmPage = () => {
               marginTop: cx(26),
             }}>
             {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: '#ff9500' }} source={res.ic_warning_amber} />
-              <Text
-                style={{
-                  flexWrap: 'wrap',
-                  fontSize: cx(12),
-                }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
+                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} />
+                <Text
+                    style={{
+                      flexWrap: 'wrap',
+                      fontSize: cx(12),
+                      color: props.theme.global.fontColor
+                    }}>{I18n.getLang('add_new_trigger_time_warning_max_number_text')}</Text>
             </View>}
             {state.planList.length < 8 &&
-              <>
-                <Text
-                  style={{
-                    fontSize: cx(16),
-                    fontWeight: 'bold',
-                    color: 'rgb(0,0,0)',
-                  }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
-                <TouchableOpacity
-                  onPress={() => {
-                    const ids: number[] = state.planList.map(p => p.index)
-                    const newPlan: Plan = {
-                      index: Math.max(...ids) + 1,
-                      icon: res.rhythm_icon1,
-                      time: 0,
-                      name: '',
-                      colorTemperature: 0,
-                      brightness: 100,
-                      action: [
-                        {
-                          uri: 'model/attribute/set/LightCtrl/ColorTemperature',
-                          startValue: `${colorTemperatureValue(0)}`,
-                        },
-                        {
-                          uri: 'model/attribute/set/LightCtrl/Brightness',
-                          startValue: '100',
-                        },
-                      ],
-                      enable: true,
-                      iconId: randomIcon(),
-                    }
-                    const editPageParams: BiorhythmEditPageParams = {
-                      planData: newPlan,
-                      isAdd: true,
-                      onPlanEdited,
-                      onPlanDelete,
-                      minimumEnable,
-                      nameRepeat,
-                      iconIdList: state.planList?.map(item => {
-                        return item.iconId
-                      }),
-                      isMixRGBWLamp: !!params.isMixLight,
-                      isSupportTemperature: params.isSupportTemperature,
-                      isSupportBrightness: params.isSupportBrightness,
-                      showDeleteBtn
-                    }
-                    navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
-                  }}>
-                  <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24) }} />
-                </TouchableOpacity>
-              </>
+                <>
+                    <Text
+                        style={{
+                          fontSize: cx(16),
+                          fontWeight: 'bold',
+                          color: props.theme.global.fontColor,
+                        }}>{I18n.getLang('bio_ryhthm_default_subheadline_text')}</Text>
+                    <TouchableOpacity
+                        onPress={() => {
+                          const ids: number[] = state.planList.map(p => p.index)
+                          const newPlan: Plan = {
+                            index: Math.max(...ids) + 1,
+                            icon: res.rhythm_icon1,
+                            time: 0,
+                            name: '',
+                            colorTemperature: 0,
+                            brightness: 100,
+                            action: [
+                              {
+                                uri: 'model/attribute/set/LightCtrl/ColorTemperature',
+                                startValue: `${colorTemperatureValue(0)}`,
+                              },
+                              {
+                                uri: 'model/attribute/set/LightCtrl/Brightness',
+                                startValue: '100',
+                              },
+                            ],
+                            enable: true,
+                            iconId: randomIcon(),
+                          }
+                          const editPageParams: BiorhythmEditPageParams = {
+                            planData: newPlan,
+                            isAdd: true,
+                            onPlanEdited,
+                            onPlanDelete,
+                            minimumEnable,
+                            nameRepeat,
+                            iconIdList: state.planList?.map(item => {
+                              return item.iconId
+                            }),
+                            isMixRGBWLamp: !!params.isMixLight,
+                            isSupportTemperature: params.isSupportTemperature,
+                            isSupportBrightness: params.isSupportBrightness,
+                            showDeleteBtn
+                          }
+                          navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
+                        }}>
+                        <Image source={BiologicalRes.biorhythom_add} style={{ height: cx(24), width: cx(24), tintColor: props.theme.icon.primary }} />
+                    </TouchableOpacity>
+                </>
             }
           </View>
           <FlatList
@@ -464,92 +466,92 @@ const BiorhythmPage = () => {
               const bgColor = item?.brightness === 0 ? '#000' : !params.isSupportTemperature && cctToColor(1) || cctToColor(item.colorTemperature.toFixed(), item?.brightness)
               return (
                 <Card
-                    style={{ marginHorizontal: cx(24) }}
-                    onPress={() => {
-                      const editPageParams: BiorhythmEditPageParams = {
-                        planData: {
-                          ...item,
-                          name: setTimer(item?.name)
-                        },
-                        isAdd: false,
-                        onPlanEdited,
-                        onPlanDelete,
-                        minimumEnable,
-                        nameRepeat,
-                        iconIdList: state.planList?.map(item => {
-                          return item.iconId
-                        }),
-                        isMixRGBWLamp: !!params.isMixLight,
-                        isSupportTemperature: params.isSupportTemperature,
-                        isSupportBrightness: params.isSupportBrightness,
-                        showDeleteBtn
-                      }
-                      navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
+                  style={{ marginHorizontal: cx(24) }}
+                  onPress={() => {
+                    const editPageParams: BiorhythmEditPageParams = {
+                      planData: {
+                        ...item,
+                        name: setTimer(item?.name)
+                      },
+                      isAdd: false,
+                      onPlanEdited,
+                      onPlanDelete,
+                      minimumEnable,
+                      nameRepeat,
+                      iconIdList: state.planList?.map(item => {
+                        return item.iconId
+                      }),
+                      isMixRGBWLamp: !!params.isMixLight,
+                      isSupportTemperature: params.isSupportTemperature,
+                      isSupportBrightness: params.isSupportBrightness,
+                      showDeleteBtn
+                    }
+                    navigation.navigate(ui_biz_routerKey.bi_biz_biological_edit, editPageParams)
+                  }}
+                >
+                  <View
+                    style={{
+                      flex: 1,
+                      flexDirection: 'column',
                     }}
                   >
-                    <View
-                      style={{
-                        flex: 1,
-                        flexDirection: 'column',
-                      }}
-                    >
-                      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: cx(16) }}>
-                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
-                          <Image
-                            source={setImg(item?.iconId) || type && { uri: item?.icon } || item?.icon}
-                            style={{
-                              width: cx(24),
-                              height: cx(24),
-                              marginStart: cx(10),
-                              marginRight: cx(6),
-                              tintColor: '#474e5d',
-                            }}
-                          />
-                          <Text
-                            style={{
-                              fontSize: cx(16),
-                              color: '#000',
-                              fontFamily: 'helvetica_neue_lt_std_roman',
-                            }}
-                          >
-                            {convertMinutesTo12HourFormat(item.time, is24Hour)}
-                          </Text>
-                        </View>
-                        <Switch
-                          value={item.enable}
-                          thumbColor={'#f60'}
-                          trackColor={{ false: '#00000026', true: '#ff660036' }}
-                          onValueChange={e => {
-                            item.enable = e
-                            requestSetBiorhythm()
+                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: cx(16) }}>
+                      <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
+                        <Image
+                          source={setImg(item?.iconId) || type && { uri: item?.icon } || item?.icon}
+                          style={{
+                            width: cx(24),
+                            height: cx(24),
+                            marginStart: cx(10),
+                            marginRight: cx(6),
+                            tintColor: props.theme.icon.normal,
                           }}
-                          style={{ marginRight: cx(10) }}
                         />
-                      </View>
-                      <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                         <Text
                           style={{
-                            fontSize: cx(12),
-                            color: '#666',
+                            fontSize: cx(16),
+                            color: props.theme.global.fontColor,
                             fontFamily: 'helvetica_neue_lt_std_roman',
-                            paddingLeft: cx(20),
                           }}
                         >
-                          {setTimer(item?.name)}
+                          {convertMinutesTo12HourFormat(item.time, is24Hour)}
                         </Text>
                       </View>
-                      <View
+                      <Switch
+                        value={item.enable}
+                        thumbColor={props.theme.icon.primary}
+                        trackColor={{ false: '#00000026', true: '#ff660036' }}
+                        onValueChange={e => {
+                          item.enable = e
+                          requestSetBiorhythm()
+                        }}
+                        style={{ marginRight: cx(10) }}
+                      />
+                    </View>
+                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
+                      <Text
                         style={{
-                          width: cx(295),
-                          height: cx(24),
-                          backgroundColor: bgColor,
-                          marginLeft: cx(20),
-                          marginTop: cx(5),
-                          marginBottom: cx(24),
-                          borderRadius: cx(8),
-                        }} />
+                          fontSize: cx(12),
+                          color: props.theme.global.secondFontColor,
+                          fontFamily: 'helvetica_neue_lt_std_roman',
+                          paddingLeft: cx(20),
+                        }}
+                      >
+                        {setTimer(item?.name)}
+                      </Text>
                     </View>
-                  </Card>
+                    <View
+                      style={{
+                        width: cx(295),
+                        height: cx(24),
+                        backgroundColor: bgColor,
+                        marginLeft: cx(20),
+                        marginTop: cx(5),
+                        marginBottom: cx(24),
+                        borderRadius: cx(8),
+                      }} />
+                  </View>
+                </Card>
               )
             }}
             keyExtractor={item => `${item.index}`}
@@ -561,7 +563,6 @@ const BiorhythmPage = () => {
                     text={I18n.getLang('bio_ryhthm_default_button_reset_text')}
                     textStyle={{
                       fontSize: cx(16),
-                      color: '#fff',
                       fontFamily: 'helvetica_neue_lt_std_roman',
                     }}
                     onPress={() => {
@@ -634,6 +635,6 @@ const BiorhythmPage = () => {
   )
 }
 
-export default BiorhythmPage
+export default withTheme(BiorhythmPage)