Honor préfère le schéma de color dans l'API CSS Paint avec des propriétés personnalisées

API CSS Paint et propriétés personnalisées: ajustez l'effet de peinture en fonction des préférences de l'utilisateur

L'API CSS Paint a été une technologie passionnante ces dernières années. Il permet aux développeurs de créer des unités de travail de dessin personnalisées et de contrôler la façon dont ils rendent via CSS. En combinant la requête médiatique prefers-color-scheme et les attributs personnalisés CSS, nous pouvons ajuster dynamiquement l'apparence de l'unité de travail de peinture en fonction des préférences en mode clair et sombre de l'utilisateur.

Cet article utilisera une unité de travail de peinture de paysage de style Final Fantasy II comme exemple ( overworld.js ) pour démontrer comment utiliser les propriétés personnalisées CSS pour implémenter cette fonction.

Préparation

Tout d'abord, vous devez vous assurer que votre navigateur prend en charge l'API de peinture CSS et les propriétés personnalisées:

 const peintapisupported = "registerProperty" dans window.css && "peintureworklet" dans window.css;

Ensuite, utilisez la méthode CSS.registerProperty pour définir les propriétés personnalisées. Ces propriétés seront définies dans CSS et lues dans l'unité de travail de dessin, permettant un contrôle facile du processus de rendu. L'unité de travail overworld.js définit les couleurs de différentes parties du paysage (herbe, arbres, rivières, etc.) en utilisant des propriétés personnalisées. La valeur par défaut s'applique au mode Light.

Le code d'enregistrement d'attribut est le suivant:

 Const Properties = {
  "- Overworld-Grass-Green-Color": {
    Syntaxe: "<color> ",
    InitialValue: "# 58AB1D"
  },
  "--overworld-dark-rock-color": {
    Syntaxe: "<color> ",
    InitialValue: "# A15D14"
  },
  // ... autres propriétés};

Object.entries (Properties) .ForEach (([name, {syntaxe, initialValue}]) => {
  Css.RegisterProperty ({
    nom,
    syntaxe,
    hérite: faux,
    valeur initiale
  });
});

Css.paintworklet.addmodule ("/ worklets / overworld.js");</color></color>

Les valeurs initiales de ces propriétés peuvent être écrasées lorsque l'utilisateur sélectionne un schéma de couleurs.

Schémas de couleurs pour convenir aux préférences des utilisateurs

Le menu Paramètres du site Web permet aux utilisateurs de sélectionner les schémas de couleurs: système, mode lumière et mode sombre. Le mode "Système" suit les paramètres dark système d'exploitation light Les variables CSS sont utilisées pour changer de couleurs:

 / * L'utilisateur sélectionne le mode sombre * /
html.dark {
  - Grass-Green: # 3A6B1A;
  --Dark-rock: # 784517;
  // ... Autres couleurs}

/ * La préférence du système est en mode sombre * /
Écran @media et (préfère-Color-Scheme: Dark) {
  html {
    - Grass-Green: # 3A6B1A;
    --Dark-rock: # 784517;
    // ... Autres couleurs}
}

/ * L'utilisateur sélectionne le mode d'éclairage * /
html.light {
  - Grass-Green: # 58AB1D;
  --Dark-rock: # A15D14;
  // ... Autres couleurs}

/ * La préférence du système est en mode léger * /
Écran @media et (préfère-Color-Scheme: Light) {
  html {
    - Grass-Green: # 58AB1D;
    --Dark-rock: # A15D14;
    // ... Autres couleurs}
}

Définissez des propriétés personnalisées sur l'unité de travail de peinture

Si le navigateur prend en charge l'API de peinture, les scripts en ligne de la page appliquent paint-api aux éléments.

 Écran @Media et (Min-Width: 64rem) {
  .paint-api .backDrop {
    Image de fond: peinture (Overworld);
    / * ... autres styles ... * /
    - Overworld-Grass-Green-Color: var (- Grass-Green);
    - Overworld-Dark-rock-Color: var (- Dark-rock);
    // ... Autres propriétés}
}

Ici, la valeur d'attribut personnalisée de l'unité de travail de peinture est tirée de la variable CSS correspondant à la préférence de schéma de couleurs de l'utilisateur. Cela se rend compte de la fonction de l'ajustement dynamiquement de l'effet de rendu de l'unité de travail de peinture en fonction des préférences des utilisateurs.

De cette façon, le rendu de l'unité de travail de peinture peut être contrôlé de manière flexible, comme l'ajout de détails ou les œufs de Pâques en fonction de la palette de couleurs. L'API CSS Paint combine des propriétés personnalisées et prefers-color-scheme pour fournir aux développeurs des outils puissants pour créer des expériences utilisateur dynamiques et personnalisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!