将 VSCode 主题生成器迁移到 oklch

TLDR: VSCode 主题社区现在在匹配颜色生成算法中使用 OKLCH 颜色空间来随机化和操作颜色，并且还具有 oklch 颜色选择器 在调整生成的主题颜色时使用。

您可以浏览 VSCODE 主题社区或直接深入了解 GitHub 存储库中的代码。

---

迟到的发现

我知道，oklch 色彩空间并不是那么新鲜，但当我开始开发 VSCode 主题社区时，我完全不知道它的存在。就在几周前，我发现了它，并开始阅读大量相关文章，并意识到算法和应用程序本身的色彩空间迁移可能带来的所有好处。

在 oklch 色彩空间中，颜色由

表示

• L 代表感知亮度。
• C代表色度，代表色度强度，取值从0（消色差）开始，没有上限，但实际上不超过0.5； CSS 将 0.4 视为 100%。
• H 表示色轮中的色调角，通常以十进制表示。

感知亮度不仅可以轻松选择不同色调的亮度均匀的颜色，还可以在不改变色调参数的情况下操纵颜色的亮度和色度，非常适合与颜色生成算法一起使用。

算法使用选定的基本色调和配色方案/神圣几何图案生成一组色调后，主题的颜色将根据这些色调随机生成，并具有明度和彩度的变化。

通过采用 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中文网其他相关文章！