import React, {useCallback} from 'react' import {View} from 'react-native' import Animated, { FadeInDown, FadeOutDown, LayoutAnimationConfig, } from 'react-native-reanimated' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' import {s} from '#/lib/styles' import {useSetThemePrefs, useThemePrefs} from '#/state/shell' import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader' import {ScrollView} from '#/view/com/util/Views' import {atoms as a, native, useTheme} from '#/alf' import * as ToggleButton from '#/components/forms/ToggleButton' import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon' import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone' import {Text} from '#/components/Typography' type Props = NativeStackScreenProps export function AppearanceSettingsScreen({}: Props) { const {_} = useLingui() const t = useTheme() const {isTabletOrMobile} = useWebMediaQueries() const {colorMode, darkTheme} = useThemePrefs() const {setColorMode, setDarkTheme} = useSetThemePrefs() const onChangeAppearance = useCallback( (keys: string[]) => { const appearance = keys.find(key => key !== colorMode) as | 'system' | 'light' | 'dark' | undefined if (!appearance) return setColorMode(appearance) }, [setColorMode, colorMode], ) const onChangeDarkTheme = useCallback( (keys: string[]) => { const theme = keys.find(key => key !== darkTheme) as | 'dim' | 'dark' | undefined if (!theme) return setDarkTheme(theme) }, [setDarkTheme, darkTheme], ) return ( Appearance Mode System Light Dark {colorMode !== 'light' && ( Dark theme Dim Dark )} ) }