{"id":13794802,"url":"https://github.com/aparajita/capacitor-dark-mode","last_synced_at":"2026-01-17T11:54:31.250Z","repository":{"id":53862902,"uuid":"517176969","full_name":"aparajita/capacitor-dark-mode","owner":"aparajita","description":"Universal, reliable dark mode support for Capacitor apps on the web, iOS and Android","archived":false,"fork":false,"pushed_at":"2025-10-28T18:32:49.000Z","size":1091,"stargazers_count":28,"open_issues_count":2,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-28T20:30:23.486Z","etag":null,"topics":["capacitor","capacitor-android","capacitor-ios","capacitor-plugin","capacitor-web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/aparajita.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-07-23T22:27:36.000Z","updated_at":"2025-10-28T18:32:52.000Z","dependencies_parsed_at":"2024-01-02T23:10:11.580Z","dependency_job_id":"63083f38-a721-4468-9495-5392645abb5f","html_url":"https://github.com/aparajita/capacitor-dark-mode","commit_stats":{"total_commits":65,"total_committers":1,"mean_commits":65.0,"dds":0.0,"last_synced_commit":"86728dcdbf7d93db52d1857774f86081e447306e"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/aparajita/capacitor-dark-mode","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Fcapacitor-dark-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Fcapacitor-dark-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Fcapacitor-dark-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Fcapacitor-dark-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aparajita","download_url":"https://codeload.github.com/aparajita/capacitor-dark-mode/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aparajita%2Fcapacitor-dark-mode/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28508462,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T11:50:55.898Z","status":"ssl_error","status_checked_at":"2026-01-17T11:50:55.569Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["capacitor","capacitor-android","capacitor-ios","capacitor-plugin","capacitor-web"],"created_at":"2024-08-03T23:00:48.058Z","updated_at":"2026-01-17T11:54:31.231Z","avatar_url":"https://github.com/aparajita.png","language":"JavaScript","funding_links":[],"categories":["Plugins","Aparajita plugins"],"sub_categories":["Community Plugins","Specialized Hardware"],"readme":"\u003cdiv class=\"markdown-body\"\u003e\n\n# capacitor-dark-mode\u0026nbsp;\u0026nbsp;[![npm version](https://badge.fury.io/js/@aparajita%2Fcapacitor-dark-mode.svg)](https://badge.fury.io/js/@aparajita%2Fcapacitor-dark-mode)\n\nThis [Capacitor 7](https://capacitorjs.com) plugin is a complete dark mode solution for Ionic web, iOS and Android.\n\n### ❗️Breaking changes\n\nIn order to conform to Ionic 8’s built in dark mode support when importing `@ionic/vue/css/palettes/dark.class.css`, two changes have been made:\n\n- When running on Ionic 8+, the default dark mode class is now `.ion-palette-dark`. If you were using the default `.dark` class, replace all usages of `.dark` in your CSS with `.ion-palette-dark`.\n\n- The dark mode class is now applied to the `html` element instead of the `body`.\n\nIn order to conform with the Capacitor 6 listener interface, [`addAppearanceListener`](#addappearancelistener) now returns only a Promise and must be awaited.\n\n## Motivation\n\nOn the web and iOS, dark mode works easily with Ionic because browsers and WKWebView correctly handle the `prefers-color-scheme` CSS property. On Android, on the other hand, `prefers-color-scheme` is [well and truly broken](https://developer.android.com/guide/webapps/dark-theme). I have never seen it work reliably in an Ionic app, even with Capacitor 5 and the Android DayNight theme.\n\nWith this plugin, you can easily enable and control dark mode in your app across **all** platforms, guaranteed! This means that on Android versions prior to 10 (API 29), which is the first version to support system dark mode, you can allow the user to toggle dark mode.\n\n### Keep it DRY\n\nIf you implement dark mode as a user preference, you cannot rely solely on the CSS `prefers-color-scheme` query anyway; you have to use a class to indicate whether or not you are in dark mode. Maintaining an identical set of CSS variables for `prefers-color-scheme: dark` and a dark class selector is error-prone, extra maintenance, and in general violates the DRY principle.\n\nThis plugin relies solely on a dark class selector to indicate whether or not you are in dark mode, and manages the dark class for you based on the system dark mode and/or the user preference.\n\n[Installation](#installation) | [Configuration](#configuration) | [Usage](#usage) | [API](#api)\n\n## Features\n\n- Uniform API for enabling and controlling dark mode across all platforms. 👏\n- Automatic dark mode detection (in systems that support dark mode). 👀\n- Support for user dark mode switching. ☀️🌛\n- Support for custom dark mode preference storage. 💾\n- Updates the status bar to match the dark mode, even on Android. 🚀\n- Custom status bar colors on Android. 🌈\n- Register listeners for system dark mode changes. 🔥\n- Extensive documentation. 📚\n\n## Installation\n\nIn your app:\n\n```shell\npnpm add @aparajita/capacitor-dark-mode\n```\n\n## Configuration\n\nOnce the plugin is installed, you need to:\n\n- Provide a dark mode in your CSS if using Ionic \u003c 8, or `import '@ionic/vue/css/palettes/dark.class.css'` in Ionic 8+.\n- Initialize the plugin.\n\n### Dark mode CSS\n\nThis plugin adds or removes a CSS class to the `html` element when necessary. By default, the class is `.dark` on Ionic \u003c 8 and `.ion-palette-dark` on Ionic 8+, but you can configure it to be whatever you want.\n\n\u003e 👉🏽 **Note:** If you are using Tailwind’s [dark mode support](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually), set `darkMode: 'class'` in your Tailwind config file.\n\nIt is up to you to configure your CSS to actually implement dark mode when that class is present. A good place to start is the standard [Ionic dark mode](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme), which relies on the CSS variables that control Ionic component appearance.\n\nIf you have an existing CSS dark theme which relies on `prefers-color-scheme`, you should remove all `@media (prefers-color-scheme: dark)` rules and instead use `html.dark` (or simply `.dark`) as the dark mode selector. There is NO need to duplicate the dark mode in both a `@media (prefers-color-scheme: dark)` block and a `html.dark` block. That’s one of the advantages of using this plugin!\n\n```css\n/* Remove all prefers-color-scheme selectors! */\n@media (prefers-color-scheme: dark) {\n  html {\n    --ion-color-primary: #428cff;\n    /* ... */\n  }\n}\n\n/* Replace with this */\nhtml.dark {\n  --ion-color-primary: #428cff;\n  /* ... */\n}\n```\n\n### Plugin configuration\n\nIf you are using the default dark mode CSS class and you don’t allow the user to manually set light or dark mode — and thus don’t need to store a preference — you are all set! The plugin does all of the hard work for you.\n\nIf you are using a dark mode CSS class other than the default, you need to configure the plugin. You will want to do this just before the app is mounted to avoid any visual glitches. For example, if your app uses a dark mode CSS class of `.dark-mode`, you would configure the plugin like this in a Vue-based Ionic app:\n\n**main.ts**\n\n```typescript\nconst app = createApp(App).use(IonicVue, config).use(router)\n\nrouter\n  .isReady()\n  .then(() =\u003e {\n    // configure() is a synonym for init()\n    DarkMode.init({ cssClass: 'dark-mode' })\n      .then(() =\u003e {\n        app.mount('#app')\n      })\n      .catch(console.error)\n  })\n  .catch(console.error)\n```\n\nUse the equivalent in a React or Angular-based Ionic app.\n\n\u003e 👉🏽 **Note:** Using a custom dark mode class will not work on Ionic 8+ if you are importing `@ionic/vue/css/palettes/dark.class.css` You must use the default (`.ion-palette-dark`) in that case.\n\n#### Custom preference storage\n\nIf you want to store the user’s dark mode preference in a custom location (such as `localStorage`), you must create a getter function that returns the preference and a setter that stores the preference, and pass those functions to the `init` or `configure` method.\n\n**prefs.ts**\n\n```typescript\nimport type { DarkModeGetterResult } from '@aparajita/capacitor-dark-mode'\nimport { DarkModeAppearance } from '@aparajita/capacitor-dark-mode'\n\nconst kDarkModePref = 'dark-mode'\n\nexport function getAppearancePref(): DarkModeGetterResult {\n  return localStorage.getItem(kDarkModePref)\n}\n\nexport function setAppearancePref(appearance: DarkModeAppearance) {\n  localStorage.setItem(kDarkModePref, appearance)\n}\n```\n\n**main.ts**\n\n```typescript\nimport { getAppearancePref, setAppearancePref } from './prefs'\n\nrouter\n  .isReady()\n  .then(() =\u003e {\n    DarkMode.init({\n      cssClass: 'dark-mode',\n      getter: getAppearancePref,\n      setter: setAppearancePref,\n    })\n      .then(() =\u003e {\n        app.mount('#app')\n      })\n      .catch(console.error)\n  })\n  .catch(console.error)\n```\n\nThe example above uses a synchronous function, but you may also use an async getter that returns a Promise, so there are no constraints on how or where you store the preference.\n\n#### Android status bar customization\n\nOn Android, there are several additional options you can pass to `init()/configure()` that control what happens to the status bar when dark mode is toggled.\n\n**syncStatusBar**\u003cbr\u003e\nIf `syncStatusBar` is `true`, the status bar will be updated to match the dark mode. This is the default behavior.\n\n**statusBarBackgroundVariable**\u003cbr\u003e\nWhen `syncStatusBar` is `true`, by default the status bar background will set to the value of the `--background` CSS variable on the `ion-content` element, which is defined by `ion-content` as:\n\n```css\nion-content {\n  /*\n    The stock Ionic theme sets --ion-background-color\n    in dork mode.\n   */\n  --background: var(--ion-background-color, #fff);\n}\n```\n\nIf you want to use a different color for the status bar, you can set `statusBarBackgroundVariable` to the name of a different CSS variable. You can then set that variable accordingly in your CSS.\n\nIf the value of the variable is not a valid 3 or 6-digit '#'-prefixed hex color, no change is made.\n\n**statusBarStyleGetter**\u003cbr\u003e\nWhen `syncStatusBar` is `true` and a valid background color is set, by default the status bar style will be set according to the luminance of the background color:\n\n```typescript\n// Default threshold is 0.5\nconst statusBarStyle = isDarkColor(color) ? Style.Dark : Style.Light\n```\n\nIf you want to use a different style, you can set `statusBarStyleGetter` to a function that returns the style to use. The function will be called with the current `Style` (based on the appearance setting, not the background color) and the status bar background color, and should return the `Style` that the status bar should be set to.\n\nFor example, you could use `isDarkColor()` (which is exported by the plugin) with a different threshold:\n\n```typescript\nimport { Style } from '@capacitor/status-bar'\n\nconst statusBarStyleGetter = (style?: Style, color?: string) =\u003e {\n  if (color) {\n    const isDark = isDarkColor(color, 0.4)\n    return isDark ? Style.Dark : Style.Light\n  }\n\n  return style\n}\n```\n\n\u003e 👉🏽 **Note:** The getter is also called when `syncStatusBar` is `'textOnly'`.\n\n## Usage\n\nI could spend a lot of time explaining detailed usage, but perhaps the best explanation is a full example that uses the entire plugin API and shows how to handle user dark mode preference changes. Check out the demo app [here](https://github.com/aparajita/capacitor-dark-mode/tree/main/demo). You will especially want to look at [`prefs.ts`](https://github.com/aparajita/capacitor-dark-mode-demo/blob/main/src/prefs.ts) and [`dark-mode-demo.vue`](https://github.com/aparajita/capacitor-dark-mode-demo/blob/main/src/components/dark-mode-demo.vue).\n\n## API\n\n\u003cdocgen-index\u003e\n\n- [`init(...)`](#init)\n- [`configure(...)`](#configure)\n- [`isDarkMode()`](#isdarkmode)\n- [`setNativeDarkModeListener(...)`](#setnativedarkmodelistener)\n- [`addAppearanceListener(...)`](#addappearancelistener)\n- [`update(...)`](#update)\n- [Interfaces](#interfaces)\n- [Type Aliases](#type-aliases)\n- [Enums](#enums)\n\n\u003c/docgen-index\u003e\n\n\u003cdocgen-api\u003e\n\u003c!--Update the source file JSDoc comments and rerun docgen to update the docs below--\u003e\n\n### init(...)\n\n```typescript\ninit(options?: DarkModeOptions) =\u003e Promise\u003cvoid\u003e\n```\n\nInitializes the plugin and optionally configures the dark mode class and getter used to retrieve the current dark mode state. This should be done BEFORE the app is mounted but AFTER the dom is defined (e.g. at the end of the \u0026lt;body\u0026gt;) to avoid a flash of the wrong mode.\n\n| Param   | Type                                           |\n| :------ | :--------------------------------------------- |\n| options | \u003ca href=\"#darkmodeoptions\"\u003eDarkModeOptions\u003c/a\u003e |\n\n---\n\n### configure(...)\n\n```typescript\nconfigure(options?: DarkModeOptions) =\u003e Promise\u003cvoid\u003e\n```\n\nA synonym for `init`.\n\n| Param   | Type                                           |\n| :------ | :--------------------------------------------- |\n| options | \u003ca href=\"#darkmodeoptions\"\u003eDarkModeOptions\u003c/a\u003e |\n\n---\n\n### isDarkMode()\n\n```typescript\nisDarkMode() =\u003e Promise\u003cIsDarkModeResult\u003e\n```\n\nweb: Returns the result of the `prefers-color-scheme: dark` media query.\u003cbr\u003e\u003cbr\u003enative: Returns whether the system is currently in dark mode.\n\n**Returns:** Promise\u0026lt;\u003ca href=\"#isdarkmoderesult\"\u003eIsDarkModeResult\u003c/a\u003e\u0026gt;\n\n---\n\n### setNativeDarkModeListener(...)\n\n```typescript\nsetNativeDarkModeListener(options: Record\u003cstring, unknown\u003e, callback: DarkModeListener) =\u003e Promise\u003cstring\u003e\n```\n\n| Param    | Type                                                |\n| :------- | :-------------------------------------------------- |\n| options  | \u003ca href=\"#record\"\u003eRecord\u003c/a\u003e\u0026lt;string, unknown\u0026gt; |\n| callback | \u003ca href=\"#darkmodelistener\"\u003eDarkModeListener\u003c/a\u003e    |\n\n**Returns:** Promise\u0026lt;string\u0026gt;\n\n---\n\n### addAppearanceListener(...)\n\n```typescript\naddAppearanceListener(listener: DarkModeListener) =\u003e Promise\u003cDarkModeListenerHandle\u003e\n```\n\nAdds a listener that will be called whenever the system appearance changes, whether or not the system appearance matches your current appearance. The listener is called AFTER the dark mode class and status bar are updated by the plugin. The listener will be called with \u003ca href=\"#darkmodelistenerdata\"\u003e`DarkModeListenerData`\u003c/a\u003e indicating if the current system appearance is dark.\u003cbr\u003e\u003cbr\u003eThe returned handle contains a `remove` function which you should be sure to call when the listener is no longer needed, for example when a component is unmounted (which happens a lot with HMR). Otherwise there will be a memory leak and multiple listeners executing the same function.\n\n| Param    | Type                                             |\n| :------- | :----------------------------------------------- |\n| listener | \u003ca href=\"#darkmodelistener\"\u003eDarkModeListener\u003c/a\u003e |\n\n**Returns:** Promise\u0026lt;\u003ca href=\"#darkmodelistenerhandle\"\u003eDarkModeListenerHandle\u003c/a\u003e\u0026gt;\n\n---\n\n### update(...)\n\n```typescript\nupdate(data?: DarkModeListenerData) =\u003e Promise\u003cDarkModeAppearance\u003e\n```\n\nAdds or removes the dark mode class on the html element depending on the dark mode state. You do NOT need to call this when the system appearance changes.\u003cbr\u003e\u003cbr\u003eIf you are manually setting the appearance and you have specified a getter function, you should call this method AFTER the value returned by the configured getter changes.\u003cbr\u003e\u003cbr\u003eReturns the current appearance.\n\n| Param | Type                                                     |\n| :---- | :------------------------------------------------------- |\n| data  | \u003ca href=\"#darkmodelistenerdata\"\u003eDarkModeListenerData\u003c/a\u003e |\n\n**Returns:** Promise\u0026lt;\u003ca href=\"#darkmodeappearance\"\u003eDarkModeAppearance\u003c/a\u003e\u0026gt;\n\n---\n\n### Interfaces\n\n#### DarkModeOptions\n\nThe options passed to `configure`.\n\n| Prop                        | Type                                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| :-------------------------- | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| cssClass                    | string                                                     | The CSS class name to use to toggle dark mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| getter                      | \u003ca href=\"#darkmodegetter\"\u003eDarkModeGetter\u003c/a\u003e               | If set, this function will be called to retrieve the current dark mode state instead of `isDarkMode`. For example, you might want to let the user set dark/light mode manually and store that preference somewhere. If the function wants to signal that no value can be retrieved, it should return null or undefined, in which case `isDarkMode` will be used.\u003cbr\u003e\u003cbr\u003eIf you are not providing any storage of the dark mode state, don't pass this in the options.                                                                                          |\n| setter                      | \u003ca href=\"#darkmodesetter\"\u003eDarkModeSetter\u003c/a\u003e               | If set, this function will be called to set the current dark mode state when `update` is called. For example, you might want to let the user set dark/light mode manually and store that preference somewhere, such as localStorage.                                                                                                                                                                                                                                                                                                                          |\n| disableTransitions          | boolean                                                    | If true, the plugin will automatically disable all transitions when dark mode is toggled. This is to prevent different elements from switching between light and dark mode at different rates. \u0026lt;ion-item\u0026gt;, for example, by default has a transition on all of its properties.\u003cbr\u003e\u003cbr\u003eSet this to false if you want to handle transitions yourself.                                                                                                                                                                                                      |\n| syncStatusBar               | \u003ca href=\"#darkmodesyncstatusbar\"\u003eDarkModeSyncStatusBar\u003c/a\u003e | Android only\u003cbr\u003e\u003cbr\u003eIf `statusBarStyleGetter` is set, this option is unused.\u003cbr\u003e\u003cbr\u003eIf true, on Android the status bar background and content will be synced with the current \u003ca href=\"#darkmodeappearance\"\u003e`DarkModeAppearance`\u003c/a\u003e.\u003cbr\u003e\u003cbr\u003eIf 'textOnly', on Android only the status bar content will be synced with the current \u003ca href=\"#darkmodeappearance\"\u003e`DarkModeAppearance`\u003c/a\u003e: a light color when the appearance is dark and vice versa.\u003cbr\u003e\u003cbr\u003eOn iOS this option is not used, the status bar background is synced with dark mode by the system. |\n| statusBarBackgroundVariable | string                                                     | Android only\u003cbr\u003e\u003cbr\u003eIf set, this CSS variable will be used instead of '--background' to set the status bar background color.                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| statusBarStyleGetter        | \u003ca href=\"#statusbarstylegetter\"\u003eStatusBarStyleGetter\u003c/a\u003e   | Android only\u003cbr\u003e\u003cbr\u003eIf set, and `syncStatusBar` is true, this function will be called to retrieve the current status bar style instead of basing it on the dark mode. If the function wants to signal that no value can be retrieved, it should return a falsey value, in which case the current appearance will be used to determine the style.                                                                                                                                                                                                              |\n\n#### IsDarkModeResult\n\nResult returned by `isDarkMode`.\n\n| Prop | Type    |\n| :--- | :------ |\n| dark | boolean |\n\n#### DarkModeListenerData\n\nYour appearance listener callback will receive this data, indicating whether the system is in dark mode or not.\n\n| Prop | Type    |\n| :--- | :------ |\n| dark | boolean |\n\n#### DarkModeListenerHandle\n\nWhen you call `addAppearanceListener`, you get back a handle that you can use to remove the listener. See [addAppearanceListener](#addappearancelistener) for more details.\n\n| Method     | Signature     |\n| :--------- | :------------ |\n| **remove** | () =\u0026gt; void |\n\n### Type Aliases\n\n#### DarkModeGetter\n\nThe type of your appearance getter function.\n\n\u003ccode\u003e(): \u003ca href=\"#darkmodegetterresult\"\u003eDarkModeGetterResult\u003c/a\u003e | Promise\u0026lt;\u003ca href=\"#darkmodegetterresult\"\u003eDarkModeGetterResult\u003c/a\u003e\u0026gt;\u003c/code\u003e\n\n#### DarkModeGetterResult\n\nYour appearance getter function should return (directly or as a Promise) either:\u003cbr\u003e\u003cbr\u003e- A \u003ca href=\"#darkmodeappearance\"\u003eDarkModeAppearance\u003c/a\u003e to signify that is the appearance you want\u003cbr\u003e\u003cbr\u003e- null or undefined to signify the system appearance should be used\n\n\u003ccode\u003e\u003ca href=\"#darkmodeappearance\"\u003eDarkModeAppearance\u003c/a\u003e | null\u003c/code\u003e |\n\n#### DarkModeSetter\n\nThe type of your appearance setter function.\n\n\u003ccode\u003e(appearance: \u003ca href=\"#darkmodeappearance\"\u003eDarkModeAppearance\u003c/a\u003e): void | Promise\u0026lt;void\u0026gt;\u003c/code\u003e\n\n#### DarkModeSyncStatusBar\n\nPossible values for the syncStatusBar option.\n\n\u003ccode\u003eboolean | 'textOnly'\u003c/code\u003e\n\n#### StatusBarStyleGetter\n\nThe type of your status bar style getter function.\n\n\u003ccode\u003e(style?: \u003ca href=\"#style\"\u003eStyle\u003c/a\u003e, backgroundColor?: string): \u003ca href=\"#statusbarstylegetterresult\"\u003eStatusBarStyleGetterResult\u003c/a\u003e | Promise\u0026lt;\u003ca href=\"#statusbarstylegetterresult\"\u003eStatusBarStyleGetterResult\u003c/a\u003e\u0026gt;\u003c/code\u003e\n\n#### StatusBarStyleGetterResult\n\nYour style getter function should return (directly or as a Promise) either:\u003cbr\u003e\u003cbr\u003e- A \u003ca href=\"#style\"\u003eStyle\u003c/a\u003e to signify that is the style you want\u003cbr\u003e\u003cbr\u003e- null or undefined to signify the default behavior should be used\n\n\u003ccode\u003e\u003ca href=\"#style\"\u003eStyle\u003c/a\u003e | null\u003c/code\u003e |\n\n#### Record\n\nConstruct a type with a set of properties K of type T\n\n\u003ccode\u003e{\n[P in K]: T;\n}\u003c/code\u003e\n\n#### DarkModeListener\n\nThe type of your appearance listener callback.\n\n\u003ccode\u003e(data: \u003ca href=\"#darkmodelistenerdata\"\u003eDarkModeListenerData\u003c/a\u003e): void\u003c/code\u003e\n\n### Enums\n\n#### DarkModeAppearance\n\n| Members | Value    |\n| :------ | :------- |\n| dark    | 'dark'   |\n| light   | 'light'  |\n| system  | 'system' |\n\n#### Style\n\n| Members | Value     | Description                                                                                                                                                                                                                                            |\n| :------ | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Dark    | \"DARK\"    | Light text for dark backgrounds.                                                                                                                                                                                                                       |\n| Light   | \"LIGHT\"   | Dark text for light backgrounds.                                                                                                                                                                                                                       |\n| Default | \"DEFAULT\" | The style is based on the device appearance. If the device is using Dark mode, the statusbar text will be light. If the device is using Light mode, the statusbar text will be dark. On Android the default will be the one the app was launched with. |\n\n\u003c/docgen-api\u003e\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faparajita%2Fcapacitor-dark-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faparajita%2Fcapacitor-dark-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faparajita%2Fcapacitor-dark-mode/lists"}