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的全局主题是通过QSSQt 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 Dark色值说明编辑器背景#1E1E1E主编辑区背景默认文本#DCDCDC普通代码文本关键字#569CD6if、for、while等控制流关键字#C586C0return、break等字符串#D69D85字符串字面量注释#57A64A单行和多行注释数字#B5CEA8数字字面量函数名#DCDCAA函数调用和定义类名/类型#4EC9B0类、结构体、类型名预处理指令#9B9B9B#include、#define等运算符#D4D4D4、-、*、/等当前行高亮#282828光标所在行背景选中文本背景#264F78选中区域背景行号#2B91AF左侧行号颜色行号背景#1E1E1E行号栏背景这些色值是我反复对比截图取出来的可能跟你的VS2019因为主题微调有细微差异但整体偏差不会太大。如果你想要更精确的值可以在VS2019里通过“工具→选项→环境→字体和颜色”逐个查看那里会显示每个元素的具体色值。3.2 界面元素的色值对应全局界面这块VS2019 Dark的主要色值如下界面元素色值对应Qt Creator位置主窗口背景#2D2D30菜单栏、工具栏背景侧边栏背景#252526项目树、文件列表侧边栏文字#F1F1F1项目树文字选中项背景#094771侧边栏选中高亮悬停项背景#2A2D2E鼠标悬停高亮输出窗口背景#1E1E1E编译输出、调试输出输出窗口文字#DCDCDC输出文本状态栏背景#007ACC底部状态栏状态栏文字#FFFFFF状态栏文字滚动条背景#1E1E1E滚动条轨道滚动条滑块#424242滚动条滑块边框颜色#3F3F46各面板分隔线这里要特别注意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 nameVS2019 Dark version1.0 style nameText foreground#DCDCDC background#1E1E1E/ style nameKeyword foreground#569CD6/ style nameString foreground#D69D85/ style nameComment foreground#57A64A/ style nameNumber foreground#B5CEA8/ style nameFunction foreground#DCDCAA/ style nameType foreground#4EC9B0/ style namePreprocessor foreground#9B9B9B/ style nameOperator foreground#D4D4D4/ style nameCurrentLine background#282828/ style nameSelection background#264F78/ style nameLineNumber foreground#2B91AF/ style nameSearchResult background#623315/ style nameMatchingBrace 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] 1default 2dark 3vs2019dark然后把你的主题加进去。有些版本的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_FACTOR1.5具体数值根据你的显示器DPI来定。我自己的2K显示器设的是1.254K显示器设的是1.75效果比较理想。5.4 某些语法元素颜色不生效Qt Creator的语法高亮有些是硬编码的比如某些内置类型或者特殊符号XML文件里改了也不生效。这种情况只能接受或者通过修改Qt Creator的源码来改但那样成本太高了。我的建议是抓大放小把关键字、字符串、注释、函数名、类名这几个主要的改到位整体观感就已经很接近了。5.5 主题文件在不同Qt Creator版本间的兼容性Qt Creator的样式文件格式在不同版本间有细微差异。比如4.11和5.0的XML结构就不完全一样有些属性名变了有些新增了条目。如果你从网上下载了一个现成的主题文件导入后发现部分颜色不对很可能就是版本不匹配。解决办法是先用你当前版本的默认主题文件作为模板然后把颜色值替换进去而不是直接拿别的版本的文件来用。这样能保证结构是对的只是颜色值不同。6. 常见问题速查与进阶优化6.1 常见问题速查表问题现象可能原因解决方法主题列表里看不到新主题文件夹命名错误或未注册检查themes目录下的配置文件和文件夹名界面颜色部分生效部分不生效QSS选择器不匹配用通配符测试逐步缩小选择器范围编辑器背景改了但行号栏没变行号栏有独立的选择器在XML里单独设置LineNumber的background重启后主题恢复默认配置文件未保存或权限问题检查文件是否只读确认保存成功字体看起来比VS2019小渲染差异字号加1行间距设105%滚动条样式不生效Qt Creator版本不支持检查版本部分旧版本不支持滚动条QSS选中文本颜色看不清前景色和背景色对比度不够调整Selection的foreground和background高DPI下界面模糊缩放设置不对调整QT_SCALE_FACTOR环境变量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改成#623315foreground改成#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文件里搜索这个名字就能精确定位了。这个方法比盲猜快得多。