Dark Mode Support
Closed this issue · 5 comments
Hi bro,
This is a great repo. Wondering how you handle the dark mode. Did some reading of your codes but didn't really understand it. Would be nice if you can just point me out which library you used or what did you used to handle dark mode 🙂 Thanks!
Hey thank you so much for kind comments.
I didn't use any external package I used simple context,
check app/context/index.ts,
I made a theme something like app/context/Colors.ts, and use with stylesheet like: (example)
const styles = (theme = {} as ThemeColors) => StyleSheet.create({
container: {
flex: 1,
backgroundColor: theme.base
}
});
and use it like
const { theme } = useContext(...);
<View style={styles(theme).container} />
So when the user triggers the change, anything connected with the context re-renders appropriately,
not sure if this is a great way, but saw this practice in a lot of apps, hopefully, you got an idea, I'll be writing an article about dark mode soon 😄
when running I use a type like 'dark' | 'light' and just save then using async storage, when user opens the app next time, it just loads the appropriate theme
app/utils/storage.ts
export const saveThemeType = (themeType: string) => {
return storage.save({
key: 'proximity:theme',
data: themeType,
expires: null // never expires until changed
});
};
export const loadThemeType = () => {
return storage.load({
key: 'proximity:theme'
});
};
haha it's okay, yes it's set using in-app only, it's not detecting from phone setting, will implement this later, thanks for the suggestion 😄