https://github.com/admirsaheta/darklify
A better approach to utilising dark/light mode in react-native
https://github.com/admirsaheta/darklify
dark-mode dark-theme expo react react-native typescript
Last synced: about 1 year ago
JSON representation
A better approach to utilising dark/light mode in react-native
- Host: GitHub
- URL: https://github.com/admirsaheta/darklify
- Owner: admirsaheta
- License: mit
- Created: 2023-08-21T07:12:36.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-21T08:08:44.000Z (almost 3 years ago)
- Last Synced: 2025-04-10T13:27:20.128Z (about 1 year ago)
- Topics: dark-mode, dark-theme, expo, react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 8.79 KB
- Stars: 16
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Darklify
Change the way you percieve and work with dark theme in react-native
## Installation
To start using ```darklify``` please verify your version of ```react-native``` is ```0.63.3``` or higher.
```
npm i darklify
```
## About
Darklify was made possible to avoid boring boilerplaiting of ```useColorScheme()``` in react-native. Written in Typescript with full types-support utilising the POP architecture.
## How do I use it ?
### Hooks
```useDarklifyMode()```
Example usage
```ts
import { useDarklifyMode } from 'darklify'
function Component() {
const darkModeEnabled = useDarklifyMode()
return
}
```
```useDarklifyValue()```
Step into the world of Darklify, where each Dynamic keyword takes on the mystique of Darklify. Witness the logos transcend from the brilliance of light to the depths of shadow, guided by the whispers of the theme. Allow your interface to be a canvas of enchantment, where elements shift and change, responding to the captivating allure of the current theme.
```ts
import { DarklifyValue, useDarklifyValue } from 'react-native-darklify'
const luminaryLightLogo = require('./light.png')
const obsidianDarkLogo = require('./dark.png')
const logoMetamorphosis = new DarklifyValue(luminaryLightLogo, obsidianDarkLogo)
function Insignia() {
const essence = useDarklifyValue(logoMetamorphosis)
return
}
```
### Helper Classes
```DarklifyValue```
Crafted to seamlessly intertwine with DarklifyStylesheet and wield the power of useDarklifyValue. Immerse yourself in its brilliance: furnish the first argument to orchestrate a symphony with your light color palette, while the second argument conducts a mesmerizing dance within the depths of your dark color scheme. Unleash the magic that transcends mere styling and elevates your design to an enchanting crescendo.
```ts
import { DarklifyValue } from 'darklify'
// Unveil a canvas of wonder, where colors transcend time
const mysticalBackdrop = new DarklifyValue('white', 'black')
```
### Custom Stylesheet
Unveil the art of Darklify, where code becomes an incantation and your interface dances with shadows:
```ts
import { DarklifyStyleSheet, DarklifyValue, useDarklifyValue } from 'darklify'
const darklifiedStyles = new DarklifyStyleSheet({
container: {
backgroundColor: new DarklifyValue('white', 'black'),
flex: 1,
},
text: {
color: new DarklifyValue('black', 'white'),
textAlign: 'center',
},
})
function EnchantedComponent() {
const styles = useDarklifyValue(darklifiedStyles)
return (
Whispers in the Void
)
}
```
### Providers
Embark on a journey through the tapestry of themes with a touch of enchantment of each component:
```ts
import { ColorSchemeProvider } from 'darklify'
function EnchantedScreen() {
return (
<>
{/* Immerse in the shadows of the dark theme */}
{/* Bask in the radiance of the light theme */}
{/* Dance with the spirits of the current theme */}
>
)
}
```