{"id":29806902,"url":"https://github.com/encoresky/react-native-custom-theme","last_synced_at":"2025-07-28T14:14:06.564Z","repository":{"id":51608143,"uuid":"484434152","full_name":"encoresky/react-native-custom-theme","owner":"encoresky","description":"Custom theme support system for react native","archived":false,"fork":false,"pushed_at":"2022-11-09T12:33:29.000Z","size":1026,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-03T12:06:04.415Z","etag":null,"topics":["react-native"],"latest_commit_sha":null,"homepage":"","language":"Java","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/encoresky.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":"2022-04-22T12:58:02.000Z","updated_at":"2022-08-24T06:54:33.000Z","dependencies_parsed_at":"2022-08-25T18:20:34.932Z","dependency_job_id":null,"html_url":"https://github.com/encoresky/react-native-custom-theme","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/encoresky/react-native-custom-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoresky%2Freact-native-custom-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoresky%2Freact-native-custom-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoresky%2Freact-native-custom-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoresky%2Freact-native-custom-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/encoresky","download_url":"https://codeload.github.com/encoresky/react-native-custom-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/encoresky%2Freact-native-custom-theme/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267528058,"owners_count":24102044,"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-07-28T02:00:09.689Z","response_time":68,"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":["react-native"],"created_at":"2025-07-28T14:13:54.978Z","updated_at":"2025-07-28T14:14:06.549Z","avatar_url":"https://github.com/encoresky.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Custom Theme\n## Custom theme system for react native\n\n[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)\n\nReact native custom theme is the library which enable your app to support multiple themes.\n## Supported platforms\n- iOS\n- Android\n\n## Installation\n\n```sh\nnpm install react-native-custom-theme\n```\nThe solution is implemented in JavaScript so no native module linking is required\n\n## How to use\n\nCreate theme object for light and dark theme ```Colors.js```\n```ts\nimport {Theme} from 'react-native-custom-theme';\nexport const light: Theme = {\n  mode: 'light',\n  primary: '#4e9cdb',\n  secondary: '#4e9cdb',\n  background: '#ffffff',\n};\n\nexport const dark: Theme = {\n  mode: 'dark',\n  primary: '#0a5897',\n  secondary: '#0a5897',\n  background: '#000000',\n};\n\n```\n\nWrap your app within ThemeProvider. ThemeProvider require light and dark theme objects as props\n```tsx\nimport React from 'react';\nimport ThemeProvider from 'react-native-custom-theme';\nimport {dark, light} from './Colors';\nimport Home from './Home';\n\nconst App = () =\u003e {\n  return (\n    \u003cThemeProvider darkTheme={dark} lightTheme={light}\u003e\n      \u003cHome /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n};\n\nexport default App;\n```\n\nImport  ```useTheme``` hook and use **theme** and **isDarkTheme** variables to set your colors.\n```tsx\n-- other imports ---\nimport {useTheme} from 'react-native-custom-theme';\n\nconst Home = () =\u003e {\n    const {theme, isDarkTheme} = useTheme();\n\n    const backgroundStyle = {\n        backgroundColor: theme.background,\n        flex: 1,\n    };\n\n  const textStyle = {\n    color: isDarkTheme ? '#fff' : '#000',\n  };\n  \n  return (\n      \u003cView style={backgroundStyle}\u003e\n        \u003cText style={textStyle}\u003eReact Native Custom Theme\u003c/Text\u003e\n      \u003c/View\u003e\n}\n```\n\nTo change theme use **setTheme** method from **useTheme** hook\n```tsx\n-- other imports ---\nimport {ThemeModes, useTheme} from 'react-native-custom-theme';\n\nconst Settings () =\u003e {\n    const {themeMode, setTheme} = useTheme();\n    \n    const onPress = () =\u003e {\n        setTheme(ThemeModes.DARK);\n    }\n    \n    return (\n        \u003cView\u003e\n            \u003cTouchableOpacity onPress={onPress}\u003e\n                \u003cText\u003eChange to dark theme\u003c/Text\u003e\n            \u003c/TouchableOpacity\u003e\n        \u003c/View\u003e\n}\n```\n\n## API\n#### ThemeProvider\nProperty | Type | Description\n--- | --- | --- |\ndarkTheme | Theme | This object contain colors values for dark theme\nlightTheme | Theme | This object contain colors values for light theme\n\n#### useTheme\n```ts\nconst {theme, isDarkTheme, themeMode, setTheme} = useTheme();\n```\nProperty | Type | Description\n--- | --- | --- |\ntheme | Theme | This object contain colors values for current selected theme\nisDarkTheme | boolean | true if selected theme is dark else false\nthemeMode | ThemeModes.LIGHT\u003cbr/\u003eThemeModes.DARK\u003cbr/\u003eThemeModes.DEVICE_THEME | Mode to apply theme\nsetTheme | function | set new theme, it takes new theme mode as parameter\n\n#### Theme\n- mode -  'light' or 'dark',\n- \\[colorName]: [colorValue]\n\n#### ThemeModes\n- LIGHT\n- DARK\n- DEVICE_THEME\n\n## Authors\n- [Balveer Dhanoriya](https://github.com/estbalveer)\n\n## Contributing\nPull requests are most welcome! Don't forget to add a title and a description that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are VERY helpful. Please do NOT format the files as we are trying to keep a unified syntax and the reviewing process fast and simple.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencoresky%2Freact-native-custom-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fencoresky%2Freact-native-custom-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fencoresky%2Freact-native-custom-theme/lists"}