{"id":31392833,"url":"https://github.com/formidablelabs/react-native-dark","last_synced_at":"2025-09-29T04:47:42.907Z","repository":{"id":44541905,"uuid":"512747401","full_name":"FormidableLabs/react-native-dark","owner":"FormidableLabs","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-08T17:26:20.000Z","size":1682,"stargazers_count":25,"open_issues_count":0,"forks_count":2,"subscribers_count":27,"default_branch":"main","last_synced_at":"2025-09-22T03:53:32.881Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/FormidableLabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-11T12:27:47.000Z","updated_at":"2025-05-21T09:51:10.000Z","dependencies_parsed_at":"2024-04-11T22:41:41.625Z","dependency_job_id":"cbe02bec-4b58-42a2-be16-32b06fc3535f","html_url":"https://github.com/FormidableLabs/react-native-dark","commit_stats":{"total_commits":35,"total_committers":2,"mean_commits":17.5,"dds":0.05714285714285716,"last_synced_commit":"47d2b1d905eaf3a9517f4b6c88c1e85a4bf25a66"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/FormidableLabs/react-native-dark","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-native-dark","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-native-dark/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-native-dark/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-native-dark/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FormidableLabs","download_url":"https://codeload.github.com/FormidableLabs/react-native-dark/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FormidableLabs%2Freact-native-dark/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277467479,"owners_count":25822917,"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","status":"online","status_checked_at":"2025-09-29T02:00:09.175Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2025-09-29T04:47:39.360Z","updated_at":"2025-09-29T04:47:42.897Z","avatar_url":"https://github.com/FormidableLabs.png","language":"TypeScript","readme":"[![React Native Dark — Formidable, We build the modern web](https://raw.githubusercontent.com/FormidableLabs/react-native-dark/main/react-native-dark-Hero.png)](https://formidable.com/open-source/)\n\n`react-native-dark` is a minor augmentation of `StyleSheet.create` to support dynamic dark-mode styling with little hassle, made possible by babel.\n\nA little, illustrative example:\n\n```tsx\nimport { StyleSheet, Text, View } from \"react-native\";\n\nexport default function App() {\n  return (\n    \u003cView style={styles.container}\u003e\n      \u003cText style={styles.title}\u003eHello, world!\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = createStyleSheet({\n  container: {\n    flex: 1,\n    backgroundColor: \"white\",\n    // 🎉 dark mode 🎉\n    $dark: {\n      backgroundColor: \"black\",\n    },\n  },\n\n  title: {\n    color: \"black\",\n    // 🎉 dark mode 🎉\n    $dark: {\n      color: \"white\",\n    },\n  },\n});\n```\n\n## Setup\n\nSetup involves three steps.\n\n### Step 1: Installation\n\nFrom a React Native (or Expo) project, install `react-native-dark` from npm:\n\n```shell\nnpm install react-native-dark # npm\nyarn add react-native-dark # yarn\npnpm add react-native-dark # pnpm\n```\n\n### Step 2: Add the babel plugin\n\nIn your babel configuration (in e.g. `babel.config.js`), add the `react-native-dark` babel plugin:\n\n```js\nmodule.exports = function() {\n  return {\n    // ...\n    plugins: [\"react-native-dark/plugin\"], // 👈 add this\n  };\n};\n```\n\n### Step 3: Add the TypeScript shim for `StyleSheet.create`\n\nWe'll also \"shim\" the type for `StyleSheet.create` to enhance the developer experience. Add a declaration file to your project, such as `shim.d.ts` and add the following line:\n\n```ts\n/// \u003creference types=\"react-native-dark/shim\" /\u003e\n```\n\n### Step 4: Go to town!\n\nYou're ready to start adding dark-mode styles to your app! See below for more details on usage.\n\n## Usage\n\nThe babel plugin and TS shim were built to make adding dark-mode support to your app as easy as just declaring dark-mode styles in your stylesheets. In a standard style declaration, just add a `$dark` field with the styles to be applied in dark mode! These styles will be applied _on top_ of the baseline styles.\n\n```ts\nimport { StyleSheet } from \"react-native\";\n\n// ...\n\nconst styles = StyleSheet.create({\n  card: {\n    padding: 8,\n    borderRadius: 8,\n    backgroundColor: \"lightblue\",\n    \n    // 🪄 magic happens here 🪄\n    $dark: {\n      backgroundColor: \"blue\"\n    }\n  }\n});\n```\n\nNow when you call `styles.card` within your function components, the value will be automagically dynamic based on color scheme preference.\n\n### Manually setting color mode\n\nBy default, `$dark` styles will be applied when the user's device color scheme preference is set to `dark`. However, you can manually override this behavior by wrapping a component tree in `DarkModeProvider` from `react-native-dark`.\n\n```tsx\nimport { DarkModeProvider } from \"react-native-dark\";\n\n// Example of forcing dark mode and ignore user's color scheme preference\nconst App = () =\u003e {\n  return (\n    \u003cDarkModeProvider colorMode=\"dark\"\u003e\n      \u003cBody /\u003e\n    \u003c/DarkModeProvider\u003e\n  )\n}\n```\n\nThe `DarkModeProvider` has a single `colorMode` prop that can accept:\n\n- `\"auto\"` (default) to respect user's color scheme preference;\n- `\"light\"` to force light mode;\n- `\"dark\"` to force dark mode.\n\n## 🦄 Magical, but not magic\n\nThe babel plugin does the heavy lifting here and will turn code like the following:\n\n```tsx\nimport { StyleSheet, View } from \"react-native\";\n\nexport const App = () =\u003e {\n  return \u003cView style={styles.container} /\u003e;\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"white\",\n    \n    $dark: {\n      backgroundColor: \"black\"\n    }\n  }\n});\n```\n\ninto something like this:\n\n```tsx\nimport { StyleSheet, View } from \"react-native\";\nimport { useDarkMode } from \"react-native-dark\";\n\nexport const App = () =\u003e {\n  const isDark = useDarkMode();\n  \n  return \u003cView style={isDark ? __styles__container__$dark : styles.container} /\u003e;\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"white\",\n  },\n  __container__$dark: {\n    backgroundColor: \"black\"\n  }\n});\n\nconst __styles__container__$dark = StyleSheet.compose(styles.container, styles.__container__$dark);\n```\n\nThis is a reasonable and performant approach that you might take _by hand_ if you were implementing dark mode by hand. `react-native-dark` just cuts out the extra code for you. This, however, comes with a limitation or two...\n\n### Limitations\n\n1. Styles should be defined in the same file that they are referenced. E.g., don't import/export your styles object – define them in the same file that they're used.\n1. The dynamic support is handled by the `useColorScheme` hook from React Native, therefore this library only currently supports function components.\n1. Who knows, we'll probably find more limitations as we go 🤷‍\n\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Freact-native-dark","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformidablelabs%2Freact-native-dark","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformidablelabs%2Freact-native-dark/lists"}