TLDR: VSCode 主題社區現在在匹配顏色生成演算法中使用OKLCH 顏色空間來隨機化和操作顏色,並且還具有oklch 顏色選擇器 調整產生的主題顏色時使用。
您可以瀏覽 VSCODE 主題社群或直接深入了解 GitHub 儲存庫中的程式碼。
我知道,oklch 色彩空間並不是那麼新鮮,但當我開始開發 VSCode 主題社群時,我完全不知道它的存在。就在幾週前,我發現了它,並開始閱讀大量相關文章,並意識到演算法和應用程式本身的色彩空間遷移可能帶來的所有好處。
在 oklch 色彩空間中,顏色以
表示感知亮度不僅可以輕鬆選擇不同色調的亮度均勻的顏色,還可以在不改變色調參數的情況下操縱顏色的亮度和色度,非常適合與顏色生成演算法一起使用。
演算法使用選定的基本色調和配色方案/神聖幾何圖案生成一組色調後,主題的顏色將根據這些色調隨機生成,並具有明度和彩度的變化。
透過採用oklch 色彩空間,即使在對亮度和色度進行所有操作以確保背景顏色與用作前景的顏色之間的對比度最小化之後,也可以保持所選配色方案的所有派生色調完好無損。
即使之後,當需要或願意改變任何一種顏色時,使用新的oklch 顏色選擇器不僅可以在不改變色調的情況下調整色度和亮度,而且可以在保持色調不變的情況下改變色調。所選顏色的感知亮度不變。
畢竟我只有一個選擇,那就是遷移應用程式。
閱讀了一些有關 css 顏色空間規範的文章,我了解了 Culori,這是一個非常完整且精確的用於實現 oklch 顏色空間的打字稿顏色操作庫。
更改使用舊顏色操作庫的所有函數和方法並不難。演算法的某些部分甚至變得更清晰、更易於維護和理解。
程式碼遷移後,我開始尋找顏色選擇器組件,但找不到任何可以滿足我的應用程式要求的組件,它需要使用Svelte 5,可以選擇使用oklch 顏色空間並與當前的整合良好基於shadcn -svelte 組件的ui。
在沮喪中,我在 oklch.com 遇到了 EvilMartians 的這項偉大工作,它是開源的,而且至少對我來說非常複雜。
在他們的 GitHub 儲存庫上花了幾個小時並查看了他們網頁上的顏色選擇器後,我決定嘗試一下,使用 Svelte 5 和 shadcn-svelte 元件開發我自己的實作。
我並沒有全力開發可重複使用元件,但現在我正在考慮用它來製作 Svelte 5 套件。但我離題了,回到我的冒險,我自訂了一些滑桿背景,以便隨著 L、C、H 和 Alpha 選項的變化而動態更新。
實作了一個 Web Worker 來計算每個滑桿的動態 2D 貼圖的像素顏色,在 Culori 的幫助下,產生梯度以準確表示複雜的 oklch 色彩空間並不困難。
這就是......一個功能性的 oklch 顏色選擇器,可以滿足我目前堆疊的需求。
因為我的雙手已經髒了,所以我去和我的無價朋友Claude 3.5 交談,詢問他是否有一些更神聖的幾何圖案可以用作配色方案,以添加到已經很長的列表中模式/方案。這次克勞德沒有衡量努力,而是「吐出了」一百多個新的神聖幾何學、現代量子物理學和一些其他可以作為圖案/配色方案集成到演算法中的數學方程式。
它在 VSCode 主題社群上線,您可以在 Github 儲存庫中查看程式碼。
請一如既往地在評論中提供任何類型的反饋和/或建議,或在存儲庫中提出問題。我很高興聽到你的想法。
非常感謝您的閱讀,希望我們能在下一篇見到您!
以上是將 VSCode 主題生成器遷移到 oklch的詳細內容。更多資訊請關注PHP中文網其他相關文章!