The
DynamicColorobject provides some functions to obtain current dynamic color palette/colors in Android 12+ and dark theme status in Android 9+.
Table of Contents
- Installation
- Methods
- Simple example of plugin usage
- DynamicColor.isDynamicColorAvailable
- DynamicColor.dayNight
- DynamicColor.colors
- DynamicColor.palette
- DynamicColor.tintColors
- DynamicColor.tintSurfaceColors
- DynamicColor.mixColor
- DynamicColor.mixColorElevation
- DynamicColor.colorsToCssVars
- DynamicColor.paletteToCssVars
- DynamicColor.colorsToDom
- DynamicColor.paletteToDom
- Events
cordova plugin add cordova-plugin-dynamic-color
This plugin defines global DynamicColor object.
Although in the global scope, it is not available until after the deviceready event.
document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log(DynamicColor); }document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { DynamicColor.isDynamicColorAvailable(function(available) { if(available) { getDynamicColor(); document.addEventListener('dynamicColorChange', getDynamicColor); } }); } function getDynamicColor() { DynamicColor.colors(function(colors) { DynamicColor.colorsToDom(DynamicColor.tintSurfaceColors(colors.dayNight)); }); // Optional palette colors DynamicColor.palette(function(colors) { DynamicColor.paletteToDom(colors.palette); }); }.myAppStyle { color: var(--md-sys-color-primary); background: var(--md-ref-palette-neutral-variant95); }Check if the DynamicColor its available in current Android device.
DynamicColor.isDynamicColorAvailable(function(available) { if(available) { } });Check current DayNight theme (check if dark theme is on or off).
DynamicColor.dayNight(function(theme) { if(theme == 'light') { } else { // theme == 'dark' } });Return the DynamicColor colors
DynamicColor.colors(function(colors) { colors = { theme: 'light', // 'light' or 'dark' light: { primary: '#8D4E2A', onPrimary: '#FFFFFF', primaryContainer: '#331100', onPrimaryContainer: '#000000', secondary: '#765848', onSecondary: '#FFFFFF', secondaryContainer: '#FFDBCA', onSecondaryContainer: '#2B160A', tertiary: '#646032', onTertiary: '#FFFFFF', tertiaryContainer: '#1E1C00', onTertiaryContainer: '#000000', error: '#B3261E', onError: '#FFFFFF', errorContainer: '#F9DEDC', onErrorContainer: '#410E0B', outline: '#84736A', background: '#FFFBFF', onBackground: '#201A17', surface: '#FFFBFF', onSurface: '#201A17', surfaceVariant: '#F4DED4', onSurfaceVariant: '#52443D', inverseSurface: '#362F2C', inverseOnSurface: '#FBEEE9', inversePrimary: '#FFB68F', shadow: '#000000', surfaceTint: '#000000', outlineVariant: '#D7C2B9', scrim: '#000000', }, dark: { ... } dayNight: { ... } } });Return the DynamicColor palette
DynamicColor.palette(function(colors) { colors = { theme: 'light', // 'light' or 'dark' palette: { error0: '#000000', error10: '#410E0B', error20: '#601410', error30: '#8C1D18', error40: '#B3261E', error50: '#DC362E', error60: '#E46962', error70: '#EC928E', error80: '#F2B8B5', error90: '#F9DEDC', error95: '#FCEEEE', error99: '#FFFBF9', error100: '#FFFFFF', neutral0: '#000000', neutral10: '#201A17', neutral20: '#362F2C', neutral30: '#4D4542', neutral40: '#655D59', neutral50: '#7D7470', neutral60: '#998F8A', neutral70: '#B4A9A4', neutral80: '#D0C4BF', neutral90: '#ECE0DB', neutral95: '#FBEEE9', neutral99: '#FFFBFF', neutral100: '#FFFFFF', neutralVariant0: '#000000', neutralVariant10: '#241913', neutralVariant20: '#3B2E27', neutralVariant30: '#52443D', neutralVariant40: '#6B5B53', neutralVariant50: '#84736A', neutralVariant60: '#9F8D84', neutralVariant70: '#BBA79E', neutralVariant80: '#D7C2B9', neutralVariant90: '#F4DED4', neutralVariant95: '#FFEDE6', neutralVariant99: '#FFFBFF', neutralVariant100: '#FFFFFF', primary0: '#000000', primary10: '#331100', primary20: '#532201', primary30: '#703715', primary40: '#8D4E2A', primary50: '#A9653F', primary60: '#C87F56', primary70: '#E7996E', primary80: '#FFB68F', primary90: '#FFDBCA', primary95: '#FFEDE6', primary99: '#FFFBFF', primary100: '#FFFFFF', secondary0: '#000000', secondary10: '#2B160A', secondary20: '#432B1D', secondary30: '#5C4132', secondary40: '#765848', secondary50: '#906F5E', secondary60: '#AC8978', secondary70: '#C9A391', secondary80: '#E6BEAB', secondary90: '#FFDBCA', secondary95: '#FFEDE6', secondary99: '#FFFBFF', secondary100: '#FFFFFF', tertiary0: '#000000', tertiary10: '#1E1C00', tertiary20: '#343108', tertiary30: '#4B481D', tertiary40: '#646032', tertiary50: '#7C7847', tertiary60: '#97925F', tertiary70: '#B2AD78', tertiary80: '#CEC891', tertiary90: '#EBE4AA', tertiary95: '#F9F3B8', tertiary99: '#FFFBFF', tertiary100: '#FFFFFF' } } });Apply the tint according to Material Design Guidelines, you can also use 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 for many browsers.
var colors = DynamicColor.tintColors(colors.light, Array onlyKeys = false); colors = { surface: '#FFFBFF', surface1: '#f9f2f4', surface2: '#f6edee', surface3: '#f2e8e8', surface4: '#f1e6e5', surface5: '#efe3e1', ... } /* --md-sys-color-surface: #FFFBFF; --md-sys-color-surface1: #f9f2f4; --md-sys-color-surface2: #f6edee; --md-sys-color-surface3: #f2e8e8; --md-sys-color-surface4: #f1e6e5; --md-sys-color-surface5: #efe3e1; ... */- onlyKeys Keys to generate tint versions, by default all keys.
Same as above code, but only applies to surfaces (Including background).
var colors = DynamicColor.tintSurfaceColors(colors.light); colors = { surface: '#FFFBFF', surface1: '#f9f2f4', surface2: '#f6edee', surface3: '#f2e8e8', surface4: '#f1e6e5', surface5: '#efe3e1', ... } /* --md-sys-color-surface: #FFFBFF; --md-sys-color-surface1: #f9f2f4; --md-sys-color-surface2: #f6edee; --md-sys-color-surface3: #f2e8e8; --md-sys-color-surface4: #f1e6e5; --md-sys-color-surface5: #efe3e1; ... */Mix two colors to one acording a amount.
DynamicColor.mixColor(String color1, String color2, Float amount);- amount Amount, from 0.0 to 1.0
Mix two colors to one acording a Material Design Guidelines Elevation.
DynamicColor.mixColorElevation(String color1, String color2, Int elevation);- elevation Elevation, from 1 to 5.
Convert the colors object to css vars.
DynamicColor.colors(function(colors) { var cssVars = DynamicColor.colorsToCssVars(colors.light, String prefix = '--md-sys-color'); /* --md-sys-color-primary: #8D4E2A; --md-sys-color-on-primary: #FFFFFF; ... */ }Convert the palette object to css vars.
DynamicColor.palette(function(colors) { var cssVars = DynamicColor.paletteToCssVars(colors.palette, String prefix = '--md-ref-palette'); /* --md-ref-palette-error0: #000000; --md-ref-palette-error10: #410E0B; ... */ }Convert the colors object to css vars and insert/update it in the dom.
DynamicColor.colors(function(colors) { DynamicColor.colorsToDom(colors.dark, String prefix = '--md-sys-color'); }Convert the palette object to css vars and insert/update it in the dom.
DynamicColor.palette(function(colors) { DynamicColor.paletteToDom(colors.palette, String prefix = '--md-ref-palette'); }This event is fired when any change in DayNight or DynamiColor (or both at the same time) is detected.
document.addEventListener('dynamicColorChange', function(event) { event.changed = { dayNight: true, // true if the DayNight theme have changed (dark theme turned on or off) dynamicColor: true, // true if the DynamiColor colors/palette have changed } if(event.changed.dayNight) { DynamicColor.dayNight(function(theme) { if(theme == 'light') { } else { // theme == 'dark' } }); } if(event.changed.dynamicColor) { getDynamicColor(); } });