Memindahkan penjana tema VSCode ke oklch

TLDR: Komuniti Tema VSCode kini menggunakan ruang warna OKLCH dalam algoritma penjanaan warna padanan untuk rawak dan memanipulasi warna dan juga mempunyai pemilih warna oklch untuk digunakan semasa melaraskan tema yang dijana warna.

Anda boleh mengintip Komuniti Tema VSCODE atau menyelam terus ke dalam kod dalam repositori GitHub.

---

Penemuan lewat

Saya tahu, ruang warna oklch bukanlah sesuatu yang baru, tetapi apabila saya mula membangunkan Komuniti Tema VSCode, saya langsung tidak menyedari kewujudannya. Hanya beberapa minggu yang lalu saya mengetahui tentangnya dan mula membaca banyak artikel mengenainya dan menyedari semua faedah yang boleh datang bersama-sama dengan migrasi ruang warna dalam kedua-dua algoritma dan apl itu sendiri.

Dalam ruang warna oklch warna diwakili oleh

• L untuk ringan persepsi.
• C untuk kroma yang mewakili keamatan kromatik, dengan nilai dari 0 (akromatik) tanpa had atas, tetapi dalam amalan ia tidak melebihi 0.5; CSS menganggap 0.4 sebagai 100%.
• H untuk sudut rona dalam roda warna, biasanya dilambangkan dalam darjah perpuluhan.

Keringanan persepsi bukan sahaja membolehkan pemilihan warna yang mudah dengan kecerahan seragam untuk rona berbeza tetapi juga membolehkan manipulasi kecerahan warna dan kroma tanpa sebarang perubahan dalam parameter rona, yang sesuai digunakan dengan algoritma penjanaan warna.

Selepas algoritma menghasilkan set warna menggunakan warna asas dan skema warna/corak geometri suci yang dipilih, warna untuk tema dijana secara rawak berdasarkan warna ini dengan variasi kecerahan dan kroma.

Dengan mengguna pakai ruang warna oklch adalah mungkin untuk mengekalkan semua warna yang diperoleh daripada skema warna yang dipilih secara utuh walaupun selepas semua manipulasi kecerahan dan kroma diperlukan untuk memastikan kontras minimum antara warna latar belakang dan yang digunakan sebagai latar depan.

Walaupun selepas itu, apabila terdapat keperluan atau kehendak untuk menukar mana-mana warna, menggunakan pemilih warna oklch baharu adalah mungkin bukan sahaja untuk melaraskan kroma dan kecerahan tanpa menukar rona, tetapi seseorang boleh menukar rona sambil mengekalkan kecerahan persepsi warna yang dipilih tidak berubah.

Selepas semua itu mengatakan saya hanya mempunyai satu pilihan, pindahkan apl itu.

Penghijrahan kod

Membaca beberapa artikel mengenai spesifikasi ruang warna css, saya belajar tentang Culori, perpustakaan manipulasi warna yang sangat lengkap dan tepat untuk skrip taip yang melaksanakan ruang warna oklch.

Tidak sukar untuk menukar semua fungsi dan kaedah yang menggunakan perpustakaan manipulasi warna lama. Beberapa bahagian algoritma malah menjadi lebih bersih dan lebih mudah untuk diselenggara dan difahami.

Selepas pemindahan kod, saya mula mencari komponen pemilih warna tetapi tidak menemui mana-mana yang sesuai dengan keperluan aplikasi saya, ia perlu menggunakan Svelte 5, mempunyai pilihan untuk menggunakan ruang warna oklch dan berintegrasi dengan baik dengan semasa ui yang berdasarkan komponen shadcn-svelte.

Di tengah-tengah kekecewaan, saya telah menemui karya hebat ini dari EvilMartians di oklch.com yang merupakan sumber terbuka dan, sekurang-kurangnya bagi saya, sangat kompleks.
Selepas beberapa jam menghabiskan masa di repositori GitHub mereka dan melihat pemilih warna pada halaman web mereka, saya memutuskan untuk mencubanya, membangunkan pelaksanaan saya sendiri menggunakan komponen Svelte 5 dan shadcn-svelte.

Saya tidak berusaha sepenuhnya dalam membangunkan komponen yang boleh diguna semula, tetapi kini saya berfikir tentang membuat pakej Svelte 5 daripadanya. Tetapi saya menyimpang, kembali ke pengembaraan saya, saya menyesuaikan beberapa latar belakang peluncur untuk dikemas kini secara dinamik apabila pilihan L, C, H dan Alpha berubah.

Melaksanakan pekerja web untuk mengira warna piksel untuk peta 2D dinamik untuk setiap peluncur, dengan bantuan Culori tidak sukar untuk menjana kecerunan untuk mewakili ruang warna oklch kompleks dengan tepat.

Dan itu adalah…pemilih warna oklch berfungsi yang boleh memenuhi keperluan tindanan semasa saya.

Memandangkan saya sudah dengan tangan saya yang kotor, saya pergi bercakap dengan rakan saya yang tidak ternilai Claude 3.5 untuk bertanya sama ada dia mempunyai beberapa lagi corak geometri suci yang boleh digunakan sebagai skema warna untuk ditambahkan pada senarai yang sudah panjang. corak/skema. Kali ini Claude tidak mengukur usaha dan 'meludah' lebih daripada seratus geometri suci baharu, fizik kuantum moden dan beberapa persamaan matematik lain yang boleh disepadukan sebagai corak/skema warna dalam algoritma.

Hasilnya

Ia disiarkan secara langsung di Komuniti Tema VSCode dan anda boleh menyemak kod tersebut dalam repositori Github.

Sila, seperti biasa, sila berikan apa-apa jenis maklum balas dan/atau cadangan dalam ulasan atau failkan isu di repositori. Saya akan sangat gembira mendengar fikiran anda.

Terima kasih banyak kerana membaca dan, semoga saya berjumpa lagi pada yang seterusnya!

Atas ialah kandungan terperinci Memindahkan penjana tema VSCode ke oklch. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!