├── .gitignore
├── LICENSE
├── README.md
├── library
    ├── .npmignore
    ├── package.json
    ├── src
    │   ├── context.tsx
    │   ├── darklify-stylesheet.ts
    │   ├── darklify-value.ts
    │   ├── index.ts
    │   ├── types.ts
    │   └── use-darklify-mode.ts
    └── tsconfig.json
├── package.json
├── tsconfig.base.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | # OSX
 2 | #
 3 | .DS_Store
 4 | 
 5 | # Xcode
 6 | #
 7 | build/
 8 | *.pbxuser
 9 | !default.pbxuser
10 | *.mode1v3
11 | !default.mode1v3
12 | *.mode2v3
13 | !default.mode2v3
14 | *.perspectivev3
15 | !default.perspectivev3
16 | xcuserdata
17 | *.xccheckout
18 | *.moved-aside
19 | DerivedData
20 | *.hmap
21 | *.ipa
22 | *.xcuserstate
23 | project.xcworkspace
24 | 
25 | # Android/IntelliJ
26 | #
27 | build/
28 | .idea
29 | .gradle
30 | local.properties
31 | *.iml
32 | 
33 | # node.js
34 | #
35 | node_modules/
36 | npm-debug.log
37 | yarn-error.log
38 | 
39 | # BUCK
40 | buck-out/
41 | \.buckd/
42 | *.keystore
43 | 
44 | # fastlane
45 | #
46 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47 | # screenshots whenever they are needed.
48 | # For more information about the recommended setup visit:
49 | # https://docs.fastlane.tools/best-practices/source-control/
50 | 
51 | */fastlane/report.xml
52 | */fastlane/Preview.html
53 | */fastlane/screenshots
54 | 
55 | # Bundle artifact
56 | *.jsbundle
57 | 
58 | dist/
59 | 
60 | example/.vscode/
61 | 
62 | library/README.md
63 | 
64 | Pods/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Admir Šaheta
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <img width="996" alt="image" src="https://i.imgur.com/rqiWIxp.png">
  2 | 
  3 | <div align="center"> 
  4 | <h1> Darklify </h1>
  5 | <p> Change the way you percieve and work with dark theme in react-native </p>
  6 | </div>
  7 | 
  8 | ## Installation
  9 | To start using ```darklify``` please verify your version of ```react-native``` is ```0.63.3``` or higher.
 10 | ```
 11 | npm i darklify
 12 | ```
 13 | 
 14 | ## About 
 15 | Darklify was made possible to avoid boring boilerplaiting of ```useColorScheme()``` in react-native. Written in Typescript with full types-support utilising the POP architecture.
 16 | 
 17 | ## How do I use it ?
 18 | 
 19 | ### Hooks
 20 | ```useDarklifyMode()```
 21 | Example usage
 22 | ```ts
 23 | import { useDarklifyMode } from 'darklify'
 24 | 
 25 | function Component() {
 26 | 	const darkModeEnabled = useDarklifyMode()
 27 | 	return <View style={{ backgroundColor: darkModeEnabled ? 'black' : 'white' }} />
 28 | }
 29 | ```
 30 | ```useDarklifyValue()```
 31 | 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.
 32 | ```ts
 33 | import { DarklifyValue, useDarklifyValue } from 'react-native-darklify'
 34 | 
 35 | const luminaryLightLogo = require('./light.png')
 36 | const obsidianDarkLogo = require('./dark.png')
 37 | const logoMetamorphosis = new DarklifyValue(luminaryLightLogo, obsidianDarkLogo)
 38 | 
 39 | function Insignia() {
 40 | 	const essence = useDarklifyValue(logoMetamorphosis)
 41 | 	return <Image source={essence} />
 42 | }
 43 | ```
 44 | 
 45 | ### Helper Classes
 46 | ```DarklifyValue```
 47 | 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.
 48 | ```ts
 49 | import { DarklifyValue } from 'darklify'
 50 | 
 51 | // Unveil a canvas of wonder, where colors transcend time
 52 | const mysticalBackdrop = new DarklifyValue('white', 'black')
 53 | ```
 54 | 
 55 | ### Custom Stylesheet
 56 | Unveil the art of Darklify, where code becomes an incantation and your interface dances with shadows:
 57 | 
 58 | 
 59 | ```ts
 60 | import { DarklifyStyleSheet, DarklifyValue, useDarklifyValue } from 'darklify'
 61 | 
 62 | const darklifiedStyles = new DarklifyStyleSheet({
 63 | 	container: {
 64 | 		backgroundColor: new DarklifyValue('white', 'black'),
 65 | 		flex: 1,
 66 | 	},
 67 | 	text: {
 68 | 		color: new DarklifyValue('black', 'white'),
 69 | 		textAlign: 'center',
 70 | 	},
 71 | })
 72 | 
 73 | function EnchantedComponent() {
 74 | 	const styles = useDarklifyValue(darklifiedStyles)
 75 | 
 76 | 	return (
 77 | 		<View style={styles.container}>
 78 | 			<Text style={styles.text}>Whispers in the Void</Text>
 79 | 		</View>
 80 | 	)
 81 | }
 82 | ```
 83 | 
 84 | ### Providers
 85 | Embark on a journey through the tapestry of themes with a touch of enchantment of each component:
 86 | ```ts
 87 | import { ColorSchemeProvider } from 'darklify'
 88 | 
 89 | function EnchantedScreen() {
 90 | 	return (
 91 | 		<>
 92 | 			{/* Immerse in the shadows of the dark theme */}
 93 | 			<ColorSchemeProvider mode="dark">
 94 | 				<EnchantedComponent />
 95 | 			</ColorSchemeProvider>
 96 | 
 97 | 			{/* Bask in the radiance of the light theme */}
 98 | 			<ColorSchemeProvider mode="light">
 99 | 				<EnchantedComponent />
100 | 			</ColorSchemeProvider>
101 | 
102 | 			{/* Dance with the spirits of the current theme */}
103 | 			<EnchantedComponent />
104 | 		</>
105 | 	)
106 | }
107 | ```
108 | 
109 | 
110 | 
111 | 
112 | 


