Qt Creator 配色方案定制：从 VS2019 Dark 迁移完整指南

1. 为什么我要折腾Qt Creator的配色方案

用Qt Creator写C++的人大概都有过这种体验：白天写代码还好，一到晚上，那个默认的浅色主题简直像拿手电筒照眼睛。我平时主力编辑器是Visual Studio 2019的Dark主题，那个配色用了好几年，眼睛已经完全适应了——关键字是淡蓝色，字符串是橙红色，注释是绿色，背景是那种很深的灰黑色，整体对比度柔和但不失清晰。后来因为项目需要转到Qt Creator上开发，第一天晚上加班就受不了了，那个默认配色在暗光环境下看两个小时，眼睛酸得不行。

于是我就想，能不能把VS2019 Dark那套配色搬到Qt Creator里来？搜了一圈发现网上确实有人做过类似的事情，但要么是版本太老对不上现在的Qt Creator，要么就是只改了编辑器区域，侧边栏、输出窗口、菜单栏还是原来的浅色，看起来像打了个补丁一样割裂。我决定自己动手，把整套配色方案完整地迁移过来，包括编辑器语法高亮、全局界面主题、字体渲染这几个层面。

这件事看起来简单，实际上涉及的东西比想象中多。Qt Creator的配色系统分好几个层级：编辑器内部的语法高亮是一套主题文件，整个IDE的界面皮肤是另一套机制，而字体和行高又跟操作系统渲染有关。你得把这三层都对齐了，才能得到真正接近VS2019 Dark的观感。下面我把整个折腾过程拆开来讲，从原理到实操到踩坑，尽量说透。

2. Qt Creator配色系统的三层结构拆解

2.1 编辑器语法高亮层

Qt Creator的编辑器配色是通过.xml格式的主题文件来定义的，存放在Qt Creator安装目录下的share/qtcreator/styles/文件夹里。每个主题文件定义了各种语法元素的前景色、背景色、字体样式（粗体、斜体）。比如关键字、字符串、注释、数字、函数名、类名、预处理指令等等，每一项都可以单独设置。

这个XML的结构其实很直观，根节点是<style>，里面包含<style name="...">这样的子节点，每个子节点有foreground、background、bold、italic这些属性。颜色用十六进制表示，格式是#RRGGBB。你可以在Qt Creator的“首选项→文本编辑器→字体和颜色”里直接看到当前主题的所有配置项，也可以在那里手动改，但手动改的问题是没法导出成可复用的主题文件，换台机器就得重来。

VS2019 Dark的编辑器配色有一套比较固定的色值体系，我通过截图取色的方式把主要颜色提取了出来。这里要说明一下，VS2019的配色在不同语言下略有差异，C++和C#的关键字颜色就不太一样。我主要参照的是C++的配色方案，因为Qt Creator主要用来写C++。

2.2 全局界面皮肤层

这一层是很多人容易忽略的。Qt Creator从4.x版本开始支持全局的界面主题切换，在“首选项→环境→界面”里可以选择主题。默认有“Default”和“Dark”两个选项，但这个Dark主题跟VS2019的Dark差别很大——它的背景偏蓝灰色，侧边栏颜色也不对，整体看起来偏冷。

Qt Creator的全局主题是通过QSS（Qt Style Sheets）来控制的，本质上跟网页的CSS是一个思路。主题文件存放在share/qtcreator/themes/目录下，每个主题是一个文件夹，里面包含.qss文件和相关的资源文件。你可以基于现有的Dark主题复制一份，然后修改里面的颜色值。

QSS能控制的范围包括：菜单栏、工具栏、侧边栏、输出面板、状态栏、滚动条、按钮、输入框等等。基本上你能看到的界面元素都能通过QSS来定制。但要注意，Qt Creator的QSS支持并不完整，有些CSS属性它不认，有些控件的样式需要特定的选择器才能生效，这个后面会详细说。

2.3 字体与渲染层

配色方案里字体其实占了很大比重。VS2019默认用的是Consolas字体，字号10pt，行高比较紧凑。Qt Creator默认在Windows下用的是Courier New或者系统等宽字体，看起来比Consolas要松散一些。

