@ledvance/base 1.2.76 → 1.2.78

package/package.json

@@ -4,7 +4,7 @@
   "name": "@ledvance/base",
   "pid": [],
   "uiid": "",
-  "version": "1.2.76",
+  "version": "1.2.78",
   "scripts": {
     "prepublishOnly": "python update-localazy.py"
   },

package/src/api/nativeEventEmitter.ts

@@ -27,8 +27,8 @@ interface GroupFeatureEvent {
 }
 
 interface GroupDpEvent {
-  tyGroupId?: number
-  dps?: any
+  tyGroupId: number
+  dps: any
 }
 
 interface DeviceEvent {

package/src/components/AdvanceCard.tsx

@@ -5,6 +5,7 @@ import Card from 'components/Card'
 import Spacer from 'components/Spacer'
 
 const { convertX: cx } = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 export interface AdvancedData {
   title: string
@@ -37,6 +38,7 @@ export function getAdvancedStatusColor(status: AdvancedStatus): string {
 }
 
 export interface AdvanceCardProps extends PropsWithChildren<ViewProps> {
+  theme?: any
   data: AdvancedData
   onPress: () => void
 }
@@ -49,21 +51,21 @@ const AdvanceCard = (props: AdvanceCardProps) => {
       containerStyle={styles.itemContent}
       onPress={props.onPress}>
       {!!statusColor && <View style={styles.dotBg}>
-        <View
-            style={[
-              styles.dot,
-              {backgroundColor: props.data.statusColor},
-            ]}/>
+          <View
+              style={[
+                styles.dot,
+                {backgroundColor: props.data.statusColor},
+              ]}/>
       </View>}
       {
         props.children ?
           props.children :
           <View style={styles.titleBg}>
-            <Text style={styles.title}>{props.data.title}</Text>
+            <Text style={{...styles.title, color: props.theme.global.fontColor}}>{props.data.title}</Text>
             <Spacer height={cx(8)} />
             {
               (!!props.data.subtitles) && props.data.subtitles.map((subtitle, index) => (
-                <Text style={styles.subtitle} key={`${subtitle}_${index}`}>{subtitle}</Text>
+                <Text style={{...styles.subtitle, color: props.theme.global.secondFontColor}} key={`${subtitle}_${index}`}>{subtitle}</Text>
               ))
             }
           </View>
@@ -85,13 +87,11 @@ const styles = StyleSheet.create({
   },
   title: {
     marginHorizontal: cx(16),
-    color: '#000',
     fontSize: cx(14),
     textAlign: 'center',
     fontFamily: 'helvetica_neue_lt_std_roman',
   },
   subtitle: {
-    color: '#666',
     fontSize: cx(10),
     textAlign: 'center',
     fontFamily: 'helvetica_neue_lt_std_roman',
@@ -114,4 +114,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default AdvanceCard
+export default withTheme(AdvanceCard)

package/src/components/Card.tsx

@@ -3,23 +3,25 @@ import React, {PropsWithChildren} from 'react'
 import {Utils} from 'tuya-panel-kit'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface CardProps extends PropsWithChildren<ViewProps> {
+  theme?: any
   shadowHeight?: number | undefined
   onPress?: () => void
   onLongPress?: () => void
   containerStyle?: StyleProp<ViewStyle>
 }
 
-export default function Card(props: CardProps) {
+const Card = (props: CardProps) => {
   const shadowHeight = props.shadowHeight || cx(7)
   return (
     <View
       style={[{
         overflow: Platform.OS === 'ios' ? undefined : 'hidden',
-        backgroundColor: 'white',
+        backgroundColor: props.theme.card.background,
         elevation: shadowHeight,
-        shadowColor: '#000000',
+        shadowColor: props.theme.card.shadowColor,
         shadowOpacity: 0.2,
         shadowRadius: shadowHeight,
         shadowOffset: {
@@ -33,4 +35,6 @@ export default function Card(props: CardProps) {
       </TouchableOpacity>
     </View>
   )
-}
+}
+
+export default withTheme(Card)

package/src/components/DeleteButton.tsx

@@ -3,8 +3,10 @@ import { StyleProp, Text, TextStyle, TouchableOpacity, ViewStyle } from 'react-n
 import { Utils } from 'tuya-panel-kit'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface DeleteButtonProps {
+  theme?: any
   text: string,
   onPress: () => void,
   style?: StyleProp<ViewStyle>,
@@ -21,13 +23,13 @@ const DeleteButton = (props: DeleteButtonProps) => {
       style={[{
         width: '100%',
         height: cx(50),
-        backgroundColor: '#666',
+        backgroundColor: props.theme.button.disabled,
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: cx(8),
       }, style]}>
       <Text style={[{
-        color: '#fff',
+        color: props.theme.button.fontColor,
         fontSize: cx(16),
         fontFamily: 'helvetica_neue_lt_std_bd',
       }, textStyle]}>{text}</Text>
@@ -35,4 +37,4 @@ const DeleteButton = (props: DeleteButtonProps) => {
   )
 }
 
-export default DeleteButton
+export default withTheme(DeleteButton)

package/src/components/Page.tsx

@@ -2,11 +2,14 @@ import React, { PropsWithChildren, useCallback, useEffect } from 'react'
 import { BackHandler, View, ViewProps } from 'react-native'
 import LDVTopBar from './ldvTopBar'
 import { useNavigation } from '@react-navigation/native'
-import { Dialog, Toast } from 'tuya-panel-kit'
+import {Dialog, Toast, Utils} from 'tuya-panel-kit'
 import I18n from '@i18n'
 import LdvTopName from './ldvTopName'
 
+const { withTheme } = Utils.ThemeUtils
+
 interface PageProps extends PropsWithChildren<ViewProps> {
+  theme?: any
   rightButtonDisabled?: boolean
   backText: string
   onBackClick?: () => void
@@ -19,6 +22,7 @@ interface PageProps extends PropsWithChildren<ViewProps> {
   headlineText?: string
   headlineIcon?: string | number
   onHeadlineIconClick?: () => void
+  headlineContent?: React.ReactNode
   showGreenery?: boolean
   greeneryIcon?: string | undefined | number
   loading?: boolean
@@ -63,7 +67,7 @@ const Page = (props: PageProps) => {
 
   return (
     <>
-      <View style={[{ flex: 1, position: 'relative' }, props.style]}>
+      <View style={[{ flex: 1, position: 'relative', backgroundColor: props.theme.global.backgroud }, props.style]}>
         <LDVTopBar
           title={props.backText}
           onBackPress={
@@ -82,7 +86,9 @@ const Page = (props: PageProps) => {
             rightIcon={props.headlineIcon}
             rightIconClick={props.onHeadlineIconClick}
             showGreenery={props.showGreenery}
-            greeneryIcon={props.greeneryIcon}/>}
+            greeneryIcon={props.greeneryIcon}
+            headlineContent={props.headlineContent}
+            />}
         {props.children}
       </View>
       {!!props.loading && <Toast.Loading
@@ -95,4 +101,4 @@ const Page = (props: PageProps) => {
   )
 }
 
-export default Page
+export default withTheme(Page)

package/src/components/TextField.tsx

@@ -4,17 +4,65 @@ import {Utils} from 'tuya-panel-kit'
 import res from '../res'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface TextFieldProps extends TextInputProps {
-    showError?: boolean
-    errorText?: string
-    tipIcon?: ImageSourcePropType
-    tipColor?: string
+  theme?: any
+  showError?: boolean
+  errorText?: string
+  tipIcon?: ImageSourcePropType
+  tipColor?: string
 }
 
 const TextField = (props: TextFieldProps) => {
   const icon = props.tipIcon || res.ic_warning_amber
-  const color = props.tipColor || '#FF9500'
+  const color = props.tipColor || props.theme.global.warning
+
+  const styles = StyleSheet.create({
+    topTip: {
+      marginTop: cx(5),
+      fontSize: cx(12),
+      marginStart: cx(13),
+      color: props.theme.global.secondFontColor,
+      fontFamily: 'helvetica_neue_lt_std_bd',
+    },
+    textInputGroup: {
+      flexDirection: 'row',
+      borderRadius: cx(4),
+      backgroundColor: props.theme.textInput.background,
+      alignItems: 'center',
+    },
+    textInput: {
+      flex: 1,
+      height: cx(44),
+      marginStart: cx(16),
+      marginEnd: cx(6),
+      fontSize: cx(16),
+      color: props.theme.textInput.fontColor,
+      fontFamily: 'helvetica_neue_lt_std_roman',
+    },
+    iconTouchable: {
+      marginEnd: cx(18),
+      padding: cx(4),
+    },
+    icon: {
+      width: cx(16),
+      height: cx(16),
+    },
+    line: {
+      height: 1,
+      position: 'absolute',
+      start: cx(4),
+      end: cx(4),
+      bottom: 0,
+      backgroundColor: props.theme.textInput.line,
+    },
+    errorContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginStart: cx(13),
+    },
+  })
   return (
     <View style={props.style}>
       <Text style={[styles.topTip, { opacity: (!!props.value) ? 1 : 0 }]}>{props.placeholder}</Text>
@@ -41,50 +89,4 @@ const TextField = (props: TextFieldProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  topTip: {
-    marginTop: cx(5),
-    fontSize: cx(12),
-    marginStart: cx(13),
-    color: '#666',
-    fontFamily: 'helvetica_neue_lt_std_bd',
-  },
-  textInputGroup: {
-    flexDirection: 'row',
-    borderRadius: cx(4),
-    backgroundColor: '#f6f6f6',
-    alignItems: 'center',
-  },
-  textInput: {
-    flex: 1,
-    height: cx(44),
-    marginStart: cx(16),
-    marginEnd: cx(6),
-    fontSize: cx(16),
-    color: '#000',
-    fontFamily: 'helvetica_neue_lt_std_roman',
-  },
-  iconTouchable: {
-    marginEnd: cx(18),
-    padding: cx(4),
-  },
-  icon: {
-    width: cx(16),
-    height: cx(16),
-  },
-  line: {
-    height: 1,
-    position: 'absolute',
-    start: cx(4),
-    end: cx(4),
-    bottom: 0,
-    backgroundColor: '#cbcbcb',
-  },
-  errorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginStart: cx(13),
-  },
-})
-
-export default TextField
+export default withTheme(TextField)

package/src/components/TextFieldStyleButton.tsx

@@ -4,8 +4,10 @@ import React from 'react'
 import res from "../res/index";
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface TextFieldStyleButtonProps extends ViewProps {
+    theme?: any
     placeholder: string
     text: string
     onPress: () => void,
@@ -14,69 +16,70 @@ interface TextFieldStyleButtonProps extends ViewProps {
 }
 
 const TextFieldStyleButton = (props: TextFieldStyleButtonProps) => {
+    const styles = StyleSheet.create({
+        topTip: {
+            marginTop: cx(5),
+            fontSize: cx(12),
+            marginStart: cx(13),
+            color: props.theme.global.secondFontColor,
+            fontFamily: 'helvetica_neue_lt_std_bd',
+        },
+        textGroup: {
+            flexDirection: 'row',
+            borderRadius: cx(4),
+            backgroundColor: props.theme.textInput.background,
+            alignItems: 'center',
+        },
+        textParent: {
+            flex: 1,
+            height: cx(44),
+            justifyContent: 'center',
+        },
+        text: {
+            marginStart: cx(16),
+            marginEnd: cx(6),
+            fontSize: cx(16),
+            color: props.theme.textInput.fontColor,
+            fontFamily: 'helvetica_neue_lt_std_roman',
+        },
+        line: {
+            height: 1,
+            position: 'absolute',
+            start: cx(4),
+            end: cx(4),
+            bottom: 0,
+            backgroundColor: props.theme.textInput.line,
+        },
+        tipParent: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        tipIcon: {
+            width: cx(16),
+            height: cx(16),
+            marginStart: cx(4),
+        }
+    })
+
     return (
-        <View style={props.style}>
-            <View style={styles.tipParent}>
-                <Text style={styles.topTip}>{props.placeholder}</Text>
-                {props.showTipIcon && <TouchableOpacity onPress={props.onTipIconPress}>
-                    <Image source={res.ic_info} style={styles.tipIcon}/>
-                </TouchableOpacity>}
-            </View>
-            <TouchableOpacity onPress={props.onPress}>
-                <View style={styles.textGroup}>
-                    <View style={styles.textParent}>
-                        <Text style={styles.text}>{props.text}</Text>
-                    </View>
-                    <View style={styles.line} />
-                </View>
-            </TouchableOpacity>
-        </View>
+      <View style={props.style}>
+          <View style={styles.tipParent}>
+              <Text style={styles.topTip}>{props.placeholder}</Text>
+              {props.showTipIcon && <TouchableOpacity onPress={props.onTipIconPress}>
+                  <Image source={res.ic_info} style={styles.tipIcon}/>
+              </TouchableOpacity>}
+          </View>
+          <TouchableOpacity onPress={props.onPress}>
+              <View style={styles.textGroup}>
+                  <View style={styles.textParent}>
+                      <Text style={styles.text}>{props.text}</Text>
+                  </View>
+                  <View style={styles.line} />
+              </View>
+          </TouchableOpacity>
+      </View>
     )
 }
 
-const styles = StyleSheet.create({
-    topTip: {
-        marginTop: cx(5),
-        fontSize: cx(12),
-        marginStart: cx(13),
-        color: '#666',
-        fontFamily: 'helvetica_neue_lt_std_bd',
-    },
-    textGroup: {
-        flexDirection: 'row',
-        borderRadius: cx(4),
-        backgroundColor: '#f6f6f6',
-        alignItems: 'center',
-    },
-    textParent: {
-        flex: 1,
-        height: cx(44),
-        justifyContent: 'center',
-    },
-    text: {
-        marginStart: cx(16),
-        marginEnd: cx(6),
-        fontSize: cx(16),
-        color: '#000',
-        fontFamily: 'helvetica_neue_lt_std_roman',
-    },
-    line: {
-        height: 1,
-        position: 'absolute',
-        start: cx(4),
-        end: cx(4),
-        bottom: 0,
-        backgroundColor: '#cbcbcb',
-    },
-    tipParent: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    tipIcon: {
-        width: cx(16),
-        height: cx(16),
-        marginStart: cx(4),
-    }
-})
 
-export default TextFieldStyleButton
+export default withTheme(TextFieldStyleButton)

package/src/components/ldvPickerView.tsx

@@ -4,12 +4,14 @@ import {Picker, Utils} from 'tuya-panel-kit'
 import _ from 'lodash'
 
 const {convertX} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 const pickerTheme = {
   fontSize: 20,
 }
 
 interface LdvPickerViewProps {
+  theme?: any
   hour: string,
   minute: string,
   setHour: (string) => void,
@@ -25,6 +27,28 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
   const {hour, minute, unit, setHour, setMinute, minutesStep = 1, maxHour = 24} = props
   const hours = useMemo(() => _.times(maxHour, (n) => _.padStart(n.toString(), 2, '0')), [])
   const minutes = useMemo(() => _.times(60 / minutesStep, (n) => _.padStart((n * minutesStep).toString(), 2, '0')) , [props.minutesStep])
+
+  const styles = StyleSheet.create({
+    pickerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    picker: {
+      flex: 1,
+      backgroundColor: props.theme.card.background,
+    },
+    pickerLeft: {},
+    pickerItem: {},
+    picContainer: {
+      flex: 1,
+      position: 'relative',
+    },
+    pickerUnit: {
+      position: 'absolute',
+      right: convertX(20),
+      top: '44%',
+    },
+  })
   return (
     <View style={[styles.pickerContainer, props.style]}>
       <View style={styles.picContainer}>
@@ -42,7 +66,7 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
           ))}
         </Picker>
         {unit ? <View style={styles.pickerUnit}>
-          <Text style={{color: '#000', fontSize: convertX(18)}}>
+          <Text style={{color: props.theme.global.fontColor, fontSize: convertX(18)}}>
             {unit[0]}
           </Text>
         </View> : null}
@@ -61,7 +85,7 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
           ))}
         </Picker>
         {unit ? <View style={styles.pickerUnit}>
-          <Text style={{color: '#000', fontSize: convertX(18)}}>
+          <Text style={{color: props.theme.global.fontColor, fontSize: convertX(18)}}>
             {unit[1]}
           </Text>
         </View> : null}
@@ -70,25 +94,4 @@ const LdvPickerView = (props: LdvPickerViewProps) => {
   )
 }
 
-const styles = StyleSheet.create({
-  pickerContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  picker: {
-    flex: 1,
-  },
-  pickerLeft: {},
-  pickerItem: {},
-  picContainer: {
-    flex: 1,
-    position: 'relative',
-  },
-  pickerUnit: {
-    position: 'absolute',
-    right: convertX(20),
-    top: '44%',
-  },
-})
-
-export default LdvPickerView
+export default withTheme(LdvPickerView)

package/src/components/ldvSwitch.tsx

@@ -4,8 +4,10 @@ import {SwitchButton, Utils} from 'tuya-panel-kit'
 import Spacer from './Spacer'
 
 const {convertX: cx} = Utils.RatioUtils
+const { withTheme } = Utils.ThemeUtils
 
 interface Prop {
+  theme?: any
   title: string
   color: string
   colorAlpha: number
@@ -18,7 +20,7 @@ const LdvSwitch = (props: Prop) => {
   const {title, color, colorAlpha, enable, setEnable, showSwitch = true} = props
   return (
     <View style={styles.titleBGView}>
-      <Text style={styles.title}>{title}</Text>
+      <Text style={{...styles.title, color: props.theme.global.fontColor}}>{title}</Text>
       <View style={[styles.colorBlock, {backgroundColor: color, opacity: colorAlpha}]}/>
       <Spacer style={{flex: 1}} height={0} width={0}/>
       {showSwitch && <SwitchButton value={enable} onValueChange={setEnable}/>}
@@ -39,7 +41,6 @@ const styles = StyleSheet.create({
     borderRadius: cx(4),
   },
   title: {
-    color: '#000',
     fontSize: cx(16),
     // fontFamily: 'helvetica_neue_lt_std_bd',
     fontWeight: 'bold',
@@ -48,4 +49,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default LdvSwitch
+export default withTheme(LdvSwitch)

package/src/components/ldvTopBar.tsx

@@ -5,8 +5,10 @@ import {IconFont, Utils} from 'tuya-panel-kit'
 const backIcon = Platform.OS === 'ios' ? 'backIos' : 'backAndroid'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface TopBarProps {
+  theme?: any
   title: string
   onBackPress: () => void
   rightButtonIcon?: any | {}
@@ -35,13 +37,13 @@ const LDVTopBar = (props: TopBarProps) => {
             alignItems: 'center',
             flex: 1,
           }}>
-          <IconFont size={cx(16)} color={'#f60'} name={backIcon}/>
+          <IconFont size={cx(16)} color={props.theme.global.brand} name={backIcon}/>
           <View style={{width: cx(10)}}/>
           <Text
             numberOfLines={1}
             style={{
               maxWidth: cx(290),
-              color: '#f60',
+              color: props.theme.global.brand,
               fontSize: cx(16),
               fontFamily: 'helvetica_neue_lt_std_roman',
             }}>{props.title}</Text>
@@ -71,4 +73,4 @@ const LDVTopBar = (props: TopBarProps) => {
   )
 }
 
-export default LDVTopBar
+export default withTheme(LDVTopBar)

package/src/components/ldvTopName.tsx

@@ -3,18 +3,32 @@ import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {Utils} from 'tuya-panel-kit'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 interface LdvTopNameProps {
+  theme?: any
   title: string,
   rightIcon?: string | undefined | number,
   rightIconClick?: () => void
   showGreenery?: boolean
   greeneryIcon?: string | undefined | number
+  headlineContent?: React.ReactNode
 }
 
 const LdvTopName = (props: LdvTopNameProps) => {
   const rightIcon = typeof props.rightIcon === 'number' ? props.rightIcon : {uri: props.rightIcon}
   const greeneryIcon = typeof props.greeneryIcon === 'number' ? props.greeneryIcon : {uri: props.greeneryIcon}
+
+  const styles = StyleSheet.create({
+    container: {
+      marginHorizontal: cx(24),
+      marginBottom: cx(12),
+    },
+    title: {
+      color: props.theme.global.brand,
+      fontSize: cx(24),
+    },
+  })
   return (
     <View style={styles.container}>
       <View
@@ -37,23 +51,13 @@ const LdvTopName = (props: LdvTopNameProps) => {
         {props.rightIcon && <TouchableOpacity
             onPress={props.rightIconClick}>
             <Image
-                style={{width: cx(24), height: cx(24), tintColor: '#ff6600'}}
+                style={{width: cx(24), height: cx(24), tintColor: props.theme.global.brand}}
                 source={rightIcon}/>
         </TouchableOpacity>}
+        {props.headlineContent && props.headlineContent}
       </View>
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  container: {
-    marginHorizontal: cx(24),
-    marginBottom: cx(12),
-  },
-  title: {
-    color: '#f60',
-    fontSize: cx(24),
-  },
-})
-
-export default LdvTopName
+export default withTheme(LdvTopName)

package/src/components/weekSelect.tsx

@@ -4,6 +4,7 @@ import {Utils} from 'tuya-panel-kit'
 import I18n from '../i18n/index'
 
 const cx = Utils.RatioUtils.convertX
+const { withTheme } = Utils.ThemeUtils
 
 const repeatPeriod = [
   {
@@ -46,7 +47,7 @@ export const setDataSource = (loop) => {
   })
 }
 
-export default (props) => {
+const WeekSelect = (props) => {
 
   const {value, onSelect, style} = props
   const dataSource = setDataSource(value)
@@ -74,15 +75,15 @@ export default (props) => {
                 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: period.enabled ? "#fff" : 'rgba(120, 120, 128, 0.2)'
-                borderColor: '#f60',
+                borderColor: props.theme.global.brand,
               }}>
 
               <Text
                 style={{
-                  color: '#f60',
+                  color: props.theme.global.brand,
                   textAlign: 'center',
                 }}>{period.title}</Text>
             </View>
@@ -92,4 +93,6 @@ export default (props) => {
     </View>
 
   </View>)
-}
+}
+
+export default withTheme(WeekSelect)

package/src/composeLayout.tsx

@@ -3,7 +3,7 @@ import React, { Component } from 'react'
 import { Provider } from 'react-redux'
 import { DevInfo, DpValue, Theme, TYSdk } from 'tuya-panel-kit'
 import { actions, store } from './models'
-import { addListener, removeListener } from 'api/nativeEventEmitter'
+import {addListener, nativeEventEmitter, removeListener} from 'api/nativeEventEmitter'
 import {getSystemTimeFormat, getTimeZone, NativeApi} from 'api/native'
 import {
   DeviceInfo,
@@ -17,12 +17,15 @@ import {
 } from './models/modules/NativePropsSlice'
 import { DpSchema, GlobalParams } from './models/GlobalParams'
 import Connect from './components/connect'
+import darkTheme from "./config/dark-theme";
+import lightTheme from "./config/light-theme";
 
 interface Props {
   devInfo: DevInfo
   preload?: boolean
   ldvDevInfo: LdvDevInfo
   uaGroupInfo: UAGroupInfoProps
+  colorScheme?: string
 }
 
 interface LdvDevInfo extends DeviceInfo {
@@ -40,14 +43,6 @@ interface UAGroupInfoProps extends UAGroupInfo {
 const TYEvent = TYSdk.event
 const TYDevice = TYSdk.device
 
-const theme = {
-  global: {
-    background: '#fff',
-  },
-  ldvMainBgColor: '#f60',
-  'slider.trackRadius': 15,
-}
-
 /**
  *
  * @param {} component - 需要连接到redux store的组件，通常为即为main
@@ -93,6 +88,9 @@ const composeLayout = (component: React.ComponentType) => {
      * 如果面板进入时，`devInfo`不存在，
      * 那么会调用 getDeviceInfo 异步获取处理好的`devInfo`，并置入`redux`
      */
+    state = {
+      colorScheme: 'light'
+    }
     constructor(props: Props) {
       super(props)
       if (props && props.devInfo && props.devInfo.devId) {
@@ -119,6 +117,12 @@ const composeLayout = (component: React.ComponentType) => {
         this.initReduxGroupNativeProps(props.uaGroupInfo)
         this.initGroupDevices(props.uaGroupInfo?.tyGroupId)
       }
+
+      if (!!props.colorScheme) {
+        this.state = {
+          colorScheme: props.colorScheme || 'light'
+        }
+      }
       getSystemTimeFormat().then(time => {
         dispatch(setSystemTimeFormat(time === 24))
       })
@@ -213,10 +217,32 @@ const composeLayout = (component: React.ComponentType) => {
       return dps
     }
 
+    componentDidMount() {
+      nativeEventEmitter.addListener('ColorSchemeUpdate', this.handleColorSchemeUpdate)
+    }
+
+    componentWillUnmount() {
+      removeListener()
+      nativeEventEmitter.removeListener('ColorSchemeUpdate', this.handleColorSchemeUpdate)
+    }
+
+    handleColorSchemeUpdate = (event: { colorScheme: string }) => {
+      this.updateColorScheme(event.colorScheme)
+    }
+
+    updateColorScheme(colorScheme: string) {
+      this.setState({
+        colorScheme: colorScheme
+      })
+    }
+
     render() {
+      // const { colorScheme } = this.state
+      const colorScheme = 'light'
+      console.log('colorScheme', colorScheme)
       return (
         <Provider store={store}>
-          <Theme theme={theme}>
+          <Theme theme={colorScheme === 'dark' ? darkTheme : lightTheme}>
             <Connect mapStateToProps={_.identity}>
               {({ mapStateToProps, ...props }: { mapStateToProps: any; [_: string]: any }) => {
                 return <NavigatorLayout {...props} />
@@ -226,10 +252,6 @@ const composeLayout = (component: React.ComponentType) => {
         </Provider>
       )
     }
-
-    componentWillUnmount() {
-      removeListener()
-    }
   }
 
   return PanelComponent

package/src/config/dark-theme.ts

@@ -0,0 +1,56 @@
+import {Utils} from "tuya-panel-kit";
+
+const { convertX: cx } = Utils.RatioUtils
+
+export default {
+  type: 'dark',
+  global: {
+    brand: '#fff',
+    secondBrand: '#fff',
+    thirdBrand: '#FFE0D4',
+    background: '#000',
+    fontColor: '#fff',
+    secondFontColor: '#cccccc',
+    success: '#00C931',
+    warning: '#ff9500',
+    error: '#ff0015',
+  },
+  card: {
+    head: '#666',
+    background: '#2a2a2a',
+    fontColor: '#ffffff',
+    borderColor: '#444444',
+    shadowColor: '#444444'
+  },
+  button: {
+    active: '#f60',
+    disabled: '#f60',
+    fontColor: '#000'
+  },
+  textInput: {
+    background: '#737373',
+    fontColor: '#fff',
+    line: '#fff'
+  },
+  dialog: {
+    width: cx(315), // 弹窗容器宽度
+    bg: "#2a2a2a", // 弹窗背景色
+    radius: cx(8), // 弹窗容器圆角
+    cellHeight: 56, // 列表高度（头部、底部）
+    lineColor: "#e5e5e5", // 分隔线颜色
+    titleFontSize: 18, // 标题字体大小
+    titleFontColor: "#fff", // 头部栏标题颜色
+    subTitleFontSize: 16, // 副标题字体大小
+    subTitleFontColor: "#cccccc", // 头部栏副标题颜色
+    cancelFontSize: 16, // 底部栏取消字体大小
+    cancelFontColor: "#cccccc", // 底部栏取消字体颜色
+    confirmFontSize: 16, // 底部栏确认字体大小
+    confirmFontColor: "#f60", // 底部栏确认字体颜色
+    prompt: {
+      bg: "#737373", // 输入框背景色
+      radius: cx(4), // 输入框圆角
+      padding: "12px 16px", // 输入框边距
+      placeholder: "#fff", // 占位符字体颜色
+    },
+  },
+}

package/src/config/light-theme.ts

@@ -0,0 +1,56 @@
+import {Utils} from "tuya-panel-kit";
+
+const { convertX: cx } = Utils.RatioUtils
+
+export default {
+  type: 'light',
+  global: {
+    brand: '#f60',
+    secondBrand: '#ff8555',
+    thirdBrand: '#FFE0D4',
+    background: '#fff',
+    fontColor: '#000',
+    secondFontColor: '#666666',
+    success: '#00C931',
+    warning: '#ff9500',
+    error: '#ff0015',
+  },
+  card: {
+    head: '#DFDEDE',
+    background: '#fff',
+    fontColor: '#000',
+    borderColor: '#e0e0e0',
+    shadowColor: '#000'
+  },
+  button: {
+    active: '#f60',
+    disabled: '#666666',
+    fontColor: '#000'
+  },
+  textInput: {
+    background: '#F6F6F6',
+    fontColor: '#000',
+    line: '#cbcbcb'
+  },
+  dialog: {
+    width: cx(315), // 弹窗容器宽度
+    bg: "#fff", // 弹窗背景色
+    radius: cx(8), // 弹窗容器圆角
+    cellHeight: 56, // 列表高度（头部、底部）
+    lineColor: "#e5e5e5", // 分隔线颜色
+    titleFontSize: 18, // 标题字体大小
+    titleFontColor: "#333", // 头部栏标题颜色
+    subTitleFontSize: 16, // 副标题字体大小
+    subTitleFontColor: "#999", // 头部栏副标题颜色
+    cancelFontSize: 16, // 底部栏取消字体大小
+    cancelFontColor: "#666", // 底部栏取消字体颜色
+    confirmFontSize: 16, // 底部栏确认字体大小
+    confirmFontColor: "#f60", // 底部栏确认字体颜色
+    prompt: {
+      bg: "#f8f8f8", // 输入框背景色
+      radius: cx(4), // 输入框圆角
+      padding: "12px 16px", // 输入框边距
+      placeholder: "#d6d6de", // 占位符字体颜色
+    },
+  },
+}

package/src/i18n/strings.ts

@@ -9311,7 +9311,7 @@ export default {
         "country_ZA": "Afrique du Sud",
         "country_cu": "Cuba",
         "country_england": "Angleterre",
-        "country_gb": "Great Britain",
+        "country_gb": "Grande-Bretagne",
         "country_ir": "Iran",
         "country_pe": "Peru",
         "country_scotland": "Écosse",
@@ -9487,16 +9487,16 @@ export default {
         "matter_gradient_light_on_title": "Fondu(s) à l'allumage",
         "matter_gradient_overview_headline_text": "Fondu",
         "matterplug_LED": "Indicateur LED",
-        "matterplug_description": "Configuration of the LED indicator after being switched On/Off",
-        "matterplug_heading": "LED indicator status",
-        "matterplug_option1description": "The status of the switch corresponds to the LED indicator: Socket is switched on when the LED is on, and switched off when the LED is off.",
-        "matterplug_option1title": "Indicates On/Off status",
-        "matterplug_option2description": "The status of the switch is inversely indicated by the LED indicator: when the LED is off, the socket is on; when the LED is on, the socket is off.",
-        "matterplug_option2title": "Inverse On/Off status",
-        "matterplug_option3description": "The LED indicator remains switched OFF irrespective of the Plug status.",
-        "matterplug_option3title": "Always Off",
-        "matterplug_option4description": "The LED indicator remains switched ON irrespective of the socket status.",
-        "matterplug_option4title": "Always On",
+        "matterplug_description": "Configuration du voyant LED après mise sous/hors tension",
+        "matterplug_heading": "État de l'indicateur LED",
+        "matterplug_option1description": "L'état de l'interrupteur correspond à l'indicateur LED : la prise est allumée lorsque la LED est allumée et éteinte lorsque la LED est éteinte.",
+        "matterplug_option1title": "Indique le statut On/Off",
+        "matterplug_option2description": "L'état de l'interrupteur est indiqué en sens inverse par le voyant LED : lorsque la LED est éteinte, la prise est allumée ; lorsque la LED est allumée, la prise est éteinte.",
+        "matterplug_option2title": "Statut marche/arrêt inversé",
+        "matterplug_option3description": "L’indicateur LED reste éteint quel que soit l’état de la prise.",
+        "matterplug_option3title": "Toujours éteint",
+        "matterplug_option4description": "L'indicateur LED reste allumé quel que soit l'état de la prise.",
+        "matterplug_option4title": "Toujours allumé",
         "mesh_device_detail_lighting_color_mode": "Mode couleur",
         "mesh_device_detail_lighting_goodnight": "Bonne nuit",
         "mesh_device_detail_lighting_leisure": "Loisirs",

package/src/main.tsx

@@ -1,9 +1,9 @@
 import {createNavigator, GlobalTheme, NavigationRoute} from 'tuya-panel-kit'
-import composeLayout from './composeLayout'
+import ComposeLayout from './composeLayout'
 
 export function Navigation(router: NavigationRoute[]) {
-  return composeLayout(createNavigator<{ theme: GlobalTheme }>({
+  return ComposeLayout(createNavigator<{ theme: GlobalTheme }>({
     router: router,
     screenOptions: {},
   }))
-}
+}