Die Ehre bevorzugt das Farbschema in der CSS-Farb-API mit benutzerdefinierten Eigenschaften

CSS -Lack -API und benutzerdefinierte Eigenschaften: Passen Sie den Malerffekt an die Benutzerpräferenzen an

Die CSS Paint API war in den letzten Jahren eine aufregende Technologie. Es ermöglicht Entwicklern, benutzerdefinierte Zeichnungsarbeitseinheiten zu erstellen und zu steuern, wie sie durch CSS rendern. Durch die Kombination von Medienabfrage und CSS-Attributen für prefers-color-scheme können wir das Erscheinungsbild der Maleinheit der Malerei dynamisch an die hellen und dunklen Moduseinstellungen des Benutzers anpassen.

In diesem Artikel wird eine Landschafts-Arbeitseinheit im Final Fantasy II-Stil als Beispiel ( overworld.js ) verwendet, um zu demonstrieren, wie CSS-benutzerdefinierte Eigenschaften zur Implementierung dieser Funktion verwendet werden.

Vorbereitung

Zunächst müssen Sie sicherstellen, dass Ihr Browser die CSS -Farb -API und die benutzerdefinierten Eigenschaften unterstützt:

 const Paintapisupported = "RegisterProperty" in window.css && "Paintworklet" im Fenster.css;

Verwenden Sie als Nächstes die Methode CSS.registerProperty , um die benutzerdefinierten Eigenschaften zu definieren. Diese Eigenschaften werden in CSS definiert und in der Zeichenarbeitseinheit gelesen, wodurch der Rendering -Prozess eine einfache Steuerung ermöglicht. Die Arbeitseinheit overworld.js definiert die Farben verschiedener Teile der Landschaft (Gras, Bäume, Flüsse usw.) mit benutzerdefinierten Eigenschaften. Der Standardwert gilt für den Lichtmodus.

Der Attributregistrierungscode lautet wie folgt:

 const properties = {
  "-overworld-grass-grün-color": {
    Syntax: "<color> ",",
    InitialValue: "#58ab1d"
  },
  "-overworld-dark-rock-color": {
    Syntax: "<color> ",",
    InitialValue: "#A15D14"
  },
  // ... andere Eigenschaften};

Object.Entries (Eigenschaften) .foreach (([Name, {syntax, initialValue}]) => {
  CSS.registerProperty ({{
    Name,
    Syntax,
    Erben: Falsch,
    initialValue
  });
});

CSS.Paintworklet.AddModule ("/Worklets/Overworld.js");</color></color>

Die Anfangswerte dieser Eigenschaften können überschrieben werden, wenn der Benutzer ein Farbschema auswählt.

Farbschemata, die den Benutzereinstellungen entsprechen

Mit dem Menü "Website -Einstellungen" können Benutzer Farbschemata auswählen: System, Lichtmodus und Dunkelmodus. Der "System" -Modus dark den Betriebssystemeinstellungen light CSS -Variablen werden verwendet, um die Farben zu wechseln:

 /* Benutzer wählt den Dunklen Modus aus*/
html.dark {
  -GRASS-GREEN: #3A6B1A;
  -Dark-Rock: #784517;
  // ... andere Farben}

/* Systempräferenz ist Dunkelmodus*/
@media Screen und (bevorzugt Color-Scheme: Dark) {{
  html {
    -GRASS-GREEN: #3A6B1A;
    -Dark-Rock: #784517;
    // ... andere Farben}
}

/* Benutzer wählt den Lichtmodus*/aus
html.light {
  -GRASS-GREEN: #58AB1D;
  -Dark-Rock: #A15D14;
  // ... andere Farben}

/* Systempräferenz ist Lichtmodus*/
@media Bildschirm und (bevorzugt Farbscheme: Licht) {{
  html {
    -GRASS-GREEN: #58AB1D;
    -Dark-Rock: #A15D14;
    // ... andere Farben}
}

Stellen Sie benutzerdefinierte Eigenschaften auf der Maleinheit der Malerei ein

Wenn der Browser die Lack-API unterstützt, wenden die Inline-Skripte auf der Seite paint-api -Klasse auf die Elemente an.

 @media Screen und (Min-Width: 64Rem) {
  .paint-api .backdrop {
    Hintergrundbild: Farbe (Überwelt);
    / * ... andere Stile ... */
    -overworld-grass-grün-Farbe: var (-grasgrün);
    -overWorld-dark-Rock-Color: var (-Dark-Rock);
    // ... andere Eigenschaften}
}

Hier wird der benutzerdefinierte Attributwert der Maleinheit aus der CSS -Variablen entsprechend der Farbschemaspräferenz des Benutzers entnommen. Dadurch wird die Funktion der dynamischen Anpassung des Rendering -Effekts der Maleinheit an die Benutzerpräferenzen realisiert.

Auf diese Weise kann das Rendering der Maleinheit flexibel kontrolliert werden, z. B. das Hinzufügen von Details oder Ostereier gemäß dem Farbschema. Die CSS-Paint-API kombiniert benutzerdefinierte Eigenschaften und prefers-color-scheme um Entwicklern leistungsstarke Tools zu bieten, um dynamische und personalisierte Benutzererlebnisse zu erstellen.

Das obige ist der detaillierte Inhalt vonDie Ehre bevorzugt das Farbschema in der CSS-Farb-API mit benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!