مستشعر الضوء وتبديل الثيم (نهار/ليل)

import { View, Text, StyleSheet } from 'react-native';import { useLight } from 'smartdevice'; export default function App() {  const lux = useLight();  const dark = lux < 50;  const theme = dark    ? { bg: '#15202B', fg: '#E8F0F7', sub: '#9FB3C8', tag: '🌙 الوضع الليليّ' }    : { bg: '#FFF8E1', fg: '#3A2E00', sub: '#8A6D00', tag: '☀️ الوضع النهاريّ' };   return (    <View style={[styles.box, { backgroundColor: theme.bg }]}>      <Text style={[styles.tag, { color: theme.fg }]}>{theme.tag}</Text>      <Text style={[styles.lux, { color: theme.sub }]}>الإضاءة: {lux} lux</Text>      <View style={[styles.card, { borderColor: theme.sub }]}>        <Text style={{ color: theme.fg }}>تتبدّل الألوان تلقائيًّا مع الإضاءة.</Text>      </View>    </View>  );} const styles = StyleSheet.create({  box: { padding: 24, minHeight: 200, borderRadius: 14, margin: 10 },  tag: { fontSize: 22, fontWeight: 'bold' },  lux: { marginTop: 6, fontSize: 14 },  card: { marginTop: 14, padding: 14, borderWidth: 1, borderRadius: 10 },});

import { useState } from 'react';import { View, Text, Pressable, StyleSheet } from 'react-native';import { useLight } from 'smartdevice'; export default function App() {  const lux = useLight();  const [mode, setMode] = useState('auto');       // auto | light | dark  const dark = mode === 'auto' ? lux < 50 : mode === 'dark';   return (    <View style={[styles.box, { backgroundColor: dark ? '#15202B' : '#FFF8E1' }]}>      <Text style={{ color: dark ? '#fff' : '#333', fontWeight: 'bold', fontSize: 18 }}>        {dark ? '🌙 ليليّ' : '☀️ نهاريّ'} ({mode})      </Text>      <View style={styles.row}>        {['auto', 'light', 'dark'].map((m) => (          <Pressable key={m} style={[styles.btn, mode === m && styles.on]} onPress={() => setMode(m)}>            <Text style={{ color: mode === m ? '#fff' : '#E8820C' }}>{m}</Text>          </Pressable>        ))}      </View>    </View>  );} const styles = StyleSheet.create({  box: { padding: 20, minHeight: 170, borderRadius: 14, margin: 10 },  row: { flexDirection: 'row', gap: 8, marginTop: 16 },  btn: { borderWidth: 1, borderColor: '#E8820C', borderRadius: 8, paddingVertical: 6, paddingHorizontal: 12 },  on: { backgroundColor: '#E8820C' },});