VSCode 主題社群 - 結合使用神聖幾何和顏色理論來發現、分享和創建主題

總長DR

我建立了一個產生 VSCode 主題的工具，您可以儲存、分享和下載主題，準備安裝到 VSCode 或發佈到市場。

主要特點是：

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

VSCode 主題社群 -
Github 倉庫

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

---

一些介紹

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

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

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

不同主題的“必要性”，以滿足這種近乎病態的需求，即在與前面提到的我對神聖幾何圖案如何取悅人們的眼睛和心靈的好奇心結合工作時，使屏幕上的顏色多樣化和改變我對這個項目。

想法和實施

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

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

演算法

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

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

演算法產生所有顏色後，可以透過預覽元件中的即時回饋獨立微調每種顏色。

主要功能是：

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

一探究竟！

無論如何，我想說的是，如果您對可以發現、分享和創建新的 VSCode 主題的地方感興趣，請訪問 VSCode 主題社區。您也可以在 Github 儲存庫中查看原始程式碼。

我很樂意收到任何事物、可用性、令牌範圍、產生的顏色…任何事物的任何回饋。當然，如果您發現一些問題，請隨時提出問題。

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

其他實驗

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

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

以上是VSCode 主題社群 - 結合使用神聖幾何和顏色理論來發現、分享和創建主題的詳細內容。更多資訊請關注PHP中文網其他相關文章！