Skip to main content

​
Overview

tintSurfaceColors is a convenience wrapper around tintColors that applies Material Design tinting specifically to surface and background-related colors. This method is ideal when you only need elevation variants for surfaces without generating variants for all color tokens.

​
Signature

DynamicColor.tintSurfaceColors(colors)

​
Parameters

​
colors
object
required
The colors object containing Material Design color tokens. Must include a surfaceTint property.

​
Returns

​
colors
object
The input colors object with added elevation variants (1-5) for the following surface-related color keys:
  • background
  • onBackground
  • surface
  • onSurface
  • surfaceVariant
  • onSurfaceVariant
  • inverseSurface
  • inverseOnSurface
Each key will have five new properties: {key}1, {key}2, {key}3, {key}4, {key}5

​
Example

DynamicColor.colors(function(colors) {
  var surfaceColors = DynamicColor.tintSurfaceColors(colors.light);
  
  console.log(surfaceColors);
  // {
  //   surface: '#FFFBFF',
  //   surface1: '#f9f2f4',
  //   surface2: '#f6edee',
  //   surface3: '#f2e8e8',
  //   surface4: '#f1e6e5',
  //   surface5: '#efe3e1',
  //   background: '#FFFBFF',
  //   background1: '#f9f2f4',
  //   ...
  // }
});

​
CSS Variables Output

--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;

​
Common Use Case

This method is commonly used in the plugin workflow to apply surface tinting before injecting colors into the DOM: 
DynamicColor.colors(function(colors) {
  DynamicColor.colorsToDom(DynamicColor.tintSurfaceColors(colors.dayNight));
});
Use tintSurfaceColors when you only need surface elevation variants. For more control over which colors to tint, use tintColors with the onlyKeys parameter.

​
Surface Colors Tinted

The following color tokens receive elevation variants:
Color TokenDescription
backgroundMain background color
onBackgroundText/content color on background
surfaceSurface color for components
onSurfaceText/content color on surface
surfaceVariantVariant surface color
onSurfaceVariantText/content color on surface variant
inverseSurfaceInverse surface color
inverseOnSurfaceText/content color on inverse surface

​
Implementation Details

Implementation location: www/plugin.js:91-104 The method internally calls: 
tintColors(colors, [
  'background',
  'onBackground',
  'surface',
  'onSurface',
  'surfaceVariant',
  'onSurfaceVariant',
  'inverseSurface',
  'inverseOnSurface',
])

Build docs developers (and LLMs) love

Get started for freeTalk to us