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

您可以瀏覽 VSCODE 主題社區(qū)或直接深入了解 GitHub 存儲(chǔ)庫(kù)中的代碼。

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

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

在 oklch 色彩空間中，顏色由

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

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

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

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

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

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

代碼遷移

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

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

代碼遷移后，我開(kāi)始尋找顏色選擇器組件，但找不到任何可以滿足我的應(yīng)用程序要求的組件，它需要使用 Svelte 5，可以選擇使用 oklch 顏色空間并與當(dāng)前的集成良好基于 shadcn-svelte 組件的 ui。

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

我并沒(méi)有全力開(kāi)發(fā)可重用組件，但現(xiàn)在我正在考慮用它制作一個(gè) Svelte 5 包。但我離題了，回到我的冒險(xiǎn)，我自定義了一些滑塊背景，以便隨著 L、C、H 和 Alpha 選項(xiàng)的變化而動(dòng)態(tài)更新。

實(shí)現(xiàn)了一個(gè) Web Worker 來(lái)計(jì)算每個(gè)滑塊的動(dòng)態(tài) 2D 貼圖的像素顏色，在 Culori 的幫助下，生成梯度以準(zhǔn)確表示復(fù)雜的 oklch 顏色空間并不困難。

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

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

結(jié)果

它在 VSCode 主題社區(qū)上線，您可以在 Github 存儲(chǔ)庫(kù)中查看代碼。

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

非常感謝您的閱讀，希望我們能在下一篇中見(jiàn)到您！

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