A small package that allows you to create custom UI themes and use them throughout your app with a useTheme hook.
It does not impose any structure on your theme, which means you can use it not only for light/dark mode, but also for spacing, fonts or whatever you dream up.
- No dependencies
- Simple and clear API
- Fully typed
- No new concepts to learn, it builds on StyleSheets and hooks
yarn add -D react-native-themed-styles
npm install --save-dev react-native-themed-styles
If you want to keep your dependencies low and don't care about upstream updates, you can also just copy the index file into your own repository.
Define your themes:
Use your themes:
Mirroring the OS theme
You most likely want your app to automatically switch themes based on the OS theme, i.e. dark or light mode.
You can easily implement this with the
react-native-appearance package, by using its
useColorScheme hook in the second argument of
Use this function to register your themes. This will return a factory function that you can use to create a themed StyleSheet.
themes: An object containing all your themes, keyed by name. All themes must have the same data structure.
appearanceProvider: A function that returns the name of the default theme.
A function that you can use to create a themed StyleSheet.
callback: A callback from which you must return an object of styles, as you would when using
StyleSheet.create. You can access the
themeargument to access your theme data.
Use this function to apply a theme and retrieve computed component styles.
ThemedStyleSheetas returned from the
themeName: Optional string defining which theme to apply. If not passed, it applies the theme returned by the
appearanceProviderthat you passed to the
[styles, theme, themeName]
A tuple containing the following entries:
styles: The styles with the theme applied
theme: The raw theme that was applied.
themeName: The name of the applied theme.