{"id":14988436,"url":"https://github.com/ollm/cordova-plugin-dynamic-color","last_synced_at":"2025-04-14T16:41:04.571Z","repository":{"id":142184873,"uuid":"613004575","full_name":"ollm/cordova-plugin-dynamic-color","owner":"ollm","description":"Get the colors of the Dynamic Color theme in Android 12+","archived":false,"fork":false,"pushed_at":"2023-06-21T10:32:41.000Z","size":25,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T14:04:47.644Z","etag":null,"topics":["android-dark-theme","cordova","cordova-android","cordova-plugin","dynamic-color","dynamic-colors","material-3","material-design","material-you"],"latest_commit_sha":null,"homepage":"","language":"Java","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/ollm.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":"2023-03-12T16:09:41.000Z","updated_at":"2025-03-30T19:36:58.000Z","dependencies_parsed_at":"2024-09-25T00:34:00.337Z","dependency_job_id":null,"html_url":"https://github.com/ollm/cordova-plugin-dynamic-color","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"fdf79428d613da0487eae4ab0298435ff1e53bb9"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ollm%2Fcordova-plugin-dynamic-color","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ollm%2Fcordova-plugin-dynamic-color/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ollm%2Fcordova-plugin-dynamic-color/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ollm%2Fcordova-plugin-dynamic-color/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ollm","download_url":"https://codeload.github.com/ollm/cordova-plugin-dynamic-color/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248918089,"owners_count":21183114,"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-dark-theme","cordova","cordova-android","cordova-plugin","dynamic-color","dynamic-colors","material-3","material-design","material-you"],"created_at":"2024-09-24T14:16:42.323Z","updated_at":"2025-04-14T16:41:04.551Z","avatar_url":"https://github.com/ollm.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cordova-plugin-dynamic-color\n\n![cordova-dynamic-color](https://user-images.githubusercontent.com/18549191/224811654-e745d7a6-fe2d-4ef4-88d3-8883cd8ab537.jpg)\n\u003c!-- ![cordova-dynamic-color-6](https://user-images.githubusercontent.com/18549191/224815105-cafa8060-b50f-4079-864c-2340229adeaa.jpg) --\u003e\n\n\u003e The `DynamicColor` object provides some functions to obtain current [dynamic color](https://m3.material.io/styles/color/dynamic-color/overview) palette/colors in Android 12+ and dark theme status in Android 9+.\n\n**Table of Contents**\n\n- [Installation](#installation)\n- [Methods](#methods)\n  - [Simple example of plugin usage](#simple-example-of-plugin-usage)\n  - [DynamicColor.isDynamicColorAvailable](#dynamiccolorisdynamiccoloravailable)\n  - [DynamicColor.dayNight](#dynamiccolordaynight)\n  - [DynamicColor.colors](#dynamiccolorcolors)\n  - [DynamicColor.palette](#dynamiccolorpalette)\n  - [DynamicColor.tintColors](#dynamiccolortintcolors)\n  - [DynamicColor.tintSurfaceColors](#dynamiccolortintsurfacecolors)\n  - [DynamicColor.mixColor](#dynamiccolormixcolor)\n  - [DynamicColor.mixColorElevation](#dynamiccolormixcolorelevation)\n  - [DynamicColor.colorsToCssVars](#dynamiccolorcolorstocssvars)\n  - [DynamicColor.paletteToCssVars](#dynamiccolorpalettetocssvars)\n  - [DynamicColor.colorsToDom](#dynamiccolorcolorstodom)\n  - [DynamicColor.paletteToDom](#dynamiccolorpalettetodom)\n- [Events](#events)\n  - [dynamicColorChange](#dynamiccolorchange)\n\n\n## Installation\n\n`cordova plugin add cordova-plugin-dynamic-color`\n\n## Methods\n\nThis plugin defines global `DynamicColor` object.\n\nAlthough in the global scope, it is not available until after the `deviceready` event.\n\n```js\ndocument.addEventListener(\"deviceready\", onDeviceReady, false);\n\nfunction onDeviceReady()\n{\n    console.log(DynamicColor);\n}\n```\n\n### Simple example of plugin usage\n\n```js\ndocument.addEventListener(\"deviceready\", onDeviceReady, false);\n\nfunction onDeviceReady()\n{\n\tDynamicColor.isDynamicColorAvailable(function(available) {\n\n\t\tif(available) {\n\n\t\t\tgetDynamicColor();\n\n\t\t\tdocument.addEventListener('dynamicColorChange', getDynamicColor);\n\t\t}\n\n\t});\n\n}\n\nfunction getDynamicColor() {\n\n\tDynamicColor.colors(function(colors) {\n\n\t\tDynamicColor.colorsToDom(DynamicColor.tintSurfaceColors(colors.dayNight));\n\n\t});\n\n\t// Optional palette colors\n\tDynamicColor.palette(function(colors) {\n\n\t\tDynamicColor.paletteToDom(colors.palette);\n\n\t});\n\n}\n```\n\n```css\n.myAppStyle\n{\n\tcolor: var(--md-sys-color-primary);\n\tbackground: var(--md-ref-palette-neutral-variant95);\n}\n```\n\n### DynamicColor.isDynamicColorAvailable\n\nCheck if the DynamicColor its available in current Android device.\n\n```js\nDynamicColor.isDynamicColorAvailable(function(available) {\n\n\tif(available) {\n\n\t}\n\n});\n```\n\n### DynamicColor.dayNight\n\nCheck current DayNight theme (check if dark theme is on or off).\n\n```js\nDynamicColor.dayNight(function(theme) {\n\n\tif(theme == 'light') {\n\n\t} else { // theme == 'dark'\n\n\t}\n\n});\n```\n\n### DynamicColor.colors\n\nReturn the DynamicColor colors\n\n```js\nDynamicColor.colors(function(colors) {\n\n\tcolors = {\n\t\ttheme: 'light', // 'light' or 'dark'\n\t\tlight: {\n\t\t\tprimary: '#8D4E2A',\n\t\t\tonPrimary: '#FFFFFF',\n\t\t\tprimaryContainer: '#331100',\n\t\t\tonPrimaryContainer: '#000000',\n\t\t\tsecondary: '#765848',\n\t\t\tonSecondary: '#FFFFFF',\n\t\t\tsecondaryContainer: '#FFDBCA',\n\t\t\tonSecondaryContainer: '#2B160A',\n\t\t\ttertiary: '#646032',\n\t\t\tonTertiary: '#FFFFFF',\n\t\t\ttertiaryContainer: '#1E1C00',\n\t\t\tonTertiaryContainer: '#000000',\n\t\t\terror: '#B3261E',\n\t\t\tonError: '#FFFFFF',\n\t\t\terrorContainer: '#F9DEDC',\n\t\t\tonErrorContainer: '#410E0B',\n\t\t\toutline: '#84736A',\n\t\t\tbackground: '#FFFBFF',\n\t\t\tonBackground: '#201A17',\n\t\t\tsurface: '#FFFBFF',\n\t\t\tonSurface: '#201A17',\n\t\t\tsurfaceVariant: '#F4DED4',\n\t\t\tonSurfaceVariant: '#52443D',\n\t\t\tinverseSurface: '#362F2C',\n\t\t\tinverseOnSurface: '#FBEEE9',\n\t\t\tinversePrimary: '#FFB68F',\n\t\t\tshadow: '#000000',\n\t\t\tsurfaceTint: '#000000',\n\t\t\toutlineVariant: '#D7C2B9',\n\t\t\tscrim: '#000000',\n\t\t},\n\t\tdark: {\n\t\t\t...\n\t\t}\n\t\tdayNight: {\n\t\t\t...\n\t\t}\n\t}\n\n});\n```\n\n### DynamicColor.palette\n\nReturn the DynamicColor palette\n\n```js\nDynamicColor.palette(function(colors) {\n\n\tcolors = {\n\t\ttheme: 'light', // 'light' or 'dark'\n\t\tpalette: {\n\t\t\terror0: '#000000',\n\t\t\terror10: '#410E0B',\n\t\t\terror20: '#601410',\n\t\t\terror30: '#8C1D18',\n\t\t\terror40: '#B3261E',\n\t\t\terror50: '#DC362E',\n\t\t\terror60: '#E46962',\n\t\t\terror70: '#EC928E',\n\t\t\terror80: '#F2B8B5',\n\t\t\terror90: '#F9DEDC',\n\t\t\terror95: '#FCEEEE',\n\t\t\terror99: '#FFFBF9',\n\t\t\terror100: '#FFFFFF',\n\t\t\tneutral0: '#000000',\n\t\t\tneutral10: '#201A17',\n\t\t\tneutral20: '#362F2C',\n\t\t\tneutral30: '#4D4542',\n\t\t\tneutral40: '#655D59',\n\t\t\tneutral50: '#7D7470',\n\t\t\tneutral60: '#998F8A',\n\t\t\tneutral70: '#B4A9A4',\n\t\t\tneutral80: '#D0C4BF',\n\t\t\tneutral90: '#ECE0DB',\n\t\t\tneutral95: '#FBEEE9',\n\t\t\tneutral99: '#FFFBFF',\n\t\t\tneutral100: '#FFFFFF',\n\t\t\tneutralVariant0: '#000000',\n\t\t\tneutralVariant10: '#241913',\n\t\t\tneutralVariant20: '#3B2E27',\n\t\t\tneutralVariant30: '#52443D',\n\t\t\tneutralVariant40: '#6B5B53',\n\t\t\tneutralVariant50: '#84736A',\n\t\t\tneutralVariant60: '#9F8D84',\n\t\t\tneutralVariant70: '#BBA79E',\n\t\t\tneutralVariant80: '#D7C2B9',\n\t\t\tneutralVariant90: '#F4DED4',\n\t\t\tneutralVariant95: '#FFEDE6',\n\t\t\tneutralVariant99: '#FFFBFF',\n\t\t\tneutralVariant100: '#FFFFFF',\n\t\t\tprimary0: '#000000',\n\t\t\tprimary10: '#331100',\n\t\t\tprimary20: '#532201',\n\t\t\tprimary30: '#703715',\n\t\t\tprimary40: '#8D4E2A',\n\t\t\tprimary50: '#A9653F',\n\t\t\tprimary60: '#C87F56',\n\t\t\tprimary70: '#E7996E',\n\t\t\tprimary80: '#FFB68F',\n\t\t\tprimary90: '#FFDBCA',\n\t\t\tprimary95: '#FFEDE6',\n\t\t\tprimary99: '#FFFBFF',\n\t\t\tprimary100: '#FFFFFF',\n\t\t\tsecondary0: '#000000',\n\t\t\tsecondary10: '#2B160A',\n\t\t\tsecondary20: '#432B1D',\n\t\t\tsecondary30: '#5C4132',\n\t\t\tsecondary40: '#765848',\n\t\t\tsecondary50: '#906F5E',\n\t\t\tsecondary60: '#AC8978',\n\t\t\tsecondary70: '#C9A391',\n\t\t\tsecondary80: '#E6BEAB',\n\t\t\tsecondary90: '#FFDBCA',\n\t\t\tsecondary95: '#FFEDE6',\n\t\t\tsecondary99: '#FFFBFF',\n\t\t\tsecondary100: '#FFFFFF',\n\t\t\ttertiary0: '#000000',\n\t\t\ttertiary10: '#1E1C00',\n\t\t\ttertiary20: '#343108',\n\t\t\ttertiary30: '#4B481D',\n\t\t\ttertiary40: '#646032',\n\t\t\ttertiary50: '#7C7847',\n\t\t\ttertiary60: '#97925F',\n\t\t\ttertiary70: '#B2AD78',\n\t\t\ttertiary80: '#CEC891',\n\t\t\ttertiary90: '#EBE4AA',\n\t\t\ttertiary95: '#F9F3B8',\n\t\t\ttertiary99: '#FFFBFF',\n\t\t\ttertiary100: '#FFFFFF'\n\t\t}\n\t}\n\n});\n```\n\n### DynamicColor.tintColors\n\nApply the tint according to [Material Design Guidelines](https://m3.material.io/styles/color/the-color-system/color-roles#c0cdc1ba-7e67-4d6a-b294-218f659ff648), you can also use css [`color-mix`](https://developer.chrome.com/blog/css-color-mix/) to mix the surface with tint (`color-mix(in srgb, var(--md-sys-color-on-surface), var(--md-sys-color-on-surface-tint) 5%)`), but currently it's not [supported](https://caniuse.com/?search=color-mix) for many browsers.\n\n```js\nvar colors = DynamicColor.tintColors(colors.light, Array onlyKeys = false);\n\ncolors = {\n\tsurface: '#FFFBFF',\n\tsurface1: '#f9f2f4',\n\tsurface2: '#f6edee',\n\tsurface3: '#f2e8e8',\n\tsurface4: '#f1e6e5',\n\tsurface5: '#efe3e1',\n\t...\n}\n\n/*\n--md-sys-color-surface: #FFFBFF;\n--md-sys-color-surface1: #f9f2f4;\n--md-sys-color-surface2: #f6edee;\n--md-sys-color-surface3: #f2e8e8;\n--md-sys-color-surface4: #f1e6e5;\n--md-sys-color-surface5: #efe3e1;\n...\n*/\n\n```\n\n- __onlyKeys__ Keys to generate tint versions, by default all keys.\n\n### DynamicColor.tintSurfaceColors\n\nSame as above code, but only applies to surfaces (Including background).\n\n```js\nvar colors = DynamicColor.tintSurfaceColors(colors.light);\n\ncolors = {\n\tsurface: '#FFFBFF',\n\tsurface1: '#f9f2f4',\n\tsurface2: '#f6edee',\n\tsurface3: '#f2e8e8',\n\tsurface4: '#f1e6e5',\n\tsurface5: '#efe3e1',\n\t...\n}\n\n/*\n--md-sys-color-surface: #FFFBFF;\n--md-sys-color-surface1: #f9f2f4;\n--md-sys-color-surface2: #f6edee;\n--md-sys-color-surface3: #f2e8e8;\n--md-sys-color-surface4: #f1e6e5;\n--md-sys-color-surface5: #efe3e1;\n...\n*/\n```\n\n### DynamicColor.mixColor\n\nMix two colors to one acording a amount.\n\n```js\nDynamicColor.mixColor(String color1, String color2, Float amount);\n```\n\n-  __amount__ Amount, from 0.0 to 1.0\n\n### DynamicColor.mixColorElevation\n\nMix two colors to one acording a [Material Design Guidelines Elevation](https://m3.material.io/styles/color/the-color-system/color-roles#de5b0f5e-c4a5-48ef-8670-369682e9c7b7).\n\n```js\nDynamicColor.mixColorElevation(String color1, String color2, Int elevation);\n```\n\n-  __elevation__ Elevation, from 1 to 5.\n\n### DynamicColor.colorsToCssVars\n\nConvert the colors object to css vars.\n\n```js\nDynamicColor.colors(function(colors) {\n\n\tvar cssVars = DynamicColor.colorsToCssVars(colors.light, String prefix = '--md-sys-color');\n\n\t/*\n\t--md-sys-color-primary: #8D4E2A;\n\t--md-sys-color-on-primary: #FFFFFF;\n\t...\n\t*/\n\n}\n```\n\n### DynamicColor.paletteToCssVars\n\nConvert the palette object to css vars.\n\n```js\nDynamicColor.palette(function(colors) {\n\n\tvar cssVars = DynamicColor.paletteToCssVars(colors.palette, String prefix = '--md-ref-palette');\n\n\t/*\n\t--md-ref-palette-error0: #000000;\n\t--md-ref-palette-error10: #410E0B;\n\t...\n\t*/\n\n}\n```\n\n### DynamicColor.colorsToDom\n\nConvert the colors object to css vars and insert/update it in the dom.\n\n```js\nDynamicColor.colors(function(colors) {\n\n\tDynamicColor.colorsToDom(colors.dark, String prefix = '--md-sys-color');\n\n}\n```\n\n### DynamicColor.paletteToDom\n\nConvert the palette object to css vars and insert/update it in the dom.\n\n```js\nDynamicColor.palette(function(colors) {\n\n\tDynamicColor.paletteToDom(colors.palette, String prefix = '--md-ref-palette');\n\n}\n```\n\n## Events\n\n### dynamicColorChange\n\nThis event is fired when any change in DayNight or DynamiColor (or both at the same time) is detected.\n\n```js\ndocument.addEventListener('dynamicColorChange', function(event) {\n\n\tevent.changed = {\n\t\tdayNight: true, // true if the DayNight theme have changed (dark theme turned on or off)\n\t\tdynamicColor: true, // true if the DynamiColor colors/palette have changed\n\t}\n\n\tif(event.changed.dayNight) {\n\n\t\tDynamicColor.dayNight(function(theme) {\n\n\t\t\tif(theme == 'light') {\n\n\t\t\t} else { // theme == 'dark'\n\n\t\t\t}\n\n\t\t});\n\n\t}\n\n\tif(event.changed.dynamicColor) {\n\t\tgetDynamicColor();\n\t}\n\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Follm%2Fcordova-plugin-dynamic-color","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Follm%2Fcordova-plugin-dynamic-color","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Follm%2Fcordova-plugin-dynamic-color/lists"}