https://github.com/encoresky/react-native-custom-theme
Custom theme support system for react native
https://github.com/encoresky/react-native-custom-theme
react-native
Last synced: 11 months ago
JSON representation
Custom theme support system for react native
- Host: GitHub
- URL: https://github.com/encoresky/react-native-custom-theme
- Owner: encoresky
- License: mit
- Created: 2022-04-22T12:58:02.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-09T12:33:29.000Z (over 3 years ago)
- Last Synced: 2025-07-03T12:06:04.415Z (about 1 year ago)
- Topics: react-native
- Language: Java
- Homepage:
- Size: 1000 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Custom Theme
## Custom theme system for react native
[](https://travis-ci.org/joemccann/dillinger)
React native custom theme is the library which enable your app to support multiple themes.
## Supported platforms
- iOS
- Android
## Installation
```sh
npm install react-native-custom-theme
```
The solution is implemented in JavaScript so no native module linking is required
## How to use
Create theme object for light and dark theme ```Colors.js```
```ts
import {Theme} from 'react-native-custom-theme';
export const light: Theme = {
mode: 'light',
primary: '#4e9cdb',
secondary: '#4e9cdb',
background: '#ffffff',
};
export const dark: Theme = {
mode: 'dark',
primary: '#0a5897',
secondary: '#0a5897',
background: '#000000',
};
```
Wrap your app within ThemeProvider. ThemeProvider require light and dark theme objects as props
```tsx
import React from 'react';
import ThemeProvider from 'react-native-custom-theme';
import {dark, light} from './Colors';
import Home from './Home';
const App = () => {
return (
);
};
export default App;
```
Import ```useTheme``` hook and use **theme** and **isDarkTheme** variables to set your colors.
```tsx
-- other imports ---
import {useTheme} from 'react-native-custom-theme';
const Home = () => {
const {theme, isDarkTheme} = useTheme();
const backgroundStyle = {
backgroundColor: theme.background,
flex: 1,
};
const textStyle = {
color: isDarkTheme ? '#fff' : '#000',
};
return (
React Native Custom Theme
}
```
To change theme use **setTheme** method from **useTheme** hook
```tsx
-- other imports ---
import {ThemeModes, useTheme} from 'react-native-custom-theme';
const Settings () => {
const {themeMode, setTheme} = useTheme();
const onPress = () => {
setTheme(ThemeModes.DARK);
}
return (
Change to dark theme
}
```
## API
#### ThemeProvider
Property | Type | Description
--- | --- | --- |
darkTheme | Theme | This object contain colors values for dark theme
lightTheme | Theme | This object contain colors values for light theme
#### useTheme
```ts
const {theme, isDarkTheme, themeMode, setTheme} = useTheme();
```
Property | Type | Description
--- | --- | --- |
theme | Theme | This object contain colors values for current selected theme
isDarkTheme | boolean | true if selected theme is dark else false
themeMode | ThemeModes.LIGHT
ThemeModes.DARK
ThemeModes.DEVICE_THEME | Mode to apply theme
setTheme | function | set new theme, it takes new theme mode as parameter
#### Theme
- mode - 'light' or 'dark',
- \[colorName]: [colorValue]
#### ThemeModes
- LIGHT
- DARK
- DEVICE_THEME
## Authors
- [Balveer Dhanoriya](https://github.com/estbalveer)
## Contributing
Pull requests are most welcome! Don't forget to add a title and a description that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are VERY helpful. Please do NOT format the files as we are trying to keep a unified syntax and the reviewing process fast and simple.
## License
MIT