DbGate 中全新的主题系统
Published: 2026-01-23
在过去的几年里，DbGate 一直使用同一套主题系统。随着 7.0.0 版本的发布，我们引入了一个完全基于 JSON 文件的全新主题系统。不幸的是，之前以插件形式实现的旧自定义主题将不再受支持。
我们非常感谢 DbGate 社区成员为 DbGate 创建的各种主题，也非常遗憾此前创建的主题将不再受支持。正因为如此，我们很长时间都在推迟这个决定。然而，随着时间推移，无法演进界面设计的问题变得越来越难以为继。最终，我们决定做出一次激进的改变，彻底重构主题系统。
在这篇文章中，我会解释我们为什么要做出这个改变，以及新的主题系统是如何工作的。
DbGate 在 6.x 版本之前被冻结的主题系统
在 6.x 版本之前，DbGate 使用的是一个相对简单的主题系统。它通过少量 CSS 变量来定义颜色。这些 CSS 变量并不对应具体的界面元素，而是比较通用（例如 --font-color-1、--font-color-2、--background-color-1、--background-color-2 等）。这种系统虽然让创建新主题变得很容易，但功能相当有限。无法为特定的 UI 元素单独定义样式。这个系统也在某种程度上“冻结”了应用的设计，因为只要修改某个颜色 CSS 变量，就会影响整个应用，而不是某个特定部分。
DbGate 7.0.0 中基于元素的主题系统
在 DbGate 7.0.0 中，我们引入了一个完全基于 JSON 文件的全新主题系统。在这个新系统中，每个 UI 元素都有自己的一组 CSS 变量，用来定义颜色、边框以及其他样式属性。这为定义主题提供了更大的灵活性。现在的主题由数量更多的 CSS 变量组成，每个变量都与具体的 UI 元素相关（例如 --data-browser-font-color、--data-browser-background-color、--button-font-color、--button-background-color 等）。
在 AI 生成内容的时代，我们希望能够方便地使用 AI 创建自定义主题，这就需要对应用外观进行更加细致的控制。此外，由于 AI 可以帮助处理这类工作，维护更多 CSS 变量的成本几乎可以忽略不计，而在设计灵活性方面带来的收益却非常可观。
使用 AI 生成主题
DbGate Premium 版本包含一个全新的主题 AI 助手功能。通过这个功能，用户可以使用 AI 创建自定义主题。你只需用自然语言描述你想要的主题，AI 助手就会根据你的描述生成一个主题。你也可以对生成的主题进行修改，只需描述你想要做出的更改即可。
通过 DbGate Cloud 分享主题
我们增强了 DbGate 公共知识库，以支持分享自定义主题。你只需创建自己的主题（在 JSON 文件中定义 CSS 变量）。你可以参考 Solarized 浅色主题的源代码获取灵感。我们也鼓励你使用 AI 助手来创建主题的第一个版本。 在发布时，只需向 DbGate 公共知识库仓库创建一个 pull request。合并之后，你的主题就会出现在所有 DbGate 用户的主题选择器中（还会根据主题中的颜色生成预览）。