Skip to main content
This guide will walk you through implementing Dynamic Color in your Cordova application using a complete working example.

​
Complete Example

Here’s a fully functional implementation that checks for Dynamic Color availability, retrieves colors, applies them to your DOM, and listens for theme changes:
1

Wait for Device Ready

The DynamicColor object is available in the global scope, but only after the deviceready event fires:
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  DynamicColor.isDynamicColorAvailable(function(available) {
    if (available) {
      getDynamicColor();
      document.addEventListener('dynamicColorChange', getDynamicColor);
    }
  });
}
Always check if Dynamic Color is available using isDynamicColorAvailable() before using dynamic color features. This ensures compatibility with devices running Android versions below 12.
2

Check Dynamic Color Availability

Before using any Dynamic Color features, verify that the device supports it:
DynamicColor.isDynamicColorAvailable(function(available) {
  if (available) {
    // Device supports Dynamic Color (Android 12+)
    // Proceed with dynamic color implementation
  } else {
    // Fallback to static colors or default theme
  }
});
3

Get and Apply Colors

Retrieve the dynamic colors and apply them to your DOM using CSS variables:
function getDynamicColor() {
  // Get system colors (primary, secondary, background, etc.)
  DynamicColor.colors(function(colors) {
    // Apply tinted surface colors to DOM as CSS variables
    DynamicColor.colorsToDom(DynamicColor.tintSurfaceColors(colors.dayNight));
  });

  // Optional: Get palette colors (tonal variations)
  DynamicColor.palette(function(colors) {
    DynamicColor.paletteToDom(colors.palette);
  });
}
The colorsToDom() and paletteToDom() functions automatically:
  • Convert colors to CSS variables
  • Inject them into the DOM
  • Update existing variables when called again
The tintSurfaceColors() function applies Material Design 3 elevation tints to surface colors, creating subtle variations (surface1 through surface5) for layered UI elements.
4

Listen for Theme Changes

Subscribe to the dynamicColorChange event to update colors when the user changes their theme or wallpaper:
document.addEventListener('dynamicColorChange', getDynamicColor);
This event fires when:
  • The user switches between light and dark mode
  • The user changes their wallpaper (which updates the color palette)
The dynamicColorChange event is automatically monitored by the plugin. You just need to add your event listener.

​
Using the Colors in CSS

Once colors are applied to the DOM, you can use them as CSS variables in your stylesheets: 
.myAppStyle {
  color: var(--md-sys-color-primary);
  background: var(--md-ref-palette-neutral-variant95);
}

.surface-container {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.elevated-card {
  /* Use tinted surface for elevated UI elements */
  background: var(--md-sys-color-surface2);
  color: var(--md-sys-color-on-surface);
}

​
Available CSS Variables

​
System Colors (--md-sys-color-*)

The main color tokens for Material Design 3:
  • --md-sys-color-primary - Primary brand color
  • --md-sys-color-on-primary - Text/icons on primary
  • --md-sys-color-secondary - Secondary brand color
  • --md-sys-color-on-secondary - Text/icons on secondary
  • --md-sys-color-background - Main background
  • --md-sys-color-on-background - Text/icons on background
  • --md-sys-color-surface - Surface background
  • --md-sys-color-surface1 through --md-sys-color-surface5 - Tinted surface elevations
  • And many more (see the API reference for the complete list)

​
Palette Colors (--md-ref-palette-*)

Tonal variations from 0 (darkest) to 100 (lightest):
  • --md-ref-palette-primary0 through --md-ref-palette-primary100
  • --md-ref-palette-secondary0 through --md-ref-palette-secondary100
  • --md-ref-palette-tertiary0 through --md-ref-palette-tertiary100
  • --md-ref-palette-neutral0 through --md-ref-palette-neutral100
  • --md-ref-palette-error0 through --md-ref-palette-error100

​
Full Working Example

Here’s the complete code from the plugin README: 
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);
}

​
Next Steps

API Reference

Explore all available methods and properties

Guides

See more detailed examples and use cases

Build docs developers (and LLMs) love

Get started for freeTalk to us