{"id":15069965,"url":"https://github.com/kj-gm/theme-csx","last_synced_at":"2025-04-10T17:10:46.659Z","repository":{"id":110467316,"uuid":"445849228","full_name":"KJ-GM/theme-csx","owner":"KJ-GM","description":"A React Native theming framework that makes it easy to create themeable components.","archived":false,"fork":false,"pushed_at":"2023-10-09T23:16:48.000Z","size":19784,"stargazers_count":12,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-22T22:45:55.529Z","etag":null,"topics":["dark-mode","framework","react","react-native","styles","theming"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/theme-csx","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KJ-GM.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}},"created_at":"2022-01-08T15:00:09.000Z","updated_at":"2024-12-10T22:46:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3e9556b-b3e9-4229-9857-96f46f00807a","html_url":"https://github.com/KJ-GM/theme-csx","commit_stats":null,"previous_names":["kja-csx/theme-csx"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KJ-GM%2Ftheme-csx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KJ-GM%2Ftheme-csx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KJ-GM%2Ftheme-csx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KJ-GM%2Ftheme-csx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KJ-GM","download_url":"https://codeload.github.com/KJ-GM/theme-csx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248261313,"owners_count":21074220,"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":["dark-mode","framework","react","react-native","styles","theming"],"created_at":"2024-09-25T01:45:58.279Z","updated_at":"2025-04-10T17:10:46.652Z","avatar_url":"https://github.com/KJ-GM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://user-images.githubusercontent.com/52489083/149637586-f0c3b5ce-6b99-431f-b821-7ca1e208073e.png)\n\n\u003c!-- this is a comment\n![NPM Downloads](https://img.shields.io/npm/dy/theme-csx?logo=GIthub\u0026style=for-the-badge) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/KJA-Tsx/theme-csx?logo=GIthub\u0026style=for-the-badge) ![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/KJA-Tsx/theme-csx?logo=GIthub\u0026style=for-the-badge) ![GitHub](https://img.shields.io/github/license/KJA-Tsx/theme-csx?logo=GIthub\u0026style=for-the-badge)\n\n\n**`IOS`**: theme chanes will show immediately!\n\n**`Android`**: theme chanes will show after app reopened!\n --\u003e\n\n![NPM Downloads](https://img.shields.io/npm/dy/theme-csx?logo=GIthub\u0026style=for-the-badge) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/KJA-Tsx/theme-csx?logo=GIthub\u0026style=for-the-badge) ![Status - active](https://img.shields.io/badge/Status-active-blueviolet?logo=GIthub\u0026style=for-the-badge) ![GitHub](https://img.shields.io/github/license/KJA-Tsx/theme-csx?logo=GIthub\u0026style=for-the-badge)\n\n:last_quarter_moon: **Youtube Tutorial**: https://youtu.be/wW20AkwmGMk\n\n#\n\n\u003ctable align=\"center\"\u003e\n   \u003cthead\u003e\n      \u003ctr\u003e\n         \u003cth\u003eIOS\u003c/th\u003e\n         \u003cth\u003eAndroid\u003c/th\u003e\n      \u003c/tr\u003e\n   \u003c/thead\u003e\n   \u003ctbody\u003e\n      \u003ctr\u003e\n         \u003ctd\u003e\u003cimg src=\"https://github.com/KJ-GM/theme-csx/blob/master/RPReplay-Final1644961619.gif\" alt=\"Showcase iOS\" width=\"234\" height=\"433\"\u003e \u003c/td\u003e\n                  \u003ctd\u003e\u003cimg src=\"https://user-images.githubusercontent.com/52489083/155139274-36543351-0585-46fd-ab81-1c254bf3020b.gif\" alt=\"Showcase Android\" width=\"234\" height=\"439\"\u003e\u003c/td\u003e\n      \u003c/tr\u003e\n   \u003c/tbody\u003e\n\u003c/table\u003e\n\n# 🚀 Features\n\n- Similar to standard react native styling, but with additional props that can be added to make it themeable.\n- Can be implemented for Views + Texts + Images + Icons...\n- Auto-completion \u0026 Dynamic\n- Light \u0026 Fast.\n- Expo \u0026 React Native.\n- Supports React Navigation.\n\n🌟 **System**: changes to the phone _`appearance`_ preference while the app is running will be applied dynamically.\n\n- **IOS:** changes will be shown _`immediately`_ without the need to reopen the app.\n\n## ✅ Installation\n\n```sh\nnpm install theme-csx\n```\n\n```sh\nyarn add theme-csx\n```\n\n## 📝 Get Started\n\n\u003e **StyleSheet**\n\n- Is similar to the usual styling format, but now you have additional props to make style themeable.\n\n\u003e **T() - Themed Function**\n\n- Apply **only** your themed styles using the T() function wrapper.\n\n\u003e **TV() - Themed Value Function**\n\n- Is an extra helper function that can be used to theme a specific value. (it becomes useful with react navigation)\n\n\u003e **themeProvider() - New 🌟**\n\n- Use this function to set up and maintain a constant global theme around the app.\n\n\u003e **appearanceHook**\n\n- Use the appearanceHook to switch theme from anywhere in your app.\n\n**🌓 Expo**: To make the system preference work, make sure `\"userInterfaceStyle\":\"automatic\"` is added to app.json\n\n## Usage ❓\n\n1) Create a `theme.config.ts` file anywhere in the app project, then add your custom theme accordingly, finally use the `themeProvider` function to export app `theme` .\n   \n```js\nimport {themeProvider} from 'theme-csx';\n\n// Note(1): The object must include: colors, spacing, font, lineHeight, letterSpacing, shadow.\n// Note(2): If you do NOT want to use any of the above-mentioned categories, leave it empty.\n// Note(3): You have the option of adding a new category that is not listed above.\n// Note(4): You can update and add inside each category as you see suitable. \n\n// App theme object \nconst Theme = {\n  colors: {\n    primary: '{App primary color}',\n    secondary: '{App secondary color}',\n    green: 'green',\n    light: {\n      background: '#fff',\n      text: '#000000',\n    },\n    dark: {\n      background: '#121212',\n      text: '#FFFFFF',\n    },\n  },\n  spacing: {},\n  font: {\n    family: {\n      muktaBold: 'Mukta-Bold',\n      muktaRegular: 'Mukta-Regular',\n      NunitoBold: 'Nunito-Bold',\n      NunitoRegular: 'Nunito-Regular',\n    },\n    size: {\n      xxs: 9,\n      xs: 10,\n      s: 13,\n      m: 16,\n      l: 18,\n    },\n  },\n  lineHeight: {},\n  letterSpacing: {},\n  shadow: {},\n};\n\n// Pass the {Theme} object to the themeProvider function and then export theme to app\nexport const theme = themeProvider(Theme);\n```\n2) Import app `theme` from the `theme.config.ts` file and enjoy `Dynamic \u0026 Auto-completion` features for all theme values\n   \n```js\n// Styles\nimport { StyleSheet, T, appearanceHook } from 'theme-csx';\nimport {theme} from './theme.config';\n\n// Components\nimport { Text, View } from 'react-native';\nimport { Button } from '@components/atoms';\n\nconst DemoComponent = () =\u003e {\n  // Theme switch\n  const switchTheme = () =\u003e {\n    switch (appearanceHook.activeTheme) {\n      case 'dark':\n        appearanceHook.switch('light');\n        break;\n      case 'light':\n        appearanceHook.switch('system');\n        break;\n      default:\n        appearanceHook.switch('dark');\n        break;\n    }\n  };\n\n  return (\n    \u003cView style={T(styles.THEMED_CONTAINER)}\u003e\n      \u003cText style={styles.NORMAL_TEXT}\u003eHey, I am normal text\u003c/Text\u003e\n\n      \u003cText style={T(styles.THEMED_TEXT)}\u003eHey, I am themed text\u003c/Text\u003e\n\n      \u003cButton text={'Switch theme'} onPress={switchTheme} /\u003e\n    \u003c/View\u003e\n  );\n};\n\nconst styles = StyleSheet.create({\n  THEMED_CONTAINER: {\n    flex: 1,\n    backgroundColor: theme.colors.light.background,\n    backgroundDark:  theme.colors.dark.background, // backgroundDark prop was added to make it themeable\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  NORMAL_TEXT: {\n    fontWeight: 'bold',\n    fontSize: theme.font.size.s,\n    color: theme.colors.green,\n  },\n  THEMED_TEXT: {\n    fontWeight: 'bold',\n    fontSize: theme.font.size.s,\n    color: theme.colors.light.text,\n    colorDark: theme.colors.dark.text, // colorDark prop was added to make it themeable\n  },\n});\n```\n\n## 🚦Theme Types:\n\n\u003e TViewStyle:\n\n- Has the following extra props: `backgroundDark`, `borderDark`\n\n\u003e TTextStyle:\n\n- Has the following extra props: `colorDark`, `backgroundDark`, `borderDark`\n\n\u003e TImageStyle:\n\n- Has the following extra props: `tintColorDark`, `backgroundDark`, `borderDark`\n\n\u003e appearanceHook.switch():\n\n- Has the following options: `system`, `light`, `dark`\n\n\u003e themeObj:\n\n- Has the following categories: `colors`, `spacing`, `font`, `lineHeight`, `letterSpacing`, `shadow`\n\n## Sponsors\n\n\u003ca href=\"https://www.jetbrains.com/?from=Lighthouse-Badges\"\u003e\n  \u003cimg alt=\"Jetbrains Logo\" src=\"https://raw.githubusercontent.com/emazzotta/lighthouse-badges/4ebebc4f41579e024ff72cfd20fb78a8d6f745b3/assets/img/jetbrains.svg\" height=\"100\"\u003e\n\u003c/a\u003e\n\n## License\n\nApache-2.0 License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkj-gm%2Ftheme-csx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkj-gm%2Ftheme-csx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkj-gm%2Ftheme-csx/lists"}