1. 项目概述为什么我们需要一个“漂亮”的终端作为一名常年与服务器和命令行打交道的开发者我每天有超过一半的工作时间是在终端里度过的。从早期的 PuTTY、Xshell到后来的 iTerm2、Windows Terminal我几乎用过市面上所有主流的终端工具。最终我选择并长期使用Electerm作为我的主力跨平台终端/SSH/SFTP 客户端。原因很简单它开源、免费、跨平台Windows/macOS/Linux并且功能足够强大集成了终端、SSH连接管理和SFTP文件传输于一体极大地提升了我的工作效率。但用久了之后我开始不满足于它的默认外观。默认的主题虽然清晰但看久了难免有些单调和“开发感”过重。一个赏心悦目的工作环境不仅能缓解视觉疲劳更能潜移默化地提升工作时的专注度和愉悦感。这就像程序员喜欢折腾自己的编辑器主题如 VSCode、Cursor、Typora 的主题一样一个精心配置的终端主题是开发者个性化工作台和提升生产力的重要一环。因此今天我想分享的不仅仅是一个或几个现成的“漂亮” Electerm 主题文件更是一套完整的主题定制方法论。我将从 Electerm 主题的工作原理讲起手把手教你如何从零开始打造一个独一无二、符合自己审美和习惯的终端主题并分享我收集和自研的几个高颜值主题配置。无论你是追求 macOS 的毛玻璃效果、Windows 11 的现代化设计还是某种特定的代码高亮风格这篇文章都能给你答案。2. Electerm 主题机制深度解析在开始动手之前我们必须先理解 Electerm 的主题是如何工作的。这能帮助我们在修改时有的放矢避免盲目尝试。2.1 主题的构成不仅仅是颜色很多人认为终端主题就是改个背景色和字体颜色其实远不止如此。一个完整的 Electerm 主题主要包含以下几个核心部分终端色彩方案这是主题的核心定义了 16 种基本 ANSI 颜色0-15以及前景色、背景色、光标色等。这直接决定了你在终端里输入命令、查看ls输出、阅读git log时的视觉效果。CSS 样式覆盖Electerm 的 UI 部分如侧边栏、标签页、按钮、设置面板是由 Electron 构建的其样式可以通过自定义 CSS 进行修改。这意味着你可以改变整个应用程序的边框、背景、字体、甚至布局的圆角、阴影等实现类似 Windows 11 或 macOS 的视觉风格。字体与排版终端字体的选择如Fira Code,Cascadia Code,JetBrains Mono和字号、行高设置对可读性和美观度有巨大影响。一个等宽且带有编程连字的字体能极大提升代码阅读体验。背景图像与透明度是否设置背景图是否启用亚克力或毛玻璃模糊效果这能瞬间提升终端的“颜值”档次。2.2 主题文件在哪里Electerm 的主题配置主要存储在两个地方色彩方案位于 Electerm 的用户配置目录下。通常路径为Windows:%APPDATA%\electerm\electerm.jsonmacOS:~/Library/Application Support/electerm/electerm.jsonLinux:~/.config/electerm/electerm.json其中的terminalBackground,terminalForeground,terminalCursor,terminalColors等字段就定义了色彩方案。CSS 覆盖文件在 Electerm 的设置中有一个“自定义 CSS”的选项。你可以将写好的 CSS 代码直接粘贴进去或者更推荐的做法是将其保存为一个.css文件然后在设置中指向该文件路径。这样做便于管理和备份。理解了这个机制我们就可以像搭积木一样组合色彩方案和 CSS 样式来创造属于自己的主题了。3. 从零开始打造你的第一个自定义主题接下来我将以一个具体的例子演示如何创建一个深色、护眼、带有轻微毛玻璃效果的主题。我们将它命名为 “Glow Dark”。3.1 第一步规划色彩方案我偏爱深色主题但纯黑#000000对比度太高长时间看容易疲劳。我选择一种深灰色作为背景。同时为了代码高亮清晰需要精心挑选 16 色。这里我使用一个在线工具如 Terminal.sexy来辅助配色。我的 “Glow Dark” 核心色值如下背景色#1e1e2e(一种源自dracula主题的深蓝紫色比纯黑柔和)前景色#cdd6f4(浅灰白色确保在深色背景上清晰可读)光标色#f5e0dc(柔和的粉色光标位置一目了然)选择文本背景色#585b70(中灰色区分选中状态)16 色 ANSI 颜色配置对应终端中各种状态和命令输出terminalColors: [ #45475a, // 0: Black #f38ba8, // 1: Red (用于错误) #a6e3a1, // 2: Green (用于成功) #f9e2af, // 3: Yellow (用于警告) #89b4fa, // 4: Blue (用于目录) #cba6f7, // 5: Magenta #94e2d5, // 6: Cyan #bac2de, // 7: White (常规文字) #585b70, // 8: Bright Black #f38ba8, // 9: Bright Red #a6e3a1, // 10: Bright Green #f9e2af, // 11: Bright Yellow #89b4fa, // 12: Bright Blue #cba6f7, // 13: Bright Magenta #94e2d5, // 14: Bright Cyan #a6adc8 // 15: Bright White ]这个配色方案饱和度适中对比度友好长时间编码不易眼酸。其中蓝色#89b4fa用于目录名绿色#a6e3a1用于git的干净状态红色#f38ba8突出显示错误逻辑清晰。3.2 第二步应用色彩方案到 Electerm关闭 Electerm。找到你的electerm.json配置文件路径见上文。用文本编辑器如 VSCode打开它。找到与终端颜色相关的字段将其替换为上面的配置。关键字段示例如下{ terminalBackground: #1e1e2e, terminalForeground: #cdd6f4, terminalCursor: #f5e0dc, selectionBackground: #585b70, terminalColors: [ #45475a, #f38ba8, #a6e3a1, #f9e2af, #89b4fa, #cba6f7, #94e2d5, #bac2de, #585b70, #f38ba8, #a6e3a1, #f9e2af, #89b4fa, #cba6f7, #94e2d5, #a6adc8 ], // ... 其他配置 }保存文件然后重新启动 Electerm。此时打开一个新的终端标签页你应该能看到基础的色彩已经生效。可以输入ls --colorauto或npm install等命令看看颜色显示是否正确。注意直接编辑electerm.json有风险建议先备份原文件。也可以在 Electerm 的设置界面中逐个修改颜色但直接编辑 JSON 对于应用一套完整的配色方案更高效。3.3 第三步使用 CSS 美化应用程序界面现在终端内部好看了但 Electerm 本身的窗口、侧边栏可能还是默认样式。我们需要用 CSS 来“化妆”。创建一个新文件命名为glow-dark-theme.css。以下是我使用的样式旨在创造一种紧凑、现代、略带模糊背景的效果/* Glow Dark Theme for Electerm - Custom CSS */ /* 1. 整体应用程序窗口背景与模糊 */ .app { background: rgba(30, 30, 46, 0.85) !important; /* 使用半透明的主题背景色 */ backdrop-filter: blur(10px) !important; /* 关键毛玻璃模糊效果 */ } /* 2. 侧边栏服务器列表样式 */ .sidebar { background-color: rgba(69, 71, 90, 0.7) !important; /* 半透明深色 */ border-right: 1px solid #585b70 !important; } .sidebar-list-item:hover { background-color: #585b70 !important; } .sidebar-list-item.active { background-color: #89b4fa !important; color: #1e1e2e !important; } /* 3. 标签页栏样式 */ .tab-bar { background-color: rgba(30, 30, 46, 0.9) !important; border-bottom: 1px solid #585b70 !important; } .tab { color: #cdd6f4 !important; background-color: rgba(69, 71, 90, 0.5) !important; border: 1px solid transparent !important; border-radius: 6px 6px 0 0 !important; margin-right: 2px !important; } .tab.active { background-color: #1e1e2e !important !important; border-color: #585b70 #585b70 transparent #585b70 !important; } /* 4. 终端容器区域 */ .terminal-container { /* 背景色已在JSON中设置这里可以加个内阴影增加层次感 */ box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3) !important; } /* 5. 按钮及输入框等控件美化 */ button { background-color: #585b70 !important; color: #cdd6f4 !important; border: none !important; border-radius: 4px !important; padding: 6px 12px !important; } button:hover { background-color: #6c7086 !important; } input, select { background-color: rgba(69, 71, 90, 0.8) !important; color: #cdd6f4 !important; border: 1px solid #585b70 !important; border-radius: 4px !important; padding: 4px 8px !important; }3.4 第四步应用 CSS 并设置字体将上面这段 CSS 代码保存到glow-dark-theme.css文件放在一个你容易找到的路径例如~/Documents/electerm-themes/。打开 Electerm进入设置-高级设置。找到 “自定义 CSS 文件路径” 或 “Custom CSS” 的选项。点击 “浏览” 或直接输入路径指向你刚保存的glow-dark-theme.css文件。保存设置并重启 Electerm。字体设置在 Electerm 常规设置中调整字体族推荐使用‘Fira Code Retina’, ‘Cascadia Code PL’, ‘JetBrains Mono’, monospace。Fira Code的编程连字特性非常棒。字号根据你的屏幕分辨率调整我通常用14px或16px。行高设置为1.2到1.5之间让文字不那么拥挤。至此你的第一个自定义主题 “Glow Dark” 就完成了。它拥有协调的深色配色、清晰的语法高亮以及应用程序本身的毛玻璃模糊效果整体观感统一且专业。4. 进阶技巧与主题分享掌握了基础方法我们可以玩出更多花样。下面分享几个我常用的进阶技巧和两个现成的主题方案。4.1 技巧一动态背景与壁纸静态颜色看腻了可以给终端设置一张静态壁纸甚至动态壁纸。这主要通过 CSS 的background-image属性实现。.terminal-container .xterm-screen { background-image: url(‘file:///C:/Path/To/Your/wallpaper.jpg’) !important; background-size: cover !important; background-position: center !important; /* 为了使文字在复杂背景上可读可以加一个深色半透明遮罩 */ position: relative !important; } .terminal-container .xterm-screen::before { content: ‘’ !important; position: absolute !important; top: 0; left: 0; right: 0; bottom: 0 !important; background-color: rgba(30, 30, 46, 0.7) !important; /* 半透明遮罩 */ z-index: -1 !important; }实操心得背景图务必选择低对比度、色彩简单的图片否则文字会难以辨认。动态壁纸如通过工具设置桌面壁纸后在 Electerm 中启用透明效果在 Windows 上配合acrylic效果或在 macOS 上配合vibrancy效果体验更佳。但请注意复杂的背景可能会轻微影响终端滚动的性能。4.2 技巧二模拟 Windows 11 或 macOS 风格如果你想让你 Electerm 的 UI 更像 Windows 11圆角、Mica 材质或 macOS标题栏融合、毛玻璃CSS 是强大的武器。Windows 11 风格核心 CSS 片段/* 圆角窗口 */ #app { border-radius: 8px !important; overflow: hidden !important; } /* 模拟 Mica 背景需要背景模糊支持 */ .app { background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(20px) saturate(180%) !important; } /* 标题栏样式 */ .title-bar { background: transparent !important; height: 32px !important; }macOS 风格核心 CSS 片段/* 移除多余边框让窗口更简洁 */ .tab-bar, .sidebar { border: none !important; } /* 更强的毛玻璃效果 */ .app { background: transparent !important; backdrop-filter: blur(30px) !important; } /* 按钮样式更圆润 */ button { border-radius: 6px !important; }4.3 现成主题分享One Dark Pro 与 Solarized Light除了自己制作也可以直接复用其他优秀编辑器的配色。这里提供两个经典方案的 Electerm 配置。主题一One Dark Pro (源自 Atom/VSCode)这是非常流行的深色主题对比度好色彩辨识度高。色彩方案 (electerm.json 部分):{ “terminalBackground”: “#282c34”, “terminalForeground”: “#abb2bf”, “terminalCursor”: “#528bff”, “selectionBackground”: “#3e4451”, “terminalColors”: [ “#282c34”, “#e06c75”, “#98c379”, “#e5c07b”, “#61afef”, “#c678dd”, “#56b6c2”, “#abb2bf”, “#545862”, “#e06c75”, “#98c379”, “#e5c07b”, “#61afef”, “#c678dd”, “#56b6c2”, “#ffffff” ] }CSS 建议UI 背景色使用#21252b与终端背景色形成层次。主题二Solarized Light经典的浅色主题适合在光线明亮的环境下使用非常护眼。色彩方案 (electerm.json 部分):{ “terminalBackground”: “#fdf6e3”, “terminalForeground”: “#657b83”, “terminalCursor”: “#dc322f”, “selectionBackground”: “#eee8d5”, “terminalColors”: [ “#073642”, “#dc322f”, “#859900”, “#b58900”, “#268bd2”, “#d33682”, “#2aa198”, “#eee8d5”, “#002b36”, “#cb4b16”, “#586e75”, “#657b83”, “#839496”, “#6c71c4”, “#93a1a1”, “#fdf6e3” ] }CSS 建议UI 使用浅米色#fdf6e3或#eee8d5避免纯白刺眼。你可以将上述terminalColors等字段合并到你自己的electerm.json中并搭配相应的 CSS 来改变 UI 色调。5. 常见问题、排查与优化实录在自定义主题的过程中你可能会遇到一些问题。以下是我踩过的一些坑和解决方案。5.1 问题颜色不生效或显示异常症状修改了electerm.json后重启终端颜色还是老的。排查检查 JSON 语法确保没有多余的逗号括号匹配。可以使用 JSON 验证工具检查。检查文件路径确认你修改的是当前用户目录下的electerm.json而不是安装目录下的。缓存问题完全退出 Electerm包括系统托盘图标再重新打开。配置冲突Electerm 的设置界面里也可能有颜色选项。如果在那里修改过可能会覆盖 JSON 文件中的配置。建议统一在一个地方修改。5.2 问题CSS 样式没有效果症状CSS 文件路径设置正确但 UI 没有任何变化。排查CSS 选择器优先级Electerm 内置的样式可能有更高的优先级。确保你的 CSS 规则末尾加上了!important来强制覆盖。如上文所有示例所示。开发者工具在 Electerm 中按CtrlShiftI(Windows/Linux) 或CmdOptI(macOS) 打开开发者工具。在 “Elements” 面板中找到你想修改的元素查看它最终应用的样式并测试你的 CSS 选择器是否正确。文件权限确保 Electerm 有权限读取你的 CSS 文件。缓存重启修改 CSS 文件后有时需要重启 Electerm 才能生效。5.3 问题启用模糊效果后性能下降症状使用了backdrop-filter: blur()后窗口拖动或滚动终端时感到卡顿。优化降低模糊度将blur(20px)减小到blur(5px)或blur(10px)。模糊半径越大性能开销越大。缩小模糊区域不要对整个.app应用模糊可以只对侧边栏.sidebar或标签栏.tab-bar应用终端区域保持不模糊。权衡关闭如果机器性能确实有限可以考虑关闭毛玻璃效果改用纯色或渐变背景美观度依然很高。5.4 主题管理与备份当你积累了好几个主题后管理就变得重要了。配置文件备份定期备份你的electerm.json文件和自定义的.css文件。你可以将它们放在云盘或 Git 仓库中。快速切换脚本可以写一个简单的 Shell 脚本或批处理文件用来替换electerm.json文件实现主题的一键切换。例如#!/bin/bash # switch_to_glow_dark.sh cp ~/.config/electerm/themes/glow-dark.json ~/.config/electerm/electerm.json # 然后重启 electerm (需要根据系统找到进程名) pkill electerm electerm 分享你的主题将你的electerm.json中的相关字段和.css文件整理到一个文件夹写上简单的说明文档就可以分享给他人了。这也是社区主题生态繁荣的基础。折腾终端主题是一个融合了审美、前端技术和个性化需求的过程。它不会让你的代码跑得更快但能让你在漫长的开发工作中拥有一个更舒适、更专属的视觉环境。从模仿一个喜欢的主题开始逐步调整每一个色值、每一个圆角直到它完全符合你的心意这个过程本身也充满了乐趣和成就感。希望这篇长文能帮你打造出那个让你一眼就爱上的“漂亮 Electerm”。