{"id":15142001,"url":"https://github.com/eddyverbruggen/nativescript-dark-mode","last_synced_at":"2025-06-30T21:36:50.423Z","repository":{"id":46693183,"uuid":"190411815","full_name":"EddyVerbruggen/nativescript-dark-mode","owner":"EddyVerbruggen","description":"NativeScript plugin to tap into iOS13's Dark Mode and Android's Night Mode configs","archived":false,"fork":false,"pushed_at":"2023-01-07T06:08:31.000Z","size":3313,"stargazers_count":15,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-23T23:06:43.616Z","etag":null,"topics":["dark-mode","nativescript","nativescript-plugin","night-mode"],"latest_commit_sha":null,"homepage":"","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/EddyVerbruggen.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":"2019-06-05T14:36:06.000Z","updated_at":"2024-05-30T16:08:16.000Z","dependencies_parsed_at":"2023-02-06T13:31:38.740Z","dependency_job_id":null,"html_url":"https://github.com/EddyVerbruggen/nativescript-dark-mode","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/EddyVerbruggen/nativescript-dark-mode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EddyVerbruggen","download_url":"https://codeload.github.com/EddyVerbruggen/nativescript-dark-mode/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EddyVerbruggen%2Fnativescript-dark-mode/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262854766,"owners_count":23375186,"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","nativescript","nativescript-plugin","night-mode"],"created_at":"2024-09-26T09:21:42.099Z","updated_at":"2025-06-30T21:36:50.389Z","avatar_url":"https://github.com/EddyVerbruggen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dark Mode / Night Mode\n\n\u003e ⚠️️ This NativeScript plugin may become obsolete in the near future, because the awesome NativeScript team is working on built-in support for Dark Mode (and much more). If you're interested, [subscribe to this issue](https://github.com/NativeScript/NativeScript/issues/7313).\n\n[![Build Status][build-status]][build-url]\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][npm-url]\n[![Twitter Follow][twitter-image]][twitter-url]\n\n[build-status]:https://travis-ci.org/EddyVerbruggen/nativescript-dark-mode.svg?branch=master\n[build-url]:https://travis-ci.org/EddyVerbruggen/nativescript-dark-mode\n[npm-image]:https://img.shields.io/npm/v/nativescript-dark-mode.svg\n[npm-url]:https://npmjs.org/package/nativescript-dark-mode\n[downloads-image]:https://img.shields.io/npm/dm/nativescript-dark-mode.svg\n[twitter-image]:https://img.shields.io/twitter/follow/eddyverbruggen.svg?style=social\u0026label=Follow%20me\n[twitter-url]:https://twitter.com/eddyverbruggen\n\n## What's this all about?\nWith iOS 13 comes a new Dark Mode which Apple would like you (as a developer) to adopt.\nEven more, iOS will actively alter the appearance of your app's native UI components, so you **will** be affected by this change.\n\nSo to be able to load different CSS, images, or other assets when Dark Mode is enabled, you need some sort of\nproperty you can check and a notification when Dark Mode is enabled/disabled by the user in the phone's settings.\n\nThat's where this plugin comes in.\n\n\u003e Note that as long as you don't build with Xcode 11, even devices running iOS 13 will not be affected.\n\n\u003e By the way, Android has had \"Night Mode\" support since API level 8, but it's up to the vendors to expose it properly to users. NativeScript-Android apps are not affected by this setting, but you might as well apply the same logic to Android's Night Mode as you do to iOS' Dark Mode, so this plugin unifies those APIs.\n\n## Installation\n\n```shell\ntns plugin add nativescript-dark-mode\n```\n\n## Demo app\n\nIf you're stuck or want a quick demo of how this works, check out the demo app:\n\n```shell\ngit clone https://github.com/EddyVerbruggen/nativescript-dark-mode\ncd nativescript-dark-mode/src\nnpm run demo.ios # or demo.android\n```\n\n## API\n\n### `isDarkModeSupported`\n\nDark Mode was added in iOS 13, so you could check this function.\nIt's not required as the plugin will take care of this check internally when the other API functions are called.\n \n```typescript\nimport { isDarkModeSupported } from \"nativescript-dark-mode\";\n\nconst supported: boolean = isDarkModeSupported();\n```\n\n### `isDarkModeEnabled`\n\nIf at any moment you want to check for Dark Mode being enabled, you can do:\n\n```typescript\nimport { isDarkModeEnabled } from \"nativescript-dark-mode\";\n\nconst darkModeEnabled: boolean = isDarkModeEnabled();\n```\n\n### `addOnDarkModeChangedListener`\n\nTo get a notification while your app is running, you can register a listener with the plugin.\n\nIf you want to get notified on app launch as well, make sure to do this before the app starts.\nAs an example, see `app.ts` in the demo folder in this repo.\n\n```typescript\nimport { addOnDarkModeChangedListener } from \"nativescript-dark-mode\";\n\naddOnDarkModeChangedListener((isDarkMode: boolean) =\u003e {\n  console.log(\"Now on dark mode? \" + isDarkMode);\n});\n```\n\n### `setDarkModeStyleSheet` (unstable)\n\n\u003e ⚠️ This feature will probably be removed in an upcoming version, because we'll likely have a better (built-in) way soon.\n\nIf you want to load a different stylesheet when Dark Mode is enabled, then look no further.\nThere is one caveat though: currently, the stylesheet is **only applied on a cold start**,\nso if the user switched to Dark Mode while the app is running, your app won't be affected until the next restart.\n\n```typescript\nimport { setDarkModeStyleSheet } from \"nativescript-dark-mode\";\n\nsetDarkModeStyleSheet(\"./app-dark.css\");\n```\n\n\u003e **TIP:** you can extract all theme-independent CSS in `app.css` to `app-common.css` and add an `app-dark.css` that (just like `app.css`) extends `app-common.css`. Check the demo folder in this repo for an example.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddyverbruggen%2Fnativescript-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feddyverbruggen%2Fnativescript-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feddyverbruggen%2Fnativescript-dark-mode/lists"}