{"id":13802622,"url":"https://github.com/shoutem/theme","last_synced_at":"2025-05-13T13:32:27.259Z","repository":{"id":10783501,"uuid":"66627476","full_name":"shoutem/theme","owner":"shoutem","description":"Style your React Native components on one place","archived":false,"fork":false,"pushed_at":"2025-05-13T11:21:09.000Z","size":582,"stargazers_count":332,"open_issues_count":14,"forks_count":92,"subscribers_count":27,"default_branch":"develop","last_synced_at":"2025-05-13T11:43:39.608Z","etag":null,"topics":["react-native","react-native-style","shoutem-ui"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shoutem.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-08-26T07:41:35.000Z","updated_at":"2024-12-09T01:41:22.000Z","dependencies_parsed_at":"2024-01-13T10:42:29.739Z","dependency_job_id":"b466752d-9627-429b-928e-77b789bea271","html_url":"https://github.com/shoutem/theme","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Ftheme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Ftheme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Ftheme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shoutem%2Ftheme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shoutem","download_url":"https://codeload.github.com/shoutem/theme/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253950253,"owners_count":21989330,"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":["react-native","react-native-style","shoutem-ui"],"created_at":"2024-08-04T00:01:48.753Z","updated_at":"2025-05-13T13:32:26.940Z","avatar_url":"https://github.com/shoutem.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Theme\n\nThe React Native component's style is usually defined as a static variable along with the component itself. This makes it easy to build self contained components that always look and behave in the same way. On the other hand, it complicates building themeable (or skinnable) components that could have multiple styles that can be customized without touching the component source code.\n`@shoutem/theme` is built to address that problem. With themes, you can target specific components in your app and customize them through one file, just like you would do it with CSS on the web.\n\n## Install\n\n```bash\n$ npm install --save @shoutem/theme\n```\n\n## Docs\n\nAll the documentation is available on the [Developer portal](http://shoutem.github.io/docs/ui-toolkit/theme/introduction).\n\n## Community\n\nJoin [our community](https://www.facebook.com/groups/shoutem.community/) on Facebook. Also, feel free to ask a question on Stack Overflow using [\"shoutem\" tag](http://stackoverflow.com/tags/shoutem).\n\n## Examples\n\nUse [Shoutem UI](https://github.com/shoutem/theme), set of components which are made to be customizable by Theme, to see how to work with it.\n\nCreate new React Native project:\n\n```bash\n$ react-native init HelloWorld\n```\n\nInstall `@shoutem/ui` and `@shoutem/theme` and link them in your project:\n\n```bash\n$ cd HelloWorld\n$ npm install --save @shoutem/ui\n$ npm install --save @shoutem/theme\n$ rnpm link\n```\n\nNow, simply copy the following to the `App.js` file of your React Native project:\n\n```JavaScript\nimport React, { Component } from 'react';\nimport { Dimensions } from 'react-native';\nimport { StyleProvider } from '@shoutem/theme';\nimport {\n  Card,\n  Image,\n  View,\n  Subtitle,\n  Caption,\n} from '@shoutem/ui';\n\nconst window = Dimensions.get('window');\n\nconst Colors = {\n  BACKGROUND: '#ffffff',\n  SHADOW: '#000000',\n};\n\nconst MEDIUM_GUTTER = 15;\n\nconst theme = {\n  'shoutem.ui.View': {\n    '.h-center': {\n      alignItems: 'center',\n    },\n\n    '.v-center': {\n      justifyContent: 'center',\n    },\n\n    '.flexible': {\n      flex: 1,\n    },\n\n    flexDirection: 'column',\n  },\n\n  'shoutem.ui.Card': {\n    'shoutem.ui.View.content': {\n      'shoutem.ui.Subtitle': {\n        marginBottom: MEDIUM_GUTTER,\n      },\n\n      flex: 1,\n      alignSelf: 'stretch',\n      padding: 10,\n    },\n\n    width: (180 / 375) * window.width,\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'flex-start',\n    backgroundColor: Colors.BACKGROUND,\n    borderRadius: 2,\n    shadowColor: Colors.SHADOW,\n    shadowOpacity: 0.1,\n    shadowOffset: { width: 1, height: 1 },\n  },\n\n  'shoutem.ui.Image': {\n    '.medium-wide': {\n      width: (180 / 375) * window.width,\n      height: 85,\n    },\n\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: Colors.BACKGROUND,\n  },\n};\n\nexport default class App extends Component\u003c{}\u003e {\n  render() {\n    return (\n      \u003cStyleProvider style={theme}\u003e\n        \u003cView styleName=\"flexible vertical v-center h-center\"\u003e\n          \u003cCard\u003e\n            \u003cImage\n              styleName=\"medium-wide\"\n              source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-12.png' }}\n            /\u003e\n            \u003cView styleName=\"content\"\u003e\n              \u003cSubtitle numberOfLines={4}\u003e\n                Lady Gaga Sings National Anthem at Super Bowl 50\n              \u003c/Subtitle\u003e\n              \u003cCaption\u003e21 hours ago\u003c/Caption\u003e\n            \u003c/View\u003e\n          \u003c/Card\u003e\n        \u003c/View\u003e\n      \u003c/StyleProvider\u003e\n    );\n  }\n}\n```\n\nFinally, run the app!\n\n```bash\n$ react-native run-ios\n```\n\n## Automated Testing\n\nJest has been set up to provide the ability to test `@shoutem/theme` after any changes.\n\nTo run tests, first add the following to `dependencies` in `package.json`:\n- `\"react-native\": \"0.63.2\"`\n- `\"react\": \"16.13.1\"`\n- `\"react-dom\": \"16.13.1\"`\n\nOr whichever version is relevant after your changes. Then run `npm i \u0026\u0026 npm run test` and see if you broke anything.\n\n\n## UI Toolkit\n\nShoutem UI is a part of the Shoutem UI Toolkit that enables you to build professionally looking React Native apps with ease.  \n\nIt consists of three libraries:\n\n- [@shoutem/ui](https://github.com/shoutem/ui): beautiful and customizable UI components\n- [@shoutem/theme](https://github.com/shoutem/theme): “CSS-way\" of styling entire app\n- [@shoutem/animation](https://github.com/shoutem/animation): declarative way of applying ready-made  animations\n\n\n## License\n\n[The BSD License](https://opensource.org/licenses/BSD-3-Clause)\nCopyright (c) 2016-present, [Shoutem](http://shoutem.github.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoutem%2Ftheme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshoutem%2Ftheme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshoutem%2Ftheme/lists"}