@ledvance/group-ui-biz-bundle 1.0.76 → 1.0.77

package/package.json

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

package/src/modules/biorhythm/BiorhythmPage.tsx

@@ -246,7 +246,7 @@ const BiorhythmPage = () => {
       backText={deviceInfo.name}
       onBackClick={navigation.goBack}
       headlineText={I18n.getLang('add_new_trigger_time_system_back_text')}
-      headlineContent={<Switch
+      headlineIconContent={<Switch
         value={state.enable}
         thumbColor={'#f60'}
         trackColor={{ false: '#00000026', true: '#ff660036' }}

package/src/modules/mood_new/AddMoodPage.tsx

@@ -19,6 +19,7 @@ import { difference, head, range } from 'lodash';
 import { RecommendMood, getRecommendMixMoods, getRecommendMoods } from './MoodInfo';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 export interface AddMoodPageParams {
   isStatic: boolean;
@@ -32,7 +33,7 @@ interface AddMoodPageState {
   data: RecommendMood[];
 }
 
-const AddMoodPage = () => {
+const AddMoodPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useRoute().params as AddMoodPageParams;
   const moduleParams = routeParams.moduleParams;
@@ -77,6 +78,19 @@ const AddMoodPage = () => {
     [routeParams]
   );
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    desc: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      marginHorizontal: cx(24),
+      marginTop: cx(12),
+    },
+  })
+
   return (
     <Page
       backText={Strings.getLang('add_new_static_mood_system_back')}
@@ -120,20 +134,7 @@ const AddMoodPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  desc: {
-    color: '#000',
-    fontSize: cx(16),
-    marginHorizontal: cx(24),
-    marginTop: cx(12),
-  },
-});
-
-export default AddMoodPage;
+export default withTheme(AddMoodPage)
 
 const defStripConfig = {
   version: 0,

package/src/modules/mood_new/MixDynamicMoodEditor.tsx

@@ -41,6 +41,7 @@ import { useParams } from '@ledvance/base/src/hooks/Hooks';
 import { showDialog } from '@ledvance/base/src/utils/common';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
   mainBucketSelected: boolean;
   secondaryBucketSelected: boolean;
@@ -48,7 +49,7 @@ interface MixDynamicMoodEditorPageState extends StaticMoodEditorPageState {
   secondaryIdx: number;
   sceneMode: StripLightMoodMode;
 }
-const MixDynamicMoodEditorPage = () => {
+const MixDynamicMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useParams<StaticMoodEditorPageParams>();
   const params = cloneDeep(routeParams);
@@ -143,6 +144,98 @@ const MixDynamicMoodEditorPage = () => {
     return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
   }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
 
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    name: {
+      marginHorizontal: cx(24),
+    },
+    adjustCard: {
+      marginVertical: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    lightLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+    },
+    light: {
+      color: props.theme.global.fontColor,
+      fontSize: cx(18),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    transitionMode: {
+      marginHorizontal: cx(16),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    nodesAdjust: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    adjustButtons: {
+      width: cx(44),
+      marginStart: cx(16),
+    },
+    adjustButton: {
+      width: cx(44),
+      height: cx(44),
+    },
+    nodeList: {
+      flex: 1,
+      marginHorizontal: cx(16),
+    },
+    nodeItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    nodeBlock: {
+      flex: 1,
+      height: cx(40),
+      borderRadius: cx(8),
+    },
+    nodeDeleteBtn: {
+      width: cx(24),
+      height: cx(30),
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    nodeDeleteIcon: {
+      width: cx(16),
+      height: cx(16),
+    },
+    nodeAddBtn: {
+      height: cx(40),
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginEnd: cx(26),
+      borderRadius: cx(8),
+      borderWidth: cx(1),
+      borderStyle: 'dashed',
+      borderColor: props.theme.addNode.border,
+      backgroundColor: props.theme.addNode.background,
+    },
+    deleteBtn: {
+      width: '100%',
+      height: cx(50),
+      backgroundColor: props.theme.button.delete,
+      borderRadius: cx(8),
+    },
+    deleteBtnText: {
+      color: props.theme.button.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+  })
+
   return (
     <Page
       backText={I18n.getLang('mesh_device_detail_mode')}
@@ -193,7 +286,7 @@ const MixDynamicMoodEditorPage = () => {
             }}
             maxLength={33}
             showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? '#f00' : 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'
@@ -202,7 +295,7 @@ const MixDynamicMoodEditorPage = () => {
           <Card style={styles.adjustCard}>
             <LdvSwitch
               title={I18n.getLang('light_sources_tile_main_lighting_headline')}
-              color="#fff"
+              color={props.theme.card.background}
               colorAlpha={1}
               enable={!!state.mood.mainLamp.enable}
               setEnable={v => {
@@ -272,7 +365,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.mainBucketSelected ? '#f60' : '#666' },
+                          { tintColor: state.mainBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
                         ]}
                         source={res.ic_paint_bucket}
                       />
@@ -285,7 +378,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.mainBucketSelected ? '#666' : '#f60' },
+                          { tintColor: state.mainBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
                         ]}
                         source={res.ic_colorize}
                       />
@@ -321,7 +414,7 @@ const MixDynamicMoodEditorPage = () => {
                               style={[
                                 styles.nodeDeleteIcon,
                                 {
-                                  tintColor: state.mood.mainLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                  tintColor: state.mood.mainLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                                 },
                               ]}
                               source={res.ic_mood_del}
@@ -353,7 +446,7 @@ const MixDynamicMoodEditorPage = () => {
                               style={{
                                 width: cx(18),
                                 height: cx(18),
-                                tintColor: '#000',
+                                tintColor: props.theme.addNode.fontColor,
                               }}
                               source={{ uri: res.add }}
                             />
@@ -397,7 +490,7 @@ const MixDynamicMoodEditorPage = () => {
           <Card style={styles.adjustCard}>
             <LdvSwitch
               title={I18n.getLang('light_sources_tile_sec_lighting_headline')}
-              color={'#fff'}
+              color={props.theme.card.background}
               colorAlpha={1}
               enable={!!state.mood.secondaryLamp.enable}
               setEnable={v => {
@@ -537,7 +630,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.secondaryBucketSelected ? '#f60' : '#666' },
+                          { tintColor: state.secondaryBucketSelected ? props.theme.icon.primary : props.theme.icon.normal },
                         ]}
                         source={res.ic_paint_bucket}
                       />
@@ -550,7 +643,7 @@ const MixDynamicMoodEditorPage = () => {
                       <Image
                         style={[
                           styles.adjustButton,
-                          { tintColor: state.secondaryBucketSelected ? '#666' : '#f60' },
+                          { tintColor: state.secondaryBucketSelected ? props.theme.icon.normal : props.theme.icon.primary },
                         ]}
                         source={res.ic_colorize}
                       />
@@ -586,7 +679,7 @@ const MixDynamicMoodEditorPage = () => {
                                 styles.nodeDeleteIcon,
                                 {
                                   tintColor:
-                                    state.mood.secondaryLamp.nodes.length < 3 ? '#ccc' : '#666',
+                                    state.mood.secondaryLamp.nodes.length < 3 ? props.theme.icon.disable : props.theme.icon.normal,
                                 },
                               ]}
                               source={res.ic_mood_del}
@@ -618,7 +711,7 @@ const MixDynamicMoodEditorPage = () => {
                               style={{
                                 width: cx(18),
                                 height: cx(18),
-                                tintColor: '#000',
+                                tintColor: props.theme.addNode.fontColor,
                               }}
                               source={{ uri: res.add }}
                             />
@@ -698,98 +791,9 @@ const MixDynamicMoodEditorPage = () => {
     </Page>
   );
 };
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginVertical: cx(12),
-    marginHorizontal: cx(24),
-  },
-  fanAdjustCard: {
-    marginHorizontal: cx(24),
-  },
-  lightLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  light: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  transitionMode: {
-    marginHorizontal: cx(16),
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  nodesAdjust: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  adjustButtons: {
-    width: cx(44),
-    marginStart: cx(16),
-  },
-  adjustButton: {
-    width: cx(44),
-    height: cx(44),
-  },
-  nodeList: {
-    flex: 1,
-    marginHorizontal: cx(16),
-  },
-  nodeItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  nodeBlock: {
-    flex: 1,
-    height: cx(40),
-    borderRadius: cx(8),
-  },
-  nodeDeleteBtn: {
-    width: cx(24),
-    height: cx(30),
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  nodeDeleteIcon: {
-    width: cx(16),
-    height: cx(16),
-  },
-  nodeAddBtn: {
-    height: cx(40),
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginEnd: cx(26),
-    borderRadius: cx(8),
-    borderWidth: cx(1),
-    borderStyle: 'dashed',
-    borderColor: '#666',
-    backgroundColor: '#f6f6f6',
-  },
-  deleteBtn: {
-    width: '100%',
-    height: cx(50),
-    backgroundColor: '#666',
-    borderRadius: cx(8),
-  },
-  deleteBtnText: {
-    color: '#fff',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-});
-export default MixDynamicMoodEditorPage;
+
+export default withTheme(MixDynamicMoodEditorPage)
+
 export function getTransitionModeString(transitionMode: MoodNodeTransitionMode): string {
   if (transitionMode === MoodNodeTransitionMode.Jump) {
     return I18n.getLang('other_lights_modes_jump_text');

package/src/modules/mood_new/MoodItem.tsx

@@ -12,6 +12,7 @@ import I18n from '@ledvance/base/src/i18n';
 import res from '@ledvance/base/src/res';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 interface LightCategory {
   isMixLight?: boolean
@@ -21,6 +22,7 @@ interface LightCategory {
 }
 
 interface MoodItemProps extends ViewProps {
+  theme?: any
   enable: boolean;
   isMix: boolean;
   mood: MoodUIInfo;
@@ -37,8 +39,43 @@ const MoodItem = (props: MoodItemProps) => {
   }, [mood.mainLamp.nodes, mood.secondaryLamp.nodes]);
 
   const gradientMode = useMemo(() => (
-     deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
+    deviceTypeOption?.isStringLight ? MoodJumpGradientMode.StringGradient : deviceTypeOption?.isStripLight ? MoodJumpGradientMode.StripGradient : MoodJumpGradientMode.SourceGradient
   ), [MoodJumpGradientMode, deviceTypeOption])
+
+  const styles = StyleSheet.create({
+    card: {
+      marginHorizontal: cx(24),
+    },
+    headline: {
+      flexDirection: 'row',
+      marginHorizontal: cx(16),
+    },
+    headText: {
+      flex: 1,
+      color: props.theme.global.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+      lineHeight: cx(20),
+    },
+    moodTypeItem: {
+      flexDirection: 'row',
+    },
+    moodTypeLabel: {
+      marginStart: cx(16),
+      paddingHorizontal: cx(12.5),
+      backgroundColor: props.theme.tag.background,
+      borderRadius: cx(8),
+    },
+    moodTypeLabelText: {
+      height: cx(16),
+      color: props.theme.tag.fontColor,
+      fontSize: cx(10),
+      textAlignVertical: 'center',
+      fontFamily: 'helvetica_neue_lt_std_roman',
+      lineHeight: cx(16),
+    },
+  });
+
   return (
     <Card style={[styles.card, props.style]} onPress={props.onPress}>
       <View>
@@ -75,7 +112,7 @@ const MoodItem = (props: MoodItemProps) => {
   );
 };
 
-export default MoodItem;
+export default withTheme(MoodItem)
 
 export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boolean, type: 'gradient' | 'separate' }) {
   const { mixSubLight, isMix } = props;
@@ -84,6 +121,26 @@ export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boo
       ? hsv2Hex(n.h, Math.round(n.s), Math.round(mapFloatToRange(n.v / 100, 50, 100)))
       : cctToColor(n.colorTemp.toFixed());
   }) : ['#eee'];
+
+  const styles = StyleSheet.create({
+    gradientItem: {
+      flexDirection: 'row',
+    },
+    gradientItemIconView: {
+      width: cx(24),
+      height: cx(24),
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: '#aaa',
+      borderRadius: cx(8),
+    },
+    gradientItemIcon: {
+      width: cx(16),
+      height: cx(16),
+      tintColor: '#fff',
+    },
+  })
+
   return (
     <View style={styles.gradientItem}>
       <Spacer height={0} width={cx(16)} />
@@ -105,55 +162,3 @@ export function MixMoodColorsLine(props: { mixSubLight: MoodLampInfo; isMix: boo
   );
 }
 
-const styles = StyleSheet.create({
-  card: {
-    marginHorizontal: cx(24),
-  },
-  headline: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  headText: {
-    flex: 1,
-    color: '#000',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-    lineHeight: cx(20),
-  },
-  gradientItem: {
-    flexDirection: 'row',
-  },
-  gradientItemIconView: {
-    width: cx(24),
-    height: cx(24),
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#aaa',
-    borderRadius: cx(8),
-  },
-  gradientItemIcon: {
-    width: cx(16),
-    height: cx(16),
-    tintColor: '#fff',
-  },
-  gradient: {
-    borderRadius: cx(8),
-  },
-  moodTypeItem: {
-    flexDirection: 'row',
-  },
-  moodTypeLabel: {
-    marginStart: cx(16),
-    paddingHorizontal: cx(12.5),
-    backgroundColor: '#E6E7E8',
-    borderRadius: cx(8),
-  },
-  moodTypeLabelText: {
-    height: cx(16),
-    color: '#000000DD',
-    fontSize: cx(10),
-    textAlignVertical: 'center',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-    lineHeight: cx(16),
-  },
-});

package/src/modules/mood_new/MoodPage.tsx

@@ -26,10 +26,11 @@ import { useFlagMode } from '../flags/FlagActions';
 import { WorkMode } from '@ledvance/base/src/utils/interface';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 const MAX_MOOD_COUNT = 255;
 
-const MoodPage = () => {
+const MoodPage = (props: {theme?: any}) => {
   const params = useParams<MoodPageParams>();
   const deviceInfo = useDeviceInfo();
   const uaGroupInfo = useUAGroupInfo()
@@ -196,8 +197,8 @@ const MoodPage = () => {
       state.originMoods = cloneDeep(newScene);
       setMoods(cloneDeep(newScene));
       if (mode === 'del' && ((params.isCeilingLight ?
-        (moodInfo.scene?.mainLamp.id !== checkedMood.mainLamp.id || moodInfo.scene?.secondaryLamp.id !== checkedMood.secondaryLamp.id) :
-        moodInfo.scene?.id !== checkedMood.id) ||
+          (moodInfo.scene?.mainLamp.id !== checkedMood.mainLamp.id || moodInfo.scene?.secondaryLamp.id !== checkedMood.secondaryLamp.id) :
+          moodInfo.scene?.id !== checkedMood.id) ||
         (params.isCeilingLight ? (workMode !== WorkMode.Scene && rgbicWorkMode !== WorkMode.Scene) : workMode !== WorkMode.Scene) ||
         !switchLed)) {
         return {
@@ -252,6 +253,27 @@ const MoodPage = () => {
     return !!state.originMoods.filter(m => !(params.isCeilingLight ? (m.mainLamp.id === mood.mainLamp.id && m.secondaryLamp.id === mood.secondaryLamp.id) : (m.id === mood.id))).find(m => m.name === mood.name)
   }, [state.originMoods, params.isCeilingLight])
 
+  const styles = StyleSheet.create({
+    tagLine: {
+      flexDirection: 'row',
+      marginHorizontal: cx(24),
+    },
+    infoLine: {
+      marginHorizontal: cx(24),
+    },
+    addMoodPopover: {
+      position: 'absolute',
+      right: cx(60),
+      top: Platform.OS === 'android' ? cx(90) : cx(130),
+      maxWidth: cx(200),
+      backgroundColor: props.theme.card.background,
+    },
+    popoverItem: {
+      padding: cx(5),
+      alignItems: 'flex-start',
+    },
+  })
+
   return (
     <>
       <Page
@@ -268,21 +290,21 @@ const MoodPage = () => {
         loading={state.loading}
       >
         {!params.isStripLight && <View style={styles.tagLine}>
-          <Tag
-            checked={state.staticTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text1')}
-            onCheckedChange={checked => {
-              state.staticTagChecked = checked;
-            }}
-          />
-          <Spacer width={cx(8)} height={0} />
-          <Tag
-            checked={state.dynamicTagChecked}
-            text={Strings.getLang('mood_overview_filter_name_text2')}
-            onCheckedChange={checked => {
-              state.dynamicTagChecked = checked;
-            }}
-          />
+            <Tag
+                checked={state.staticTagChecked}
+                text={Strings.getLang('mood_overview_filter_name_text1')}
+                onCheckedChange={checked => {
+                  state.staticTagChecked = checked;
+                }}
+            />
+            <Spacer width={cx(8)} height={0} />
+            <Tag
+                checked={state.dynamicTagChecked}
+                text={Strings.getLang('mood_overview_filter_name_text2')}
+                onCheckedChange={checked => {
+                  state.dynamicTagChecked = checked;
+                }}
+            />
         </View>}
         <Spacer height={cx(10)} />
         {state.originMoods.length >= MAX_MOOD_COUNT && (
@@ -291,7 +313,7 @@ const MoodPage = () => {
             <InfoText
               icon={res.ic_warning_amber}
               text={Strings.getLang('mood_overview_warning_max_number_text')}
-              contentColor={'#ff9500'}
+              contentColor={props.theme.global.warning}
             />
             <Spacer height={cx(6)} />
           </View>
@@ -346,25 +368,5 @@ const MoodPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  tagLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(24),
-  },
-  infoLine: {
-    marginHorizontal: cx(24),
-  },
-  addMoodPopover: {
-    position: 'absolute',
-    right: cx(60),
-    top: Platform.OS === 'android' ? cx(90) : cx(130),
-    maxWidth: cx(200),
-    backgroundColor: '#fff',
-  },
-  popoverItem: {
-    padding: cx(5),
-    alignItems: 'flex-start',
-  },
-});
 
-export default MoodPage;
+export default withTheme(MoodPage)

package/src/modules/mood_new/StaticMoodEditorPage.tsx

@@ -24,6 +24,7 @@ import LdvSwitch from '@ledvance/base/src/components/ldvSwitch';
 import { showDialog } from '@ledvance/base/src/utils/common';
 
 const cx = Utils.RatioUtils.convertX;
+const { withTheme } = Utils.ThemeUtils
 
 export interface StaticMoodEditorPageParams {
   mode: 'add' | 'edit';
@@ -41,7 +42,7 @@ export interface StaticMoodEditorPageState {
   loading: boolean;
 }
 
-const StaticMoodEditorPage = () => {
+const StaticMoodEditorPage = (props: { theme?: any }) => {
   const navigation = useNavigation();
   const routeParams = useParams<StaticMoodEditorPageParams>();
   const params = cloneDeep(routeParams);
@@ -117,6 +118,41 @@ const StaticMoodEditorPage = () => {
     return state.mood.name.length > 0 && state.mood.name.length < 33 && !nameRepeat && (params.mode === 'add' || !checkMoodChanged)
   }, [nameRepeat, state.mood.name, checkMoodChanged, params.mode])
 
+
+  const styles = StyleSheet.create({
+    root: {
+      flex: 1,
+      flexDirection: 'column',
+    },
+    name: {
+      marginHorizontal: cx(24),
+    },
+    adjustCard: {
+      marginTop: cx(12),
+      marginHorizontal: cx(24),
+    },
+    fanAdjustCard: {
+      marginHorizontal: cx(24),
+    },
+    preview: {
+      width: cx(20),
+      height: cx(20),
+      marginStart: cx(12),
+      borderRadius: cx(4),
+    },
+    deleteBtn: {
+      width: '100%',
+      height: cx(50),
+      backgroundColor: props.theme.button.delete,
+      borderRadius: cx(8),
+    },
+    deleteBtnText: {
+      color: props.theme.button.fontColor,
+      fontSize: cx(16),
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+  });
+
   return (
     <Page
       backText={I18n.getLang('mesh_device_detail_mode')}
@@ -147,7 +183,7 @@ const StaticMoodEditorPage = () => {
             }}
             maxLength={33}
             showError={state.mood.name.length > 32 || nameRepeat}
-            tipColor={nameRepeat ? '#f00' : 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'
@@ -253,47 +289,4 @@ const StaticMoodEditorPage = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    flexDirection: 'column',
-  },
-  name: {
-    marginHorizontal: cx(24),
-  },
-  adjustCard: {
-    marginTop: cx(12),
-    marginHorizontal: cx(24),
-  },
-  fanAdjustCard: {
-    marginHorizontal: cx(24),
-  },
-  lightLine: {
-    flexDirection: 'row',
-    marginHorizontal: cx(16),
-  },
-  light: {
-    color: '#000',
-    fontSize: cx(18),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  preview: {
-    width: cx(20),
-    height: cx(20),
-    marginStart: cx(12),
-    borderRadius: cx(4),
-  },
-  deleteBtn: {
-    width: '100%',
-    height: cx(50),
-    backgroundColor: '#666',
-    borderRadius: cx(8),
-  },
-  deleteBtnText: {
-    color: '#fff',
-    fontSize: cx(16),
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-});
-
-export default StaticMoodEditorPage;
+export default withTheme(StaticMoodEditorPage)

package/src/modules/sleepWakeUp/SleepWakeUpDetailPage.tsx

@@ -362,7 +362,7 @@ const SleepWakeUpDetailPage = (props: {theme?: any}) => {
           </Text>
           <View
             style={{
-              backgroundColor: props.theme.card.board,
+              backgroundColor: props.theme.card.border,
               borderRadius: 4,
               minHeight: cx(50),
               flex: 1,