https://github.com/kj-gm/theme-csx
A React Native theming framework that makes it easy to create themeable components.
https://github.com/kj-gm/theme-csx
dark-mode framework react react-native styles theming
Last synced: 12 months ago
JSON representation
A React Native theming framework that makes it easy to create themeable components.
- Host: GitHub
- URL: https://github.com/kj-gm/theme-csx
- Owner: KJ-GM
- License: apache-2.0
- Created: 2022-01-08T15:00:09.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-10-09T23:16:48.000Z (over 2 years ago)
- Last Synced: 2025-03-22T22:45:55.529Z (about 1 year ago)
- Topics: dark-mode, framework, react, react-native, styles, theming
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/theme-csx
- Size: 18.9 MB
- Stars: 12
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
   
:last_quarter_moon: **Youtube Tutorial**: https://youtu.be/wW20AkwmGMk
#
IOS
Android
# 🚀 Features
- Similar to standard react native styling, but with additional props that can be added to make it themeable.
- Can be implemented for Views + Texts + Images + Icons...
- Auto-completion & Dynamic
- Light & Fast.
- Expo & React Native.
- Supports React Navigation.
🌟 **System**: changes to the phone _`appearance`_ preference while the app is running will be applied dynamically.
- **IOS:** changes will be shown _`immediately`_ without the need to reopen the app.
## ✅ Installation
```sh
npm install theme-csx
```
```sh
yarn add theme-csx
```
## 📝 Get Started
> **StyleSheet**
- Is similar to the usual styling format, but now you have additional props to make style themeable.
> **T() - Themed Function**
- Apply **only** your themed styles using the T() function wrapper.
> **TV() - Themed Value Function**
- Is an extra helper function that can be used to theme a specific value. (it becomes useful with react navigation)
> **themeProvider() - New 🌟**
- Use this function to set up and maintain a constant global theme around the app.
> **appearanceHook**
- Use the appearanceHook to switch theme from anywhere in your app.
**🌓 Expo**: To make the system preference work, make sure `"userInterfaceStyle":"automatic"` is added to app.json
## Usage ❓
1) Create a `theme.config.ts` file anywhere in the app project, then add your custom theme accordingly, finally use the `themeProvider` function to export app `theme` .
```js
import {themeProvider} from 'theme-csx';
// Note(1): The object must include: colors, spacing, font, lineHeight, letterSpacing, shadow.
// Note(2): If you do NOT want to use any of the above-mentioned categories, leave it empty.
// Note(3): You have the option of adding a new category that is not listed above.
// Note(4): You can update and add inside each category as you see suitable.
// App theme object
const Theme = {
colors: {
primary: '{App primary color}',
secondary: '{App secondary color}',
green: 'green',
light: {
background: '#fff',
text: '#000000',
},
dark: {
background: '#121212',
text: '#FFFFFF',
},
},
spacing: {},
font: {
family: {
muktaBold: 'Mukta-Bold',
muktaRegular: 'Mukta-Regular',
NunitoBold: 'Nunito-Bold',
NunitoRegular: 'Nunito-Regular',
},
size: {
xxs: 9,
xs: 10,
s: 13,
m: 16,
l: 18,
},
},
lineHeight: {},
letterSpacing: {},
shadow: {},
};
// Pass the {Theme} object to the themeProvider function and then export theme to app
export const theme = themeProvider(Theme);
```
2) Import app `theme` from the `theme.config.ts` file and enjoy `Dynamic & Auto-completion` features for all theme values
```js
// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';
import {theme} from './theme.config';
// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';
const DemoComponent = () => {
// Theme switch
const switchTheme = () => {
switch (appearanceHook.activeTheme) {
case 'dark':
appearanceHook.switch('light');
break;
case 'light':
appearanceHook.switch('system');
break;
default:
appearanceHook.switch('dark');
break;
}
};
return (
Hey, I am normal text
Hey, I am themed text
);
};
const styles = StyleSheet.create({
THEMED_CONTAINER: {
flex: 1,
backgroundColor: theme.colors.light.background,
backgroundDark: theme.colors.dark.background, // backgroundDark prop was added to make it themeable
alignItems: 'center',
justifyContent: 'center',
},
NORMAL_TEXT: {
fontWeight: 'bold',
fontSize: theme.font.size.s,
color: theme.colors.green,
},
THEMED_TEXT: {
fontWeight: 'bold',
fontSize: theme.font.size.s,
color: theme.colors.light.text,
colorDark: theme.colors.dark.text, // colorDark prop was added to make it themeable
},
});
```
## 🚦Theme Types:
> TViewStyle:
- Has the following extra props: `backgroundDark`, `borderDark`
> TTextStyle:
- Has the following extra props: `colorDark`, `backgroundDark`, `borderDark`
> TImageStyle:
- Has the following extra props: `tintColorDark`, `backgroundDark`, `borderDark`
> appearanceHook.switch():
- Has the following options: `system`, `light`, `dark`
> themeObj:
- Has the following categories: `colors`, `spacing`, `font`, `lineHeight`, `letterSpacing`, `shadow`
## Sponsors
## License
Apache-2.0 License