字体这块的调整在“首选项→文本编辑器→字体和颜色”里，可以设置字体族、字号、行间距。我建议把字体设成Consolas，字号10到11之间，行间距设成100%到110%。另外还要注意抗锯齿的设置，Qt Creator默认开启抗锯齿，但在某些显示器上会让字体看起来发虚，可以尝试关闭看看效果。

还有一个容易忽略的点是颜色方案的整体亮度平衡。VS2019 Dark的背景色不是纯黑，而是#1E1E1E左右，侧边栏是#2D2D30，工具栏是#2D2D30，整体层次感是通过不同深度的灰色来区分的。如果你把所有背景都设成同一个颜色，看起来就会很平，没有层次。

3. 从VS2019提取配色参数的完整过程

3.1 编辑器核心色值的提取

我用的方法比较笨但很可靠：打开VS2019，截取编辑器区域的截图，然后用取色工具逐项提取颜色值。这里把关键色值列出来，方便你直接抄作业。

这些色值是我反复对比截图取出来的，可能跟你的VS2019因为主题微调有细微差异，但整体偏差不会太大。如果你想要更精确的值，可以在VS2019里通过“工具→选项→环境→字体和颜色”逐个查看，那里会显示每个元素的具体色值。

3.2 界面元素的色值对应

全局界面这块，VS2019 Dark的主要色值如下：

这里要特别注意，Qt Creator的QSS选择器跟VS2019的界面结构不是一一对应的。比如VS2019的侧边栏在Qt Creator里叫“项目树”或者“模式选择器”，你得找到对应的QSS选择器才能改对地方。这个后面实操部分会详细讲。

3.3 字体参数的确定

VS2019 Dark默认的编辑器字体是Consolas 10pt，行高大约是字号的1.2倍。在Qt Creator里，字体设置在“首选项→文本编辑器→字体和颜色”里，选择“Consolas”字体，字号设成10或者11，行间距设成100%到110%。

这里有个细节：Qt Creator在Windows下的字体渲染跟VS2019不太一样，同样的Consolas 10pt，在Qt Creator里看起来会稍微小一点。我建议字号设成11，行间距105%，这样视觉上比较接近。如果你用的是高DPI显示器，还需要在“首选项→环境→界面”里调整缩放比例，否则字体可能会模糊。

4. 手把手制作Qt Creator主题文件

4.1 创建编辑器配色XML文件

首先找到Qt Creator的样式目录。在Windows下通常是：

C:\Qt\Qt5.15.2\Tools\QtCreator\share\qtcreator\styles\

具体路径根据你的安装位置和版本号会有所不同。在这个目录下，你会看到一些现成的.xml文件，比如default.xml、dark.xml等。我们复制一份dark.xml，重命名为vs2019dark.xml。

然后打开这个文件，开始逐项修改颜色值。文件结构大概是这样的：

<style name="VS2019 Dark" version="1.0"> <style name="Text" foreground="#DCDCDC" background="#1E1E1E"/> <style name="Keyword" foreground="#569CD6"/> <style name="String" foreground="#D69D85"/> <style name="Comment" foreground="#57A64A"/> <style name="Number" foreground="#B5CEA8"/> <style name="Function" foreground="#DCDCAA"/> <style name="Type" foreground="#4EC9B0"/> <style name="Preprocessor" foreground="#9B9B9B"/> <style name="Operator" foreground="#D4D4D4"/> <style name="CurrentLine" background="#282828"/> <style name="Selection" background="#264F78"/> <style name="LineNumber" foreground="#2B91AF"/> <style name="SearchResult" background="#623315"/> <style name="MatchingBrace" background="#3A3D41"/> </style>

这里只列了最常用的几项，实际上Qt Creator的样式文件里有几十个条目，包括各种语言特定的语法元素。你不需要每一项都改，但核心的几项必须改到位，否则看起来会不伦不类。

注意：修改XML文件时，颜色值必须用六位十六进制格式，不要用三位缩写，Qt Creator不认。另外文件编码必须是UTF-8，否则中文注释可能会乱码。

4.2 制作全局QSS主题

全局主题的目录在：

C:\Qt\Qt5.15.2\Tools\QtCreator\share\qtcreator\themes\

