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