TLDR: VSCode 主題社區(qū)現(xiàn)在在匹配顏色生成演算法中使用OKLCH 顏色空間來隨機(jī)化和操作顏色，並且還具有oklch 顏色選擇器 調(diào)整產(chǎn)生的主題顏色時(shí)使用。

您可以瀏覽 VSCODE 主題社群或直接深入了解 GitHub 儲(chǔ)存庫中的程式碼。

遲到的發(fā)現(xiàn)

我知道，oklch 色彩空間並不是那麼新鮮，但當(dāng)我開始開發(fā) VSCode 主題社群時(shí)，我完全不知道它的存在。就在幾週前，我發(fā)現(xiàn)了它，並開始閱讀大量相關(guān)文章，並意識(shí)到演算法和應(yīng)用程式本身的色彩空間遷移可能帶來的所有好處。

在 oklch 色彩空間中，顏色以

• L 代表感知亮度。
• C代表色度，代表色度強(qiáng)度，取值從0（消色差）開始，沒有上限，但實(shí)際上不超過0.5； CSS 將 0.4 視為 100%。
• H 表示色輪中的色調(diào)角，通常以十進(jìn)位表示。

感知亮度不僅可以輕鬆選擇不同色調(diào)的亮度均勻的顏色，還可以在不改變色調(diào)參數(shù)的情況下操縱顏色的亮度和色度，非常適合與顏色生成演算法一起使用。

演算法使用選定的基本色調(diào)和配色方案/神聖幾何圖案生成一組色調(diào)後，主題的顏色將根據(jù)這些色調(diào)隨機(jī)生成，並具有明度和彩度的變化。

透過採用oklch 色彩空間，即使在對亮度和色度進(jìn)行所有操作以確保背景顏色與用作前景的顏色之間的對比度最小化之後，也可以保持所選配色方案的所有派生色調(diào)完好無損。

即使之後，當(dāng)需要或願(yuàn)意改變?nèi)魏我环N顏色時(shí)，使用新的oklch 顏色選擇器不僅可以在不改變色調(diào)的情況下調(diào)整色度和亮度，而且可以在保持色調(diào)不變的情況下改變色調(diào)。所選顏色的感知亮度不變。

畢竟我只有一個(gè)選擇，那就是遷移應(yīng)用程式。

程式碼遷移

閱讀了一些有關(guān) css 顏色空間規(guī)範(fàn)的文章，我了解了 Culori，這是一個(gè)非常完整且精確的用於實(shí)現(xiàn) oklch 顏色空間的打字稿顏色操作庫。

更改使用舊顏色操作庫的所有函數(shù)和方法並不難。演算法的某些部分甚至變得更清晰、更易於維護(hù)和理解。

程式碼遷移後，我開始尋找顏色選擇器組件，但找不到任何可以滿足我的應(yīng)用程式要求的組件，它需要使用Svelte 5，可以選擇使用oklch 顏色空間並與當(dāng)前的整合良好基於shadcn -svelte 組件的ui。

在沮喪中，我在 oklch.com 遇到了 EvilMartians 的這項(xiàng)偉大工作，它是開源的，而且至少對我來說非常複雜。
在他們的 GitHub 儲(chǔ)存庫上花了幾個(gè)小時(shí)並查看了他們網(wǎng)頁上的顏色選擇器後，我決定嘗試一下，使用 Svelte 5 和 shadcn-svelte 元件開發(fā)我自己的實(shí)作。

我並沒有全力開發(fā)可重複使用元件，但現(xiàn)在我正在考慮用它來製作 Svelte 5 套件。但我離題了，回到我的冒險(xiǎn)，我自訂了一些滑桿背景，以便隨著 L、C、H 和 Alpha 選項(xiàng)的變化而動(dòng)態(tài)更新。

實(shí)作了一個(gè) Web Worker 來計(jì)算每個(gè)滑桿的動(dòng)態(tài) 2D 貼圖的像素顏色，在 Culori 的幫助下，產(chǎn)生梯度以準(zhǔn)確表示複雜的 oklch 色彩空間並不困難。

這就是......一個(gè)功能性的 oklch 顏色選擇器，可以滿足我目前堆疊的需求。

因?yàn)槲业碾p手已經(jīng)髒了，所以我去和我的無價(jià)朋友Claude 3.5 交談，詢問他是否有一些更神聖的幾何圖案可以用作配色方案，以添加到已經(jīng)很長的列表中模式/方案。這次克勞德沒有衡量努力，而是「吐出了」一百多個(gè)新的神聖幾何學(xué)、現(xiàn)代量子物理學(xué)和一些其他可以作為圖案/配色方案集成到演算法中的數(shù)學(xué)方程式。

結(jié)果

它在 VSCode 主題社群上線，您可以在 Github 儲(chǔ)存庫中查看程式碼。

請一如既往地在評(píng)論中提供任何類型的反饋和/或建議，或在存儲(chǔ)庫中提出問題。我很高興聽到你的想法。

非常感謝您的閱讀，希望我們能在下一篇見到您！

以上是將 VSCode 主題生成器遷移到 oklch的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！