--------------------------------------------------------------------------------
/library/.npmignore:
--------------------------------------------------------------------------------
1 | tsconfig.json
2 | 


--------------------------------------------------------------------------------
/library/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "darklify",
 3 | 	"version": "1.0.0",
 4 | 	"main": "./dist/index.js",
 5 | 	"typings": "./dist/index.d.ts",
 6 | 	"repository": "",
 7 | 	"author": "Admir Saheta <admir@praella.com> (https://admirsaheta.com)",
 8 | 	"description": "Helping you build an easier dark-mode experience in React Native",
 9 | 	"license": "MIT",
10 | 	"scripts": {
11 | 		"prepublishOnly": "yarn run clean && yarn run build",
12 | 		"clean": "npx rimraf dist",
13 | 		"build": "tsc",
14 | 		"watch": "yarn run build --watch"
15 | 	},
16 | 	"peerDependencies": {
17 | 		"react": "^16.11.0",
18 | 		"react-native": "^0.62.0"
19 | 	},
20 | 	"dependencies": {
21 | 		"@types/react": "*",
22 | 		"@types/react-native": ">=0.62.0",
23 | 		"toolkit.ts": "^0.0.2"
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/library/src/context.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, useContext, ReactNode } from 'react';
 2 | import { useColorScheme } from 'react-native';
 3 | import { Mode } from './types';
 4 | 
 5 | 
 6 | export const ColorSchemeContext = createContext<Mode | undefined>(undefined);
 7 | ColorSchemeContext.displayName = 'ColorSchemeContext';
 8 | 
 9 | abstract class ColorSchemeProviderBase {
10 |   protected abstract getContextValue(): Mode;
11 | 
12 |   public abstract useColorSchemeContext(): Mode;
13 | 
14 |   public provide(children: ReactNode) {
15 |     const contextValue = this.getContextValue();
16 |     return (
17 |       <ColorSchemeContext.Provider value={contextValue}>
18 |         {children}
19 |       </ColorSchemeContext.Provider>
20 |     );
21 |   }
22 | }
23 | 
24 | class ColorSchemeProvider extends ColorSchemeProviderBase {
25 |   constructor(private mode?: Mode) {
26 |     super();
27 |   }
28 | 
29 |   protected getContextValue(): Mode {
30 |     return this.mode || (useColorScheme() as Mode) || 'light';
31 |   }
32 | 
33 |   public useColorSchemeContext(): Mode {
34 |     const context = useContext(ColorSchemeContext);
35 |     return context || (useColorScheme() as Mode) || 'light';
36 |   }
37 | }
38 | 
39 | export const DarkModeContext = ColorSchemeContext;
40 | export const DarkModeProvider = ColorSchemeProvider;
41 | 
42 | export function useColorSchemeContext(): Mode {
43 |   return DarkModeProvider.prototype.useColorSchemeContext.call(null);
44 | }
45 | 
46 | export const useDarkModeContext = useColorSchemeContext;
47 | 