里面有一个dark文件夹，我们复制一份改名为vs2019dark。打开里面的.qss文件，开始修改。

QSS的语法跟CSS很像，但选择器是Qt控件类名。比如要改主窗口背景：

QMainWindow { background-color: #2D2D30; }

要改菜单栏：

QMenuBar { background-color: #2D2D30; color: #F1F1F1; } QMenuBar::item:selected { background-color: #094771; }

要改侧边栏（项目树）：

QTreeView { background-color: #252526; color: #F1F1F1; alternate-background-color: #2D2D30; } QTreeView::item:selected { background-color: #094771; } QTreeView::item:hover { background-color: #2A2D2E; }

要改输出窗口：

QPlainTextEdit { background-color: #1E1E1E; color: #DCDCDC; }

要改滚动条：

QScrollBar:vertical { background-color: #1E1E1E; width: 12px; } QScrollBar::handle:vertical { background-color: #424242; min-height: 20px; } QScrollBar::handle:vertical:hover { background-color: #4F4F4F; }

这些选择器不是凭空猜的，你可以通过Qt Creator的“帮助→关于插件”查看已加载的样式，或者用Qt的调试工具查看控件类名。我一开始也是一个个试出来的，改完重启Qt Creator看效果，不对再调。

4.3 主题文件的注册与加载

光把文件放进去还不够，还需要让Qt Creator知道有这个主题。在主题文件夹里有一个theme.ini或者类似的配置文件，里面列出了可用的主题。你需要把新主题的名字加进去。

具体操作是打开themes目录下的配置文件，找到类似这样的段落：

[themes] 1=default 2=dark 3=vs2019dark

然后把你的主题加进去。有些版本的Qt Creator不需要手动注册，只要文件夹存在就能在设置里看到。如果重启后没看到，检查一下文件夹命名和配置文件。

加载主题的路径是“首选项→环境→界面”，在主题下拉框里选择你新建的“VS2019 Dark”。选完之后界面会立即刷新，但编辑器配色需要单独在“首选项→文本编辑器→字体和颜色”里选择对应的配色方案。

5. 实操过程中踩过的坑与解决方案

5.1 颜色改了但界面没变化

这是最常见的问题。原因通常有三个：一是QSS文件没有正确加载，可能是路径不对或者配置文件没注册；二是选择器写错了，Qt Creator没匹配到对应的控件；三是有些控件被硬编码了颜色，QSS覆盖不了。

排查方法：先确认主题是否出现在设置列表里，如果出现了但界面没变，那就是QSS选择器的问题。可以尝试用通配符*来测试：

* { background-color: #2D2D30; color: #F1F1F1; }

如果这样能生效，说明QSS加载没问题，只是选择器不对。然后逐步缩小范围，找到正确的选择器。如果通配符也不生效，那就是主题没加载，检查文件夹结构和配置文件。

5.2 编辑器配色和界面配色不协调

这个问题我折腾了很久。编辑器用了VS2019的深灰色背景#1E1E1E，但侧边栏如果还用Qt Creator默认的深蓝色，看起来就很割裂。解决办法是把侧边栏也改成VS2019的#252526，工具栏改成#2D2D30，这样整体色调就统一了。

另外要注意文字颜色的对比度。VS2019的侧边栏文字是#F1F1F1，在#252526背景上对比度足够。但如果你把背景改得更深，文字颜色也要相应调整，否则看起来会发灰。

5.3 高DPI显示器下的字体模糊

在高分屏上，Qt Creator默认的缩放策略可能会导致字体模糊。解决办法是在“首选项→环境→界面”里把“缩放”设成“自动”，或者手动指定一个缩放比例。另外可以在Qt Creator的启动快捷方式里加一个环境变量：

QT_SCALE_FACTOR=1.5

具体数值根据你的显示器DPI来定。我自己的2K显示器设的是1.25，4K显示器设的是1.75，效果比较理想。

5.4 某些语法元素颜色不生效

Qt Creator的语法高亮有些是硬编码的，比如某些内置类型或者特殊符号，XML文件里改了也不生效。这种情况只能接受，或者通过修改Qt Creator的源码来改，但那样成本太高了。我的建议是抓大放小，把关键字、字符串、注释、函数名、类名这几个主要的改到位，整体观感就已经很接近了。

5.5 主题文件在不同Qt Creator版本间的兼容性

Qt Creator的样式文件格式在不同版本间有细微差异。比如4.11和5.0的XML结构就不完全一样，有些属性名变了，有些新增了条目。如果你从网上下载了一个现成的主题文件，导入后发现部分颜色不对，很可能就是版本不匹配。

解决办法是先用你当前版本的默认主题文件作为模板，然后把颜色值替换进去，而不是直接拿别的版本的文件来用。这样能保证结构是对的，只是颜色值不同。

6. 常见问题速查与进阶优化

6.1 常见问题速查表

6.2 进阶优化：让配色更接近原生VS2019

如果你想让效果更极致，可以做一些额外的调整。比如VS2019的当前行高亮不是简单的背景变色，而是有一个微妙的边框效果。在Qt Creator里可以通过QSS给编辑器加边框：

QPlainTextEdit { border: 1px solid #3F3F46; }

另外VS2019的括号匹配高亮是给匹配的括号加一个淡色背景，Qt Creator也支持这个功能，在XML里设置MatchingBrace的background即可。我设的是#3A3D41，效果比较接近。

还有一个细节是VS2019的搜索结果高亮是橙黄色背景，Qt Creator默认是蓝色。在XML里找到SearchResult条目，把background改成#623315，foreground改成#DCDCDC，就跟VS2019很像了。

6.3 主题的备份与迁移

辛辛苦苦调好的主题，换台机器或者重装系统后不想重来一遍，那就需要备份。需要备份的文件有两部分：编辑器配色XML文件和全局主题文件夹。把它们打包存好，在新机器上放到对应的目录，然后在设置里选择即可。

如果新机器的Qt Creator版本不同，可能需要微调，但大部分颜色值是可以直接复用的。我自己的做法是把主题文件放在一个云同步文件夹里，换机器时直接复制过去，五分钟就能恢复工作环境。

6.4 一个容易被忽略的细节：输出窗口的配色

很多人只改了编辑器，忘了改输出窗口。编译输出、调试输出、问题列表这些面板如果还是浅色背景，晚上用起来一样刺眼。在QSS里找到QPlainTextEdit和QListView相关的选择器，把背景改成#1E1E1E，文字改成#DCDCDC。另外编译错误的红色和警告的黄色也要调整，默认的红色在深色背景上看起来太刺眼，可以改成柔和一点的#F44747。

6.5 关于主题分享的一些经验

我后来把这套主题分享给了几个同事，发现不同人的显示器色温不一样，有人觉得刚好，有人觉得偏蓝。所以如果你要分享主题，最好提供几个微调版本，比如“标准版”“暖色版”“高对比度版”。另外记得在主题文件里加上注释，说明每个颜色值的来源和用途，方便别人二次修改。

还有一点，Qt Creator的版本更新比较频繁，每次大版本升级都可能影响主题的兼容性。我的建议是不要盲目升级，如果当前版本的主题用得好好的，没必要追新。等确认新版本的主题机制没有大变化再升级。

7. 我个人在实际操作中的几点体会

这套配色方案我从开始折腾到最终满意，前后花了大概三个晚上。第一个晚上主要在研究Qt Creator的主题机制，第二个晚上在提取VS2019的色值和写XML，第三个晚上在调QSS和解决各种不生效的问题。现在用下来，整体观感已经非常接近VS2019 Dark了，长时间写代码眼睛舒服很多。

有几点体会比较深：一是不要追求100%还原，因为两个IDE的渲染机制不同，能做到90%相似就已经很好了，剩下的10%强行对齐反而会引入新的问题。二是QSS的选择器一定要有耐心，有些控件需要组合选择器才能命中，比如QTreeView::item:selected和QTreeView::branch:selected就是两个不同的东西。三是主题文件要经常备份，我有一次改崩了没备份，只能从头再来。

最后分享一个小技巧：如果你不确定某个颜色值在Qt Creator里对应哪个元素，可以在“首选项→文本编辑器→字体和颜色”里逐个点击查看，那里会实时预览效果。找到对应的元素名之后，再去XML文件里搜索这个名字，就能精确定位了。这个方法比盲猜快得多。