{"id":27427319,"url":"https://github.com/admirsaheta/darklify","last_synced_at":"2025-04-14T12:49:52.814Z","repository":{"id":189674359,"uuid":"681060075","full_name":"admirsaheta/darklify","owner":"admirsaheta","description":"A better approach to utilising dark/light mode in react-native","archived":false,"fork":false,"pushed_at":"2023-08-21T08:08:44.000Z","size":9,"stargazers_count":16,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T13:27:20.128Z","etag":null,"topics":["dark-mode","dark-theme","expo","react","react-native","typescript"],"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/admirsaheta.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}},"created_at":"2023-08-21T07:12:36.000Z","updated_at":"2023-09-19T14:29:16.000Z","dependencies_parsed_at":"2023-08-21T09:25:57.202Z","dependency_job_id":"317f6d32-fab6-46c4-af7d-c98b23a522fa","html_url":"https://github.com/admirsaheta/darklify","commit_stats":null,"previous_names":["admirsaheta/darklify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/admirsaheta%2Fdarklify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/admirsaheta%2Fdarklify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/admirsaheta%2Fdarklify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/admirsaheta%2Fdarklify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/admirsaheta","download_url":"https://codeload.github.com/admirsaheta/darklify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248884374,"owners_count":21177397,"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","dark-theme","expo","react","react-native","typescript"],"created_at":"2025-04-14T12:49:52.256Z","updated_at":"2025-04-14T12:49:52.796Z","avatar_url":"https://github.com/admirsaheta.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg width=\"996\" alt=\"image\" src=\"https://i.imgur.com/rqiWIxp.png\"\u003e\n\n\u003cdiv align=\"center\"\u003e \n\u003ch1\u003e Darklify \u003c/h1\u003e\n\u003cp\u003e Change the way you percieve and work with dark theme in react-native \u003c/p\u003e\n\u003c/div\u003e\n\n## Installation\nTo start using ```darklify``` please verify your version of ```react-native``` is ```0.63.3``` or higher.\n```\nnpm i darklify\n```\n\n## About \nDarklify was made possible to avoid boring boilerplaiting of ```useColorScheme()``` in react-native. Written in Typescript with full types-support utilising the POP architecture.\n\n## How do I use it ?\n\n### Hooks\n```useDarklifyMode()```\nExample usage\n```ts\nimport { useDarklifyMode } from 'darklify'\n\nfunction Component() {\n\tconst darkModeEnabled = useDarklifyMode()\n\treturn \u003cView style={{ backgroundColor: darkModeEnabled ? 'black' : 'white' }} /\u003e\n}\n```\n```useDarklifyValue()```\nStep into the world of Darklify, where each Dynamic keyword takes on the mystique of Darklify. Witness the logos transcend from the brilliance of light to the depths of shadow, guided by the whispers of the theme. Allow your interface to be a canvas of enchantment, where elements shift and change, responding to the captivating allure of the current theme.\n```ts\nimport { DarklifyValue, useDarklifyValue } from 'react-native-darklify'\n\nconst luminaryLightLogo = require('./light.png')\nconst obsidianDarkLogo = require('./dark.png')\nconst logoMetamorphosis = new DarklifyValue(luminaryLightLogo, obsidianDarkLogo)\n\nfunction Insignia() {\n\tconst essence = useDarklifyValue(logoMetamorphosis)\n\treturn \u003cImage source={essence} /\u003e\n}\n```\n\n### Helper Classes\n```DarklifyValue```\nCrafted to seamlessly intertwine with DarklifyStylesheet and wield the power of useDarklifyValue. Immerse yourself in its brilliance: furnish the first argument to orchestrate a symphony with your light color palette, while the second argument conducts a mesmerizing dance within the depths of your dark color scheme. Unleash the magic that transcends mere styling and elevates your design to an enchanting crescendo.\n```ts\nimport { DarklifyValue } from 'darklify'\n\n// Unveil a canvas of wonder, where colors transcend time\nconst mysticalBackdrop = new DarklifyValue('white', 'black')\n```\n\n### Custom Stylesheet\nUnveil the art of Darklify, where code becomes an incantation and your interface dances with shadows:\n\n\n```ts\nimport { DarklifyStyleSheet, DarklifyValue, useDarklifyValue } from 'darklify'\n\nconst darklifiedStyles = new DarklifyStyleSheet({\n\tcontainer: {\n\t\tbackgroundColor: new DarklifyValue('white', 'black'),\n\t\tflex: 1,\n\t},\n\ttext: {\n\t\tcolor: new DarklifyValue('black', 'white'),\n\t\ttextAlign: 'center',\n\t},\n})\n\nfunction EnchantedComponent() {\n\tconst styles = useDarklifyValue(darklifiedStyles)\n\n\treturn (\n\t\t\u003cView style={styles.container}\u003e\n\t\t\t\u003cText style={styles.text}\u003eWhispers in the Void\u003c/Text\u003e\n\t\t\u003c/View\u003e\n\t)\n}\n```\n\n### Providers\nEmbark on a journey through the tapestry of themes with a touch of enchantment of each component:\n```ts\nimport { ColorSchemeProvider } from 'darklify'\n\nfunction EnchantedScreen() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t{/* Immerse in the shadows of the dark theme */}\n\t\t\t\u003cColorSchemeProvider mode=\"dark\"\u003e\n\t\t\t\t\u003cEnchantedComponent /\u003e\n\t\t\t\u003c/ColorSchemeProvider\u003e\n\n\t\t\t{/* Bask in the radiance of the light theme */}\n\t\t\t\u003cColorSchemeProvider mode=\"light\"\u003e\n\t\t\t\t\u003cEnchantedComponent /\u003e\n\t\t\t\u003c/ColorSchemeProvider\u003e\n\n\t\t\t{/* Dance with the spirits of the current theme */}\n\t\t\t\u003cEnchantedComponent /\u003e\n\t\t\u003c/\u003e\n\t)\n}\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadmirsaheta%2Fdarklify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadmirsaheta%2Fdarklify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadmirsaheta%2Fdarklify/lists"}