總長DR

我建立了一個(gè)產(chǎn)生 VSCode 主題的工具，您可以儲(chǔ)存、分享和下載主題，準(zhǔn)備安裝到 VSCode 或發(fā)佈到市場(chǎng)。

主要特點(diǎn)是：

• 使用混合神聖幾何圖案和傳統(tǒng)色彩理論的創(chuàng)新方式來產(chǎn)生和諧的顏色。
• 下載已建立的主題和 .vsix 中的其他主題準(zhǔn)備安裝在 VSCode 上，甚至發(fā)佈到市場(chǎng)。
• 儲(chǔ)存、編輯和分享您的主題集合。

VSCode 主題社群 -
Github 倉庫

它是用Svelte 5和Svelte-kit製作的。

---

一些介紹

我一直很好奇所謂的神聖幾何圖案如何以其智慧而複雜的設(shè)計(jì)來愉悅眼睛和心靈。
另外，我永遠(yuǎn)不會(huì)滿足於一個(gè) VSCode 主題超過一周，對(duì)我來說，有必要有不同的主題，這樣我就可以偶爾改變一次，以使我的編碼之旅更加愉快。我一直在為我已經(jīng)廣泛的收藏尋找新的主題。

然後，我開始創(chuàng)建自己的主題，這樣我不僅可以選擇當(dāng)前喜歡的顏色，還可以控制 VSCode 支援的不同語言的程式碼高亮粒度。

但這從來都不是一件容易的事，尋找這麼多不同語法標(biāo)記的所有匹配顏色，調(diào)整標(biāo)記和範(fàn)圍，用戶界面顏色等等......使用顏色理論可以幫助很多，你選擇一種顏色並透過使用一些配色方案，您可以獲得一種、兩種、三種或更多種匹配的顏色（但配色方案的種類不多），之後您必須使用一些飽和度和亮度參數(shù)來微調(diào)顏色不同的token 和ui元素始終考慮所有選定的前景色與背景的對(duì)比度是否處於可接受的水平...也許，現(xiàn)在您可以看到我要做什麼，創(chuàng)建一個(gè)不僅和諧而且實(shí)用且實(shí)用的主題遵循一些最低可接受標(biāo)準(zhǔn)可能會(huì)成為一項(xiàng)非常複雜的任務(wù)。

不同主題的“必要性”，以滿足這種近乎病態(tài)的需求，即在與前面提到的我對(duì)神聖幾何圖案如何取悅?cè)藗兊难劬托撵`的好奇心結(jié)合工作時(shí)，使屏幕上的顏色多樣化和改變我對(duì)這個(gè)項(xiàng)目。

想法和實(shí)施

如果我可以，以同樣的方式，顏色理論及其配色方案從初始顏色派生出一組匹配顏色，想出一些方法來代替使用傳統(tǒng)的配色方案計(jì)算，??在上適應(yīng)一些神聖幾何圖案方程色輪頂部？

在研究了許多不同的神聖幾何圖案後，我列出了 30 多種圖案，其中的方程式適合這個(gè)瘋狂的科學(xué)家實(shí)驗(yàn)。這就是這個(gè)專案的顏色生成演算法誕生的時(shí)候。

演算法

透過從清單中選擇一種神聖幾何圖案並使用滑桿選擇基本色調(diào)，該演算法會(huì)在傳統(tǒng)色輪之上產(chǎn)生由所選神聖幾何圖案方程式導(dǎo)出的特定數(shù)量的基本色調(diào)。之後，它透過為每個(gè)元素隨機(jī)使用生成的「配色方案」派生色調(diào)之一稍微改變亮度和飽和度參數(shù)來產(chǎn)生 UI 中所有元素的顏色。然後使用相同的技術(shù)為主題中使用的每個(gè)所需語法標(biāo)記生成顏色。最後，它為終端產(chǎn)生 ansi 顏色。

我開發(fā)了一種使用帶有 Shiki 插件的 Monaco 編輯器即時(shí)預(yù)覽主題的方法，用於使用 VSCode 主題突出顯示程式碼，而不是使用 Monaco 編輯器提供的語法突出顯示系統(tǒng)。在編輯器周圍放置一些元素來模仿 VSCode 編輯器的介面，並使用一些不同語言的程式碼片段來盡可能顯示生成的主題預(yù)定義的標(biāo)記和範(fàn)圍。但 Monaco 編輯器中的標(biāo)記範(fàn)圍仍然存在一些限制，這使得在線預(yù)覽的粒度比安裝在 VSCode 本身上的主題要小一些，但至少，區(qū)別在於語法和語義突出顯示的粒度有所增加.

演算法產(chǎn)生所有顏色後，可以透過預(yù)覽元件中的即時(shí)回饋獨(dú)立微調(diào)每種顏色。

主要功能是：

• 使用創(chuàng)新的方式混合神聖幾何圖案和傳統(tǒng)色彩理論來產(chǎn)生和諧的色彩。
• 下載您創(chuàng)建的主題以及 .vsix 中已有的其他主題 準(zhǔn)備安裝在 VSCode 上 甚至發(fā)佈到市場(chǎng)。
儲(chǔ)存、編輯和分享您的主題集合。

一探究竟！

無論如何，我想說的是，如果您對(duì)可以發(fā)現(xiàn)、分享和創(chuàng)建新的 VSCode 主題的地方感興趣，請(qǐng)?jiān)L問 VSCode 主題社區(qū)。您也可以在 Github 儲(chǔ)存庫中查看原始程式碼。

我很樂意收到任何事物、可用性、令牌範(fàn)圍、產(chǎn)生的顏色…任何事物的任何回饋。當(dāng)然，如果您發(fā)現(xiàn)一些問題，請(qǐng)隨時(shí)提出問題。

此外，我非常喜歡開發(fā)這個(gè)項(xiàng)目，因此我計(jì)劃將主題生成演算法擴(kuò)展到 VSCode 之外，計(jì)劃是讓它為任何可以接收主題的東西生成主題。雄心勃勃不是嗎？如果您有空閒時(shí)間並且喜歡這個(gè)項(xiàng)目和想法，我們非常歡迎您做出貢獻(xiàn)。

其他實(shí)驗(yàn)

我還使用相同的演算法為 Shadcn UI 製作了一個(gè)主題產(chǎn)生器，但它需要在 ui 和它的其他部分進(jìn)行大量工作，這只是一個(gè)概念證明。你可以在我的Github個(gè)人頁面找到它。

如果您看到這裡，非常感謝您的閱讀！

以上是VSCode 主題社群 - 結(jié)合使用神聖幾何和顏色理論來發(fā)現(xiàn)、分享和創(chuàng)建主題的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！