Skip to main content

Cordova Plugin Dynamic Color

Access Android 12+ Dynamic Color palettes and Material You theming in your Cordova applications

Quick Start

Get up and running with Dynamic Color in minutes

1

Install the plugin

Add the plugin to your Cordova project using the Cordova CLI:
cordova plugin add cordova-plugin-dynamic-color
2

Check availability

Verify that Dynamic Color is available on the device (requires Android 12+):
DynamicColor.isDynamicColorAvailable(function(available) {
  if (available) {
    console.log('Dynamic Color is supported!');
  }
});
3

Get dynamic colors

Retrieve the current dynamic color palette and apply it to your app:
DynamicColor.colors(function(colors) {
  // Access light, dark, and current theme colors
  const primary = colors.dayNight.primary;
  const surface = colors.dayNight.surface;
  
  // Apply colors to CSS custom properties
  DynamicColor.colorsToDom(colors.dayNight);
});

Key Features

Everything you need to integrate Material You theming

Dynamic Color Access

Access Android 12+ Dynamic Color palettes based on user wallpaper

Theme Detection

Detect and respond to light/dark theme changes in real-time

Material Design 3

Full Material Design 3 color system with semantic color roles

CSS Integration

Generate CSS custom properties for seamless styling

Explore the API

Comprehensive methods for working with dynamic colors

Core Methods

Get colors, palettes, and theme information

Color Utilities

Mix, tint, and transform colors

DOM Helpers

Apply colors directly to your UI

Ready to build with Material You?

Start integrating dynamic colors into your Cordova app today

Get Started →

Build docs developers (and LLMs) love