Honor prefers-color-scheme in the CSS Paint API with Custom Properties

CSS Paint API and custom properties: adjust the painting effect according to user preferences

The CSS Paint API has been an exciting technology in recent years. It allows developers to create custom drawing work units and control how they render through CSS. Combining prefers-color-scheme media query and CSS custom attributes, we can dynamically adjust the appearance of the painting work unit according to the user's light and dark mode preferences.

This article will use a Final Fantasy II-style landscape painting work unit as an example ( overworld.js ) to demonstrate how to use CSS custom properties to implement this function.

Preparation

First, you need to make sure that your browser supports CSS Paint API and custom properties:

 const paintAPISupported = "registerProperty" in window.CSS && "paintWorklet" in window.CSS;

Next, use the CSS.registerProperty method to define the custom properties. These properties will be defined in CSS and read in the drawing work unit, allowing easy control of the rendering process. The overworld.js work unit defines the colors of different parts of the landscape (grass, trees, rivers, etc.) using custom properties. The default value applies to light mode.

The attribute registration code is as follows:

 const properties = {
  "--overworld-grass-green-color": {
    syntax: "<color> ",
    initialValue: "#58ab1d"
  },
  "--overworld-dark-rock-color": {
    syntax: "<color> ",
    initialValue: "#a15d14"
  },
  // ... Other properties};

Object.entries(properties).forEach(([name, { syntax, initialValue }]) => {
  CSS.registerProperty({
    name,
    syntax,
    inherits: false,
    initialValue
  });
});

CSS.paintWorklet.addModule("/worklets/overworld.js");</color></color>

The initial values ​​of these properties can be overwritten when the user selects a color scheme.

Color schemes to suit user preferences

The website settings menu allows users to select color schemes: System, Light Mode, and Dark Mode. The "System" mode follows the operating system settings; the latter two set light or dark classes to the HTML elements respectively. CSS variables are used to switch colors:

 /* User selects dark mode*/
html.dark {
  --grass-green: #3a6b1a;
  --dark-rock: #784517;
  // ... Other colors}

/* System preference is dark mode*/
@media screen and (prefers-color-scheme: dark) {
  html {
    --grass-green: #3a6b1a;
    --dark-rock: #784517;
    // ... Other colors}
}

/* User selects the light mode*/
html.light {
  --grass-green: #58ab1d;
  --dark-rock: #a15d14;
  // ... Other colors}

/* System preference is light mode*/
@media screen and (prefers-color-scheme: light) {
  html {
    --grass-green: #58ab1d;
    --dark-rock: #a15d14;
    // ... Other colors}
}

Set custom properties on the painting work unit

If the browser supports the Paint API, the inline scripts in the page apply paint-api class to the elements.

 @media screen and (min-width: 64rem) {
  .paint-api .backdrop {
    background-image: paint(overworld);
    /* ... Other styles... */
    --overworld-grass-green-color: var(--grass-green);
    --overworld-dark-rock-color: var(--dark-rock);
    // ... Other properties}
}

Here, the custom attribute value of the painting work unit is taken from the CSS variable corresponding to the user's color scheme preference. This realizes the function of dynamically adjusting the rendering effect of the painting work unit according to user preferences.

In this way, rendering of the painting work unit can be flexibly controlled, such as adding details or easter eggs according to the color scheme. The CSS Paint API combines custom properties and prefers-color-scheme media queries to provide developers with powerful tools to create dynamic and personalized user experiences.

The above is the detailed content of Honor prefers-color-scheme in the CSS Paint API with Custom Properties. For more information, please follow other related articles on the PHP Chinese website!