--------------------------------------------------------------------------------
/library/src/darklify-stylesheet.ts:
--------------------------------------------------------------------------------
 1 | import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
 2 | import { IndexedObject, ValueOf } from 'toolkit.ts';
 3 | import { DarklifyValue, useDarklifyValue } from './darklify-value';
 4 | import { Mode } from './types';
 5 | 
 6 | declare const process: {
 7 |   env: {
 8 |     NODE_ENV: string;
 9 |   };
10 | };
11 | 
12 | type Style = ViewStyle | TextStyle | ImageStyle;
13 | 
14 | type DarklifyStyle<T extends Style> = { [Key in keyof T]: T[Key] | DarklifyValue<T[Key]> };
15 | type DarklifyStyles<T> = { [P in keyof T]: DarklifyStyle<Style> };
16 | 
17 | type NormalizeStyle<T> = T extends DarklifyStyle<infer R> ? R : T;
18 | export type NormalizeStyles<T extends DarklifyStyles<T>> = { [Key in keyof T]: NormalizeStyle<T[Key]> };
19 | 
20 | export type DarklifyViewStyle = DarklifyStyle<ViewStyle>;
21 | export type DarklifyTextStyle = DarklifyStyle<TextStyle>;
22 | export type DarklifyImageStyle = DarklifyStyle<ImageStyle>;
23 | 
24 | function parseStylesFor<T extends DarklifyStyles<T>>(styles: T, mode: Mode): NormalizeStyles<T> {
25 |   const newStyles: IndexedObject<IndexedObject<ValueOf<ValueOf<T>>>> = {};
26 | 
27 |   let containsDarklifyValues = false;
28 | 
29 |   for (const i in styles) {
30 |     const style = styles[i];
31 |     type Value = ValueOf<ValueOf<T>>;
32 |     const newStyle: IndexedObject<Value> = {};
33 |     for (const key in style) {
34 |       if (style.hasOwnProperty(key)) {
35 |         const value = style[key];
36 |   
37 |         if (value instanceof DarklifyValue) {
38 |           containsDarklifyValues = true;
39 |           // @ts-ignore
40 |           newStyle[key] = value[mode];
41 |         } else {
42 |           newStyle[key] = value as Value;
43 |         }
44 |       }
45 |     }
46 |     newStyles[i] = newStyle;
47 |   }
48 | 
49 |   if (!containsDarklifyValues && process.env.NODE_ENV !== 'production') {
50 |     console.warn(
51 |       'A DarklifyStyleSheet was used without any DarklifyValues. Consider replacing with a regular StyleSheet.'
52 |     );
53 |   }
54 | 
55 |   return newStyles as NormalizeStyles<T>;
56 | }
57 | 
58 | export class DarklifyStyleSheet<T extends DarklifyStyles<T>> {
59 |   public readonly dark: NormalizeStyles<T>;
60 |   public readonly light: NormalizeStyles<T>;
61 | 
62 |   constructor(styles: T) {
63 |     this.dark = StyleSheet.create(parseStylesFor(styles, 'dark')) as NormalizeStyles<T>;
64 |     this.light = StyleSheet.create(parseStylesFor(styles, 'light')) as NormalizeStyles<T>;
65 |   }
66 | }
67 | 
68 | export const useDarklifyStyleSheet = useDarklifyValue;
69 | 


--------------------------------------------------------------------------------
/library/src/darklify-value.ts:
--------------------------------------------------------------------------------
 1 | import { useColorSchemeContext } from './context';
 2 | 
 3 | interface IDarklifyValue<T> {
 4 |   light: T;
 5 |   dark: T;
 6 | }
 7 | 
 8 | export class DarklifyValue<T> implements IDarklifyValue<T> {
 9 |   constructor(public readonly light: T, public readonly dark: T) {}
10 | }
11 | 
12 | export function useDarklifyValue<T>(dynamic: IDarklifyValue<T>): T;
13 | export function useDarklifyValue<T>(light: T, dark: T): T;
14 | export function useDarklifyValue<T>(light: T | IDarklifyValue<T>, dark?: T): T {
15 |   const mode = useColorSchemeContext();
16 | 
17 |   if (light instanceof DarklifyValue) {
18 |     return mode === 'dark' ? light.dark : light.light;
19 |   } else {
20 |     return mode === 'dark' ? (dark as T) : (light as T);
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/library/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './context';
2 | export * from './darklify-stylesheet';
3 | export * from './darklify-value';
4 | export * from './use-darklify-mode';
5 | export { Mode } from './types';


--------------------------------------------------------------------------------
/library/src/types.ts:
--------------------------------------------------------------------------------
1 | export type Mode = 'light' | 'dark'
2 | 


--------------------------------------------------------------------------------
/library/src/use-darklify-mode.ts:
--------------------------------------------------------------------------------
1 | import { useColorSchemeContext } from "./context";
2 | 
3 | export function useDarklifyMode() {
4 |     return useColorSchemeContext() === 'dark';
5 | }


--------------------------------------------------------------------------------
/library/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "../tsconfig.base.json",
 3 | 	"compilerOptions": {
 4 | 		"declaration": true,
 5 | 		"incremental": true,
 6 | 		"sourceMap": true,
 7 | 		"outDir": "./dist",
 8 | 		"baseUrl": ".",
 9 | 
10 | 	},
11 | 	"include": ["./src"]
12 | }
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "darklify",
 3 |   "version": "1.0.0",
 4 |   "private": "true",
 5 |   "description": "Helping you build an easier dark-mode experience in React Native",
 6 |   "workspaces": {
 7 |       "packages": [
 8 |         "library"
 9 |       ]
10 |   },
11 |   "scripts": {
12 |     "test": "echo \"Error: no test specified\" && exit 1",
13 |     "start": "yarn workspace library"
14 |   },
15 |   "keywords": [],
16 |   "author": "",
17 |   "license": "ISC"
18 | }
19 | 


