Kehormatan lebih suka skim warna dalam API cat CSS dengan sifat tersuai

API cat CSS dan sifat tersuai: Laraskan kesan lukisan mengikut keutamaan pengguna

CSS Paint API telah menjadi teknologi yang menarik dalam beberapa tahun kebelakangan ini. Ia membolehkan pemaju untuk membuat unit kerja lukisan tersuai dan mengawal bagaimana mereka memberikan melalui CSS. Menggabungkan pertanyaan media prefers-color-scheme dan atribut adat CSS, kita secara dinamik boleh menyesuaikan penampilan unit lukisan mengikut pilihan cahaya dan mod gelap pengguna.

Artikel ini akan menggunakan Unit Kerja Lukisan Lanskap Final Fantasy II sebagai contoh ( overworld.js ) untuk menunjukkan cara menggunakan sifat adat CSS untuk melaksanakan fungsi ini.

Penyediaan

Pertama, anda perlu memastikan bahawa penyemak imbas anda menyokong API cat CSS dan sifat tersuai:

 const PaintapIsupported = "RegisterProperty" dalam window.css && "Paintworklet" dalam window.css;

Seterusnya, gunakan kaedah CSS.registerProperty untuk menentukan sifat tersuai. Ciri -ciri ini akan ditakrifkan dalam CSS dan dibaca dalam unit kerja lukisan, yang membolehkan kawalan mudah proses rendering. Unit kerja overworld.js mentakrifkan warna -warna bahagian yang berlainan dari landskap (rumput, pokok, sungai, dan lain -lain) menggunakan sifat tersuai. Nilai lalai digunakan untuk mod cahaya.

Kod pendaftaran atribut adalah seperti berikut:

 const properties = {
  "-W-Green-Green-color": {
    Sintaks: "<color> "
    InitialValue: "#58AB1D"
  },
  "-Kolor-warna-warna-warna": {
    Sintaks: "<color> "
    InitialValue: "#A15D14"
  },
  // ... sifat lain};

Object.entries (sifat) .foreach (([name, {sintaks, initialvalue}]) => {
  CSS.RegisterProperty ({
    nama,
    sintaks,
    mewarisi: palsu,
    InitialValue
  });
});

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

Nilai awal sifat -sifat ini boleh ditulis semula apabila pengguna memilih skema warna.

Skim warna sesuai dengan pilihan pengguna

Menu Tetapan Laman Web membolehkan pengguna memilih skema warna: sistem, mod cahaya, dan mod gelap. Mod "Sistem" mengikuti tetapan sistem dark light Pembolehubah CSS digunakan untuk menukar warna:

 /* Pengguna memilih mod gelap*/
html.dark {
  --Grass-Green: #3A6B1A;
  --Kark-rock: #784517;
  // ... warna lain}

/* Keutamaan sistem adalah mod gelap*/
@media skrin dan (lebih suka-warna-skema: gelap) {
  html {
    --Grass-Green: #3A6B1A;
    --Kark-rock: #784517;
    // ... warna lain}
}

/* Pengguna memilih mod cahaya*/
html.light {
  --Grass-Green: #58AB1D;
  --Kark-rock: #A15D14;
  // ... warna lain}

/* Keutamaan sistem adalah mod cahaya*/
Skrin @media dan (lebih suka-warna-skema: cahaya) {
  html {
    --Grass-Green: #58AB1D;
    --Kark-rock: #A15D14;
    // ... warna lain}
}

Tetapkan sifat tersuai di unit kerja lukisan

Jika penyemak imbas menyokong API Cat, skrip inline di halaman memohon kelas paint-api kepada unsur-unsur.

 Skrin @Media dan (Min-lebar: 64Rem) {
  .Paint-API .Backdrop {
    imej latar belakang: cat (overworld);
    / * ... gaya lain ... */
    -W-grass-green-color: var (-rumput-hijau);
    -Kolor-warna-warna-warna: var (-gelap-rock);
    // ... sifat lain}
}

Di sini, nilai atribut tersuai unit kerja lukisan diambil dari pembolehubah CSS yang sepadan dengan keutamaan skema warna pengguna. Ini menyedari fungsi secara dinamik menyesuaikan kesan rendering unit lukisan mengikut keutamaan pengguna.

Dengan cara ini, rendering unit kerja lukisan boleh dikawal secara fleksibel, seperti menambah butiran atau telur Paskah mengikut skema warna. CSS Paint API menggabungkan ciri-ciri tersuai dan prefers-color-scheme untuk menyediakan pemaju dengan alat yang berkuasa untuk mencipta pengalaman pengguna yang dinamik dan diperibadikan.

Atas ialah kandungan terperinci Kehormatan lebih suka skim warna dalam API cat CSS dengan sifat tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!