Komuniti Tema VSCode - Temui, kongsi dan cipta tema menggunakan gabungan Geometri Suci dan Teori Warna

TLDR

Saya telah mencipta alat untuk menjana tema VSCode, anda boleh menyimpan, berkongsi dan memuat turun tema sedia untuk dipasang ke VSCode atau diterbitkan ke pasaran.

Ciri utama ialah:

• Penjanaan warna harmoni menggunakan cara inovatif mencampurkan corak Geometri Suci dan Teori Warna tradisional.
• Muat turun tema yang dicipta dan lain-lain yang sudah ada dalam .vsix sedia untuk dipasang pada VSCode atau diterbitkan ke pasaran.
• Simpan, edit dan kongsi koleksi tema anda.

Komuniti Tema VSCode -
Github repo

Ia dibuat dengan Svelte 5 dan Svelte-kit.

---

Sedikit pengenalan

Saya sentiasa ingin tahu tentang bagaimana corak Geometri Suci boleh menggembirakan mata dan minda dengan reka bentuknya yang pintar dan kompleks.
Selain itu, saya tidak boleh berpuas hati dengan tema VSCode selama lebih daripada satu minggu, bagi saya, adalah perlu untuk mempunyai tema yang berbeza supaya saya boleh menukar sekali-sekala untuk menjadikan perjalanan pengekodan saya lebih menyenangkan. Saya sentiasa mencari tema baharu untuk koleksi saya yang sudah banyak.

Kemudian, saya mula mencipta tema saya sendiri, dengan cara ini, saya bukan sahaja boleh memilih warna pilihan saya pada masa ini, tetapi juga mengawal kebutiran yang menonjolkan kod ke atas bahasa berbeza yang disokong VSCode.

Tetapi ia tidak pernah mudah, cari semua warna yang sepadan untuk pelbagai token sintaks yang berbeza, laraskan token dan skop, warna ui dan sebagainya...menggunakan teori warna boleh banyak membantu, anda memilih warna dan dengan menggunakan beberapa skema warna anda boleh mendapatkan satu, dua, tiga atau lebih warna yang sepadan (tetapi tidak terdapat pelbagai jenis skema warna), selepas itu anda perlu bermain-main dengan beberapa parameter ketepuan dan kecerahan untuk memperhalusi warna untuk token dan elemen ui yang berbeza sentiasa mempertimbangkan sama ada nisbah kontras untuk semua warna latar depan yang dipilih terhadap latar belakang berada pada tahap yang boleh diterima... Mungkin, sekarang, anda boleh melihat ke mana saya pergi, untuk mencipta tema yang bukan sahaja harmoni tetapi juga berfungsi dan mengikut beberapa piawaian minimum yang boleh diterima boleh menjadi tugas yang sangat kompleks.

"Keperluan" untuk tema yang berbeza untuk memenuhi keperluan yang hampir patologi ini untuk mempelbagaikan dan menukar warna yang saya ada pada skrin saya apabila bekerja bersama-sama dengan rasa ingin tahu saya, yang telah dinyatakan sebelum ini, tentang bagaimana corak geometri suci boleh menyenangkan mata dan minda anda. saya kepada projek ini.

Idea dan pelaksanaannya

Bagaimana jika saya boleh, dengan cara yang sama teori warna dengan skema warnanya memperoleh beberapa set warna padanan daripada warna awal, fikirkan beberapa kaedah untuk sebaliknya menggunakan pengiraan skema warna tradisional, menyesuaikan beberapa persamaan corak Geometri Suci pada bahagian atas roda warna?

Selepas mengkaji banyak corak geometri suci yang berbeza, saya menghasilkan senarai lebih daripada 30 corak yang mana persamaannya sesuai untuk eksperimen saintis gila ini. Dan ini adalah apabila algoritma penjanaan warna untuk projek ini dilahirkan.

Algoritma

Dengan memilih satu corak geometri suci daripada senarai dan rona asas dengan peluncur, algoritma menjana jumlah rona asas tertentu yang diperolehi oleh persamaan corak geometri suci yang dipilih di atas roda warna tradisional. Selepas itu, ia menjana warna untuk semua elemen dalam UI dengan mengubah sedikit parameter kecerahan dan ketepuan secara rawak menggunakan untuk setiap elemen satu daripada warna terbitan "skema warna" yang dihasilkan. Kemudian menggunakan teknik yang sama ia menghasilkan warna untuk setiap token sintaks yang diperlukan yang digunakan dalam tema. Akhir sekali, ia menjana warna ansi untuk terminal.

Saya telah membangunkan cara untuk pratonton dalam masa nyata tema menggunakan Editor Monaco dengan pemalam Shiki untuk penyerlahan kod dengan tema VSCode dan bukannya sistem penyerlahan sintaks yang disediakan oleh Editor Monaco. Meletakkan beberapa elemen di sekeliling editor untuk meniru antara muka editor VSCode dengan beberapa coretan kod bahasa yang berbeza untuk menunjukkan sebanyak mungkin token dan skop yang telah ditentukan sebelumnya oleh tema yang dijana. Tetapi masih terdapat beberapa batasan dalam skop token dalam Editor Monaco yang menjadikan pratonton dalam talian sedikit kurang terperinci berbanding apabila tema dipasang pada VSCode itu sendiri, tetapi sekurang-kurangnya, perbezaannya ialah peningkatan butiran dalam sintaks dan penyerlahan semantik .

Selepas algoritma menjana semua warna, terdapat kemungkinan untuk memperhalusi setiap warna secara bebas dengan maklum balas masa nyata dalam komponen pratonton.

ciri utama ialah:

• Penjanaan warna harmoni menggunakan cara inovatif mencampurkan corak Geometri Suci dan Teori Warna tradisional.
• Muat turun tema yang anda buat dan lain-lain sudah berada dalam .vsix sedia untuk dipasang pada VSCode atau pun terbitkan ke pasaran.
• Simpan, edit dan kongsi koleksi tema anda.

Semak ia!

Apa pun, apa yang saya cuba katakan ialah, jika anda berminat dengan tempat di mana anda boleh menemui, berkongsi dan mencipta tema VSCode baharu, sila lawati Komuniti Tema VSCode. Anda juga boleh menyemak kod sumber di repositori Github.

Saya ingin menerima maklum balas dalam apa jua bentuk tentang apa sahaja, kebolehgunaan, skop token, warna yang dijana...sebenarnya apa sahaja. Dan sudah tentu, jangan ragu untuk membuka isu sekiranya anda menemuinya.

Selain itu, saya sangat suka membangunkan projek ini sehingga saya mempunyai rancangan untuk melanjutkan algoritma penjanaan tema melangkaui VSCode, rancangannya adalah untuk menjadikannya menjana tema untuk apa-apa sahaja yang boleh menerima tema. Bercita-cita tinggi bukan? Sumbangan amat dialu-alukan sekiranya anda mempunyai masa lapang dan menyukai projek serta idea tersebut.

Eksperimen lain

Saya juga telah membuat penjana tema untuk Shadcn UI menggunakan algoritma yang sama, tetapi ia memerlukan banyak kerja dalam ui dan setiap bahagian lain daripadanya, ia hanyalah bukti konsep. Anda boleh menemuinya dalam halaman peribadi Github saya.

Jika anda sampai sejauh ini, terima kasih banyak-banyak kerana membaca!

Atas ialah kandungan terperinci Komuniti Tema VSCode - Temui, kongsi dan cipta tema menggunakan gabungan Geometri Suci dan Teori Warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!