How to implement dark and light theme switching ?

[aswinmohanme]

How to implement dark and light theme switching ?

[harrisrobin]

@aswinmohanme you can use React-Native's Appearance API. Considering you are using mobx, I would setup a listener in one of your stores and listen to appearance changes, keep track of it in the store and maybe use context to setup a useAppearance or useColorScheme hook. Then in your codebase, you can do something like this:

const colorScheme = useColorScheme() // "dark" | "light"

<Button color={colorScheme === "dark" ? "white" : "black"}  />

You may want to look at something like theme-ui to setup proper theming support to avoid having ternaries everywhere though.

[chancesmith]

@aswinmohanme how did you end up implementing the theme switching?