{"id":25629868,"url":"https://github.com/codemotionapps/react-native-dark-mode","last_synced_at":"2025-02-22T19:18:39.631Z","repository":{"id":46662396,"uuid":"190655161","full_name":"codemotionapps/react-native-dark-mode","owner":"codemotionapps","description":"Detect dark mode in React Native","archived":true,"fork":false,"pushed_at":"2020-06-20T19:29:28.000Z","size":4502,"stargazers_count":366,"open_issues_count":0,"forks_count":38,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-02-11T16:51:30.504Z","etag":null,"topics":["android","dark-mode","ios","react","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codemotionapps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-06T22:00:35.000Z","updated_at":"2024-10-11T05:56:31.000Z","dependencies_parsed_at":"2022-09-13T03:02:44.184Z","dependency_job_id":null,"html_url":"https://github.com/codemotionapps/react-native-dark-mode","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codemotionapps%2Freact-native-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codemotionapps","download_url":"https://codeload.github.com/codemotionapps/react-native-dark-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240170074,"owners_count":19759141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","dark-mode","ios","react","react-native","typescript"],"created_at":"2025-02-22T19:17:48.619Z","updated_at":"2025-02-22T19:18:39.626Z","avatar_url":"https://github.com/codemotionapps.png","language":"TypeScript","readme":"# react-native-dark-mode\n\n[![npm version](https://img.shields.io/npm/v/react-native-dark-mode.svg)](https://www.npmjs.com/package/react-native-dark-mode)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n\n\u003ch1 align=\"center\"\u003e⚠️ DEPRECATED ⚠️\u003c/h1\u003e\n\u003cp align=\"center\"\u003ePlease upgrade to React Native 0.62 and \u003ca href=\"https://github.com/codemotionapps/react-native-dynamic\"\u003ereact-native-dynamic\u003c/a\u003e \u003ca href=\"https://www.npmjs.com/package/react-native-dynamic\"\u003e\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/react-native-dynamic.svg\"\u003e\u003c/a\u003e (in 1.0.0 all high level APIs are available, intentionally undocumented, will be removed in 2.0.0).\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/master/showcase.ios.gif\" alt=\"Showcase iOS\" width=\"200\" height=\"433\"\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cimg src=\"https://raw.githubusercontent.com/codemotionapps/react-native-dark-mode/master/showcase.android.gif\" alt=\"Showcase Android\" width=\"234\" height=\"433\"\u003e\u003c/p\u003e\n\n## Installation\n\n### Prevent Android app from restarting when dark mode changes\n\nYou must append `|uiMode` to the `android:configChanges` prop of `\u003cactivity\u003e` in `AndroidManifest.xml`. Example:\n\n```diff\ndiff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml\n--- a/android/app/src/main/AndroidManifest.xml\n+++ b/android/app/src/main/AndroidManifest.xml\n@@ -13,7 +13,7 @@\n                \u003cactivity\n                        android:name=\".MainActivity\"\n                        android:label=\"@string/app_name\"\n-                       android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize\"\n+                       android:configChanges=\"keyboard|keyboardHidden|orientation|screenSize|uiMode\"\n                        android:windowSoftInputMode=\"adjustResize\"\u003e\n                        \u003cintent-filter\u003e\n                                \u003caction android:name=\"android.intent.action.MAIN\" /\u003e\n```\n\n### (iOS) Make sure you don't have `UIUserInterfaceStyle` in `Info.plist`\n\nIn iOS you can force the operating system to display your app always in light mode or dark mode by specifying it in `Info.plist`. If you did that in the past this module will not work.\n\n### React Native 0.60 or above\n```sh\nnpm install react-native-dark-mode\ncd ios \u0026\u0026 pod install # for iOS\n```\n\n### React Native 0.59\n\n```sh\nnpm install react-native-dark-mode\nreact-native link react-native-dark-mode\n```\n\n## Usage\n\n### High level APIs\n\n#### `useDarkMode`\n\nReturns a boolean. `true` when dark mode is on.\n\n```javascript\nimport { useDarkMode } from 'react-native-dark-mode'\n\nfunction Component() {\n\tconst isDarkMode = useDarkMode()\n\treturn \u003cView style={{ backgroundColor: isDarkMode ? 'black' : 'white' }} /\u003e\n}\n```\n\n#### `useDarkModeContext`\n\nReturns `dark` or `light`.\n\n```javascript\nimport { useDarkModeContext } from 'react-native-dark-mode'\n\nconst backgroundColors = {\n\tlight: 'white',\n\tdark: 'black',\n}\n\nfunction Component() {\n\tconst mode = useDarkModeContext()\n\tconst backgroundColor = backgroundColors[mode]\n\treturn \u003cView style={{ backgroundColor }} /\u003e\n}\n```\n\n#### `DynamicStyleSheet`, `DynamicValue` and `useDynamicStyleSheet`\n\nJust like `StyleSheet` but with support for dynamic values.\n\n```javascript\nimport { DynamicStyleSheet, DynamicValue, useDynamicStyleSheet } from 'react-native-dark-mode'\n\nconst dynamicStyles = new DynamicStyleSheet({\n\tcontainer: {\n\t\tbackgroundColor: new DynamicValue('white', 'black'),\n\t\tflex: 1,\n\t},\n\ttext: {\n\t\tcolor: new DynamicValue('black', 'white'),\n\t\ttextAlign: 'center',\n\t},\n})\n\nfunction Component() {\n\tconst styles = useDynamicStyleSheet(dynamicStyles)\n\n\treturn (\n\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cText style={styles.text}\u003eMy text\u003c/Text\u003e\n\t\t\u003c/View\u003e\n\t)\n}\n```\n\n#### `DarkModeProvider`\n\nAllows you to set a specific mode for children.\n\n```javascript\nimport { DarkModeProvider } from 'react-native-dark-mode'\n\nfunction MyScreen() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t{/* will be rendered using dark theme */}\n\t\t\t\u003cDarkModeProvider mode=\"dark\"\u003e\n\t\t\t\t\u003cComponent /\u003e\n\t\t\t\u003c/DarkModeProvider\u003e\n\n\t\t\t{/* will be rendered using light theme */}\n\t\t\t\u003cDarkModeProvider mode=\"light\"\u003e\n\t\t\t\t\u003cComponent /\u003e\n\t\t\t\u003c/DarkModeProvider\u003e\n\n\t\t\t{/* will be rendered using current theme */}\n\t\t\t\u003cComponent /\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\nIt is recommended to wrap your application in a `DarkModeProvider` without a `mode` prop to observe a performance improvement.\n\n```javascript\nfunction App() {\n\treturn (\n\t\t\u003cDarkModeProvider\u003e\n\t\t\t{/* ... */}\n\t\t\u003c/DarkModeProvider\u003e\n\t)\n}\n```\n\n#### `useDynamicValue`\n\nReturns the appropriate value depending on the theme. You can either pass a `DynamicValue` or just two arguments.\n\n```javascript\nimport { DynamicValue, useDynamicValue } from 'react-native-dark-mode'\nconst lightLogo = require('./light.png')\nconst darkLogo = require('./dark.png')\nconst logoUri = new DynamicValue(lightLogo, darkLogo)\n\nfunction Logo() {\n\tconst source = useDynamicValue(logoUri)\n\treturn \u003cImage source={source} /\u003e\n}\n```\n\n```javascript\nimport { useDynamicValue } from 'react-native-dark-mode'\n\nfunction Input() {\n\tconst placeholderColor = useDynamicValue('black', 'white')\n\treturn \u003cTextInput placeholderTextColor={placeholderColor} /\u003e\n}\n```\n\n### Low level APIs\n\n#### `initialMode`\n\nThis is the initial mode that the app started in.\n\n```javascript\nimport { initialMode } from 'react-native-dark-mode'\n\nconsole.log('App started in', initialMode, 'mode')\n```\n\n#### `eventEmitter`\n\nAllows you to subscribe to changes in the mode.\n\n```javascript\nimport { eventEmitter } from 'react-native-dark-mode'\n\neventEmitter.on('currentModeChanged', newMode =\u003e {\n\tconsole.log('Switched to', newMode, 'mode')\n})\n```\n\n## Requirements\n\n### iOS\n\n-   Xcode 11\n-   React Native 0.59.9 or higher\n-   iOS 13 to see it in action\n\n### Android\n\n-   Android 10 or Android Auto to see it in action\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemotionapps%2Freact-native-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodemotionapps%2Freact-native-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodemotionapps%2Freact-native-dark-mode/lists"}