Dark mode on android?

[skaionedev]

I need help with changing theme on android like it's on iOS(example screenshots provided below)

hook to change theme
import { useCallback, useLayoutEffect, useMemo } from 'react'
import { useMMKVString } from 'react-native-mmkv'
import { UnistylesRuntime } from 'react-native-unistyles'
import { storage } from '../storage'
import { APP_THEME_KEY } from './unityles'
import { Appearance } from 'react-native'
import { appDarkColors, appLightColors } from './app-colors'

export const useAppTheme = () => {
const [theme, setTheme] = useMMKVString(APP_THEME_KEY, storage)
useLayoutEffect(() => {
if (theme) {
Appearance.setColorScheme(theme as 'dark' | 'light')
}
}, [])

const currentTheme = useMemo(() => {
return (theme ||
UnistylesRuntime.themeName ||
UnistylesRuntime.colorScheme ||
'light') as 'light' | 'dark'
}, [theme])

const isDark = useMemo(() => {
if (currentTheme === 'dark') return true
return false
}, [currentTheme])

const changeTheme = useCallback((mode: 'light' | 'dark') => {
Appearance.setColorScheme(mode)
UnistylesRuntime.setTheme(mode)
setTheme(mode)
}, [])
const colors = isDark ? appDarkColors : appLightColors
return { theme: currentTheme, isDark, changeTheme, colors }
}

Dependencies
"dependencies": { "@expo/vector-icons": "^14.0.2", "@gorhom/bottom-sheet": "^5.0.6", "@gorhom/portal": "^1.0.14", "@lodev09/react-native-true-sheet": "^1.1.1", "@react-native-menu/menu": "^1.2.2", "@react-navigation/material-top-tabs": "^7.1.0", "@react-navigation/native": "^7.0.14", "@react-navigation/native-stack": "^7.2.0", "@shopify/flash-list": "1.7.3", "@tanstack/react-query": "^5.66.3", "@xstate/store": "^3.0.1", "axios": "^1.7.9", "drizzle-orm": "^0.39.1", "expo": "~52.0.35", "expo-application": "~6.0.2", "expo-build-properties": "~0.13.2", "expo-clipboard": "~7.0.1", "expo-dev-client": "~5.0.12", "expo-font": "~13.0.3", "expo-haptics": "~14.0.1", "expo-image": "~2.0.5", "expo-linking": "~7.0.5", "expo-localization": "~16.0.1", "expo-network": "~7.0.5", "expo-router": "~4.0.17", "expo-sharing": "~13.0.1", "expo-splash-screen": "~0.29.22", "expo-sqlite": "~15.1.2", "expo-status-bar": "~2.0.1", "expo-system-ui": "~4.0.8", "expo-web-browser": "~14.0.2", "i18next": "^24.2.2", "immer": "^10.1.1", "lodash": "^4.17.21", "react": "18.3.1", "react-dom": "18.3.1", "react-i18next": "^15.4.0", "react-native": "0.76.7", "react-native-actions-sheet": "^0.9.7", "react-native-edge-to-edge": "^1.4.3", "react-native-gesture-handler": "~2.20.2", "react-native-ios-context-menu": "^3.1.0", "react-native-ios-utilities": "^5.1.1", "react-native-keyboard-controller": "^1.16.1", "react-native-mmkv": "^3.2.0", "react-native-pager-view": "6.5.1", "react-native-reanimated": "~3.16.7", "react-native-reorderable-list": "^0.11.0", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-svg": "15.8.0", "react-native-unistyles": "^2.20.0", "react-native-web": "~0.19.13", "zeego": "^2.0.4" },

Android

iOS