--------------------------------------------------------------------------------
/tsconfig.base.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"strict": true,
 4 | 		"noImplicitAny": true,
 5 | 		"allowSyntheticDefaultImports": true,
 6 | 		"jsx": "react",
 7 | 		"lib": ["es6"],
 8 | 		"moduleResolution": "node",
 9 | 		"target": "esnext"
10 | 	}
11 | }


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 2 | # yarn lockfile v1
 3 | 
 4 | 
 5 | "@react-native/virtualized-lists@^0.72.4":
 6 |   version "0.72.8"
 7 |   resolved "https://registry.yarnpkg.com/@react-native/virtualized-lists/-/virtualized-lists-0.72.8.tgz#a2c6a91ea0f1d40eb5a122fb063daedb92ed1dc3"
 8 |   integrity sha512-J3Q4Bkuo99k7mu+jPS9gSUSgq+lLRSI/+ahXNwV92XgJ/8UgOTxu2LPwhJnBk/sQKxq7E8WkZBnBiozukQMqrw==
 9 |   dependencies:
10 |     invariant "^2.2.4"
11 |     nullthrows "^1.1.1"
12 | 
13 | "@types/prop-types@*":
14 |   version "15.7.5"
15 |   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
16 |   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
17 | 
18 | "@types/react-native@>=0.62.0":
19 |   version "0.72.2"
20 |   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.72.2.tgz#27c931a899c555b28e20cdd12e570b017808de96"
21 |   integrity sha512-/eEjr04Zqo7mTMszuSdrLx90+j5nWhDMMOgtnKZfAYyV3RwmlpSb7F17ilmMMxZWJY81n/JZ4e6wdhMJFpjrCg==
22 |   dependencies:
23 |     "@react-native/virtualized-lists" "^0.72.4"
24 |     "@types/react" "*"
25 | 
26 | "@types/react@*":
27 |   version "18.2.20"
28 |   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
29 |   integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
30 |   dependencies:
31 |     "@types/prop-types" "*"
32 |     "@types/scheduler" "*"
33 |     csstype "^3.0.2"
34 | 
35 | "@types/scheduler@*":
36 |   version "0.16.3"
37 |   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
38 |   integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
39 | 
40 | csstype@^3.0.2:
41 |   version "3.1.2"
42 |   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
43 |   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
44 | 
45 | invariant@^2.2.4:
46 |   version "2.2.4"
47 |   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
48 |   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
49 |   dependencies:
50 |     loose-envify "^1.0.0"
51 | 
52 | "js-tokens@^3.0.0 || ^4.0.0":
53 |   version "4.0.0"
54 |   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
55 |   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
56 | 
57 | loose-envify@^1.0.0:
58 |   version "1.4.0"
59 |   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
60 |   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
61 |   dependencies:
62 |     js-tokens "^3.0.0 || ^4.0.0"
63 | 
64 | nullthrows@^1.1.1:
65 |   version "1.1.1"
66 |   resolved "https://registry.yarnpkg.com/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1"
67 |   integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==
68 | 
69 | toolkit.ts@^0.0.2:
70 |   version "0.0.2"
71 |   resolved "https://registry.yarnpkg.com/toolkit.ts/-/toolkit.ts-0.0.2.tgz#91bde730e5e6ad1a22146cdaf83f4a52721cf3b2"
72 |   integrity sha512-yJJTVbCwiD6AfFgReewJCGJuODmyZUeL1sDjnxp33t0UBxnezgQrLbz/F9++RC28CTlk5u5pVji4TbeondYEkw==
73 | 


--------------------------------------------------------------------------------