{"id":19531448,"url":"https://github.com/alabsi91/react-native-material-you-colors","last_synced_at":"2025-04-26T13:31:47.525Z","repository":{"id":192259999,"uuid":"686410582","full_name":"alabsi91/react-native-material-you-colors","owner":"alabsi91","description":"Bring Material You color palettes to Android, iOS, and web platforms.","archived":false,"fork":false,"pushed_at":"2023-10-23T12:03:53.000Z","size":782,"stargazers_count":24,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-10-05T22:17:58.287Z","etag":null,"topics":["android","dynamic-color","expo","ios","material-design","palette-generation","react-native","web"],"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/alabsi91.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"alabsi91"}},"created_at":"2023-09-02T17:42:18.000Z","updated_at":"2024-09-25T13:11:39.000Z","dependencies_parsed_at":"2024-01-10T06:12:17.582Z","dependency_job_id":"b404094b-8429-428c-abdc-cde2491430ca","html_url":"https://github.com/alabsi91/react-native-material-you-colors","commit_stats":{"total_commits":38,"total_committers":3,"mean_commits":"12.666666666666666","dds":0.3157894736842105,"last_synced_commit":"72cf5c562a8b5c73097f33be7067548f54df40e3"},"previous_names":["alabsi91/react-native-material-you-colors"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alabsi91%2Freact-native-material-you-colors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alabsi91%2Freact-native-material-you-colors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alabsi91%2Freact-native-material-you-colors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alabsi91%2Freact-native-material-you-colors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alabsi91","download_url":"https://codeload.github.com/alabsi91/react-native-material-you-colors/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224036395,"owners_count":17245034,"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","dynamic-color","expo","ios","material-design","palette-generation","react-native","web"],"created_at":"2024-11-11T01:42:55.198Z","updated_at":"2025-04-26T13:31:47.512Z","avatar_url":"https://github.com/alabsi91.png","language":"TypeScript","funding_links":["https://github.com/sponsors/alabsi91"],"categories":[],"sub_categories":[],"readme":"[![https://github.com/alabsi91/reanimated-color-picker](https://img.shields.io/npm/v/react-native-material-you-colors?style=for-the-badge)](https://www.npmjs.com/package/react-native-material-you-colors)\n[![GitHub](https://img.shields.io/github/license/alabsi91/react-native-material-you-colors?style=for-the-badge)](https://github.com/alabsi91/react-native-material-you-colors/blob/main/LICENSE)\n[![GitHub issues](https://img.shields.io/github/issues/alabsi91/react-native-material-you-colors?style=for-the-badge)](https://github.com/alabsi91/react-native-material-you-colors/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc)\n![Platform](https://img.shields.io/badge/Platform-IOS%20%7C%20Android%20%7C%20Expo%20%7C%20Web-informational?style=for-the-badge)\n![Arch](https://img.shields.io/badge/React%20Native-Paper%20%7C%20New%20Architecture-informational?style=for-the-badge)\n\n![banner](https://lh3.googleusercontent.com/552oGSlinN0Gd7T8EjNkYGCBzHt0UmoG_pWtHSUY6FwaGT4q4-zJlGHD9rWO7MT5Oe_rtQZmyVnGRxVXch7Q1CTSQMs_1TcwbIMX9xZYDjEK2_R7PA=w1400-v0)\n\nhttps://github.com/alabsi91/react-native-material-you-colors/assets/58077449/5d70f2a6-ae2a-42c3-be02-0446e9f69f42\n\n# React Native Material You Colors\n\nReact Native Material You Colors simplifies the retrieval of Material You color palettes while ensuring compatibility across multiple platforms. With just a single seed color, you can generate palettes inspired by Material You's dynamic theming.\n\n\u003e Please check out my other library, [`Reanimated Color Picker`](https://github.com/alabsi91/reanimated-color-picker)\n\n## Key Features\n\n1. Multi-Platform Support: Andorid, IOS and WEB\n\n2. Theme Management\n\n## Installation\n\n```sh\nnpm install react-native-material-you-colors\n```\n\n\u003e **Warning**\n\u003e For `Expo` users, please note that the native side of this library will not function in `Expo Go` during app development. The native side is solely used to retrieve Material You colors from the `Android` system, but you can still generate palettes. The native side will work as expected after building the app in production mode.\n\n## Usage\n\n### Without using the Theme Provider\n\n```ts\nimport MaterialYou from 'react-native-material-you-colors';\n\nconst palette = MaterialYou.getMaterialYouPalette();\n\n/**\n * The output object\n * {\n *  system_accent1: string[]; An array containing `13` color shades.\n *  system_accent2: string[];\n *  system_accent3: string[];\n *  system_neutral1: string[];\n *  system_neutral2: string[];\n * }\n */\n```\n\n**API**\n\n- **isSupported**\n\n  ```ts\n  MaterialYou.isSupported : boolean\n  ```\n\n  To verify the current platform/device support for Material You dynamic colors.\n\n- **getMaterialYouPalette**\n\n  ```ts\n  MaterialYou.getMaterialYouPalette(fallbackSeedColor?: string, style?: GenerationStyle): MaterialYouPalette\n  ```\n\n  Get the Material You color palette from the Android system on the device.\n\n  If Material You is not supported on the user's device, a color palette generated from a fallback seed color will be returned.\n\n- **generatePaletteFromColor**\n\n  ```ts\n  MaterialYou.generatePaletteFromColor(colorSeed: string, style?: GenerationStyle): MaterialYouPalette\n  ```\n\n  Generate a complete Material You palette from a single HEX color (seed color).\n\n  Various styles are available to choose from, each of which dictates how the palette will be generated.\n\n  **Note:** The input seed color should be in HEX format (#RRGGBB), without the alpha channel. For example, `#1b6ef3`.\n\n- **The shape of the output palette data**\n\n  ```ts\n  type MaterialYouPalette = {\n    system_accent1: string[]; // An array containing `13` color shades.\n    system_accent2: string[];\n    system_accent3: string[];\n    system_neutral1: string[];\n    system_neutral2: string[];\n  };\n  ```\n\n### Using the Theme Provider\n\n1. Create a new theme context and provide a function to determine which colors you want to use.\n\n   \u003e **Warning**\n   \u003e The function should return an object with the keys `light` and `dark`, where both keys contain objects with the same set of keys representing the colors you want to use for the light and dark themes.\n\n```ts\n// theme.ts\n\nimport MaterialYou from 'react-native-material-you-colors';\nimport type { MaterialYouPalette } from 'react-native-material-you-colors';\n\nfunction generateTheme(palette: MaterialYouPalette) {\n  const light = {\n    isDark: false,\n    primary: palette.system_accent1[7], // shade 500\n    text: palette.system_accent1[9], // shade 700\n    textColored: palette.system_accent1[2], // shade 50\n    background: palette.system_neutral1[1], // shade 10\n    card: palette.system_accent2[2], // shade 50\n    icon: palette.system_accent1[10], // shade 800\n  };\n  const dark: typeof light = {\n    isDark: true,\n    primary: palette.system_accent1[4], // shade 200\n    text: palette.system_accent1[3], // shade 100\n    textColored: palette.system_accent1[9], // shade 700\n    background: palette.system_neutral1[11], // shade 900\n    card: palette.system_accent2[10], // shade 800\n    icon: palette.system_accent1[3], // shade 100\n  };\n  return { light, dark };\n}\n\nexport const { ThemeProvider, useMaterialYouTheme } = MaterialYou.createThemeContext(generateTheme);\n```\n\n\u003c/br\u003e\n\n2. Wrap your app with the Theme Provider, providing the initial props:\n\n\u003c/br\u003e\n\n```ts\n// App.tsx\n\nimport React from 'react';\nimport Home from './screens/Home';\n\nimport { ThemeProvider } from './Theme'; // 👈\n\nexport default function App() {\n  return (\n    \u003cThemeProvider seedColor='auto' colorScheme='auto' fallbackColor='#1b6ef3' generationStyle='TONAL_SPOT'\u003e\n      \u003cHome /\u003e\n    \u003c/ThemeProvider\u003e\n  );\n}\n```\n\n**`ThemeProvider` props:**\n\n| Prop              | Type                                                                                                           | Description                                                                                                                                                                                            | Default        |\n| ----------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |\n| `colorScheme`     | `\"auto\" \\| \"dark\" \\| \"light\"`                                                                                  | Specifies the initial color scheme for your app.                                                                                                                                                       | `\"auto\"`       |\n| `fallbackColor`   | `string` (HEX Color)                                                                                           | This is used to generate a fallback palette in case the platform does not support Material You colors.                                                                                                 | `'#1b6ef3'`    |\n| `generationStyle` | `\"SPRITZ\"\\| \"TONAL_SPOT\"\\| \"VIBRANT\"\\| \"EXPRESSIVE\"\\| \"RAINBOW\"\\| \"FRUIT_SALAD\"\\| \"CONTENT\"\\| \"MONOCHROMATIC\"` | Palette generation style.                                                                                                                                                                              | `\"TONAL_SPOT\"` |\n| `seedColor`       | `\"auto\" \\| string` (HEX Color)                                                                                 | If set to `\"auto\"`, it tries to get the palette from the device, falling back to the provided color if unsupported. If set to a color (HEX only), it generates a new palette without device retrieval. | `\"auto\"`       |\n\n\u003c/br\u003e\n\n3. Use the `useMaterialYouTheme` hook to access the current theme in your components:\n\n\u003c/br\u003e\n\n```jsx\nimport React from 'react';\nimport { Image, StyleSheet, Text, View } from 'react-native';\n\nimport { useMaterialYouTheme } from './Theme'; // 👈\n\nexport default function MyComponent() {\n  const theme = useMaterialYouTheme();\n\n  return \u003cView style={[styles.container, { backgroundColor: theme.background }]}\u003e\n\n  // ...\n}\n```\n\n\u003c/br\u003e\n\n**`useMaterialYouTheme` provide other utilities you can use throw your app:**\n\n- **Changing Color Scheme**\n\n  ```ts\n  setColorScheme: (value: \"auto\" | \"dark\" | \"light\") =\u003e void\n  ```\n\n  **Description**\u003c/br\u003e\n  Switch between themes (`dark` or `light`) or set it to `auto` to follow system color scheme preference.\n\n- **Generate new palette**\n\n  ```ts\n  setMaterialYouColor: (seedColor: \"auto\" | string), style?: GenerationStyle) =\u003e void\n  ```\n\n  **Description**\u003c/br\u003e\n  Generate a new Material You palette and set it as the current theme.\u003c/br\u003e\n  `The seed color:` It can be `\"auto\"` to follow the system theme if supported;\n  otherwise, it will generate a palette using the `fallbackColor` prop.\n  If a HEX color is provided, it will generate a new palette using that seed color.\u003c/br\u003e\n  `style:` - The style that dictates how the palette will be generated.\n\n- **Change palette generation style**\n\n  ```ts\n  setPaletteStyle: (style: generationStyle) =\u003e void;\n\n  type generationStyle = \"SPRITZ\" | \"TONAL_SPOT\" | \"VIBRANT\" | \"EXPRESSIVE\" | \"RAINBOW\" | \"FRUIT_SALAD\" | \"CONTENT\" | \"MONOCHROMATIC\"\n  ```\n\n  **Description**\u003c/br\u003e\n  Change the palette generation style and set it as the current theme.\u003c/br\u003e\n  **Disclaimer**: If the current Material You palette is set to `\"auto\"` (following the system theme), a new palette will be generated using the `fallbackColor` prop.\u003c/br\u003e\n\n- **Other**\n\n  ```ts\n  palette: MaterialYouPalette;\n  ```\n\n  **Description**\u003c/br\u003e\n  The current color palette.\u003c/br\u003e\n\n  ```ts\n  seedColor: 'auto' | string;\n  ```\n\n  **Description**\u003c/br\u003e\n  Returns the current seed color used to generate the palette.  \n   If the palette follows the system theme, it will be `\"auto\"`.\u003c/br\u003e\n\n  ```ts\n  style: GenerationStyle;\n  ```\n\n  **Description**\u003c/br\u003e\n  Returns the current generation style used to generate the palette.\n\n## Examples\n\nExplore how to use React Native Material You Colors with these practical examples:\n\n1. [Example: React Native App](https://github.com/alabsi91/react-native-material-you-colors/tree/main/example)\n\n\u003c/br\u003e\n\n2. [Example: Expo Snack](https://snack.expo.dev/@alabsi91/react-native-material-you-colors)\n   \u003e **Warning** Please be aware that retrieving the Material You color palette from Android system on `Expo` only functions in the production build.\n\n## License\n\nReact Native Material You Colors library is licensed under [**The MIT License.**](https://github.com/alabsi91/react-native-material-you-colors/blob/main/LICENSE)\n\n## Sponsoring\n\n\u003ca href=\"https://github.com/sponsors/alabsi91\"\u003e\n  \u003cimg align=\"right\" width=\"160\" alt=\"This library helped you? Consider sponsoring!\" src=\".github/funding-octocat.svg\"\u003e\n\u003c/a\u003e\n\nIf you're integrating React Native Material You Colors in a production app and have found value in this library, consider [funding this project](https://github.com/sponsors/alabsi91). Your support helps maintain and improve the library for the community.\n\nFeel free to [contact me](mailto:alabsi91@gmail.com) if you have any questions or would like to discuss further sponsorship options. Your support is greatly appreciated!\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falabsi91%2Freact-native-material-you-colors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falabsi91%2Freact-native-material-you-colors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falabsi91%2Freact-native-material-you-colors/lists"}