wterm主题定制指南如何用CSS变量在10分钟内打造专属终端配色【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wtermwterm 是一款基于 Zig WebAssembly 的 Web 终端模拟器而它的主题系统完全构建在 **CSS 自定义属性CSS Variables**之上。这意味着你不需要动一行渲染代码只靠几行 CSS 就能让 wterm 终端主题变成你专属的配色方案。本文带你用 10 分钟走完「应用内置主题 → 打造自定义主题」的完整流程。为什么 wterm 的主题定制这么简单传统终端引擎的配色往往写死在 JS 或 WASM 里改颜色要改代码、重新编译。wterm 把「颜色」这件事完全交给了 CSS背景、文字、光标、16 色 ANSI 调色板全部是--term-*开头的 CSS 变量内置 DefaultDark 风格、Solarized Dark、Monokai、Light 四套主题全部只是「同一组变量的不同取值」渲染器、光标、单元格背景都会自动读取这些变量改完即时生效变量定义都集中在 terminal.css 中这也是你定制时的「对照字典」。 想先上手玩一把仓库里带了一个原生演示页 web/index.html右上角的下拉框可以直接切换 4 套内置主题git clone https://gitcode.com/gh_mirrors/wterm1/wterm cd wterm/web python3 -m http.server 8000前 5 分钟应用一个内置主题框架方式一个theme属性搞定React、Vue、Svelte 三种组件都通过同一个theme属性切换主题Terminal thememonokai /传入thememonokai后组件会自动给终端元素加上theme-monokai类具体逻辑见 Terminal.tsx。原生 JS手动加类名不使用框架时给终端容器加上对应的主题类即可term.element.classList.add(theme-solarized-dark);完整的四套内置主题色值可以在官方文档页 themes.mdx 里查到。后 5 分钟打造你的第一个 wterm 自定义主题以流行的「Tokyo Night 风格」为例分三步走。第 1 步准备配色任选你喜欢的配色GitHub 之外的配色方案站、Figma 色板都行确定三组颜色需要定的颜色作用背景色整个终端的底前景色默认文字光标色闪烁的光标块16 色 ANSIls、git等命令输出的红绿蓝第 2 步写一个 CSS 类覆盖变量新建任意一个样式文件或加在项目的 CSS 里定义如下.wterm.theme-tokyo-night { --term-bg: #1a1b26; /* 背景 */ --term-fg: #c0caf5; /* 默认文字 */ --term-cursor: #f7768e; /* 光标 */ --term-color-0: #15161e; /* 黑 */ --term-color-1: #f7768e; /* 红 */ --term-color-2: #9ece6a; /* 绿 */ --term-color-3: #e0af68; /* 黄 */ --term-color-4: #7aa2f7; /* 蓝 */ --term-color-5: #bb9af7; /* 品红 */ --term-color-6: #7dcfff; /* 青 */ --term-color-7: #a9b1d6; /* 白 */ --term-color-8: #414868; /* 亮黑亮白 依次类推 */ --term-color-9: #f7768e; --term-color-10: #9ece6a; --term-color-11: #e0af68; --term-color-12: #7aa2f7; --term-color-13: #bb9af7; --term-color-14: #7dcfff; --term-color-15: #c0caf5; }第 3 步像内置主题一样应用Terminal themetokyo-night /或者原生 JSterm.element.classList.add(theme-tokyo-night);刷新页面专属配色就生效了 —— 光标、文字、ANSI 输出颜色全部自动跟随变量切换。CSS 变量完整速查表变量说明默认值--term-bg终端背景色#1e1e1e--term-fg默认文字色#d4d4d4--term-cursor光标颜色#aeafad--term-font-family字体栈Menlo / Consolas 等--term-font-size字号14px--term-line-height行高倍数1.2--term-color-0~7标准 ANSI 8 色黑红绿黄蓝品青白见 Default 主题--term-color-8~15亮 ANSI 8 色见 Default 主题两点小提醒只有这 16 个命名色走 CSS 变量256 色和 24 位真彩色由渲染器直接计算不受主题影响想换字体改--term-font-family和--term-font-size即可wterm 会重新测量字宽光标、背景和盒线字符都会自动对齐配色不踩坑的 3 个技巧对比度优先背景与默认文字色的亮度差要足够大比如#1e1e1e#d4d4d4深色底配深色字是新手最常见的翻车点亮色 ANSI 要比普通色更亮--color-9~15通常取对应普通色的加亮版这样git status里的增删标记才有层次感光标要「跳出来」光标色建议与前景色明显区分如 Tokyo Night 用玫红#f7768e否则长行里很难定位光标位置 参考实现四套内置主题的完整取值都写在 terminal.css 中Solarized Dark 在 L281-L301、Monokai 在 L304-L324、Light 在 L327-L347直接抄结构最稳妥。Svelte 示例 App.svelte 里还有一个现成的主题切换下拉框可当模板用。常见问题 FAQ改了变量颜色没变怎么排查确认你的样式选择器写成了.wterm.theme-xxx而不是.theme-xxx前缀的.wterm类不能丢否则变量覆盖不到终端容器。自定义主题和框架的theme属性冲突吗不冲突。thememy-theme只会追加theme-my-theme类名变量取值完全由你的 CSS 决定内置主题同理。能不能跟随系统明暗切换可以。用media (prefers-color-scheme: dark)包住两套变量取值让同一个主题类输出不同颜色即可。小结wterm 的主题系统把「配色」做成了纯 CSS 问题内置 4 套主题一个属性切换自定义主题一个 CSS 类搞定16 色调色板、字体、光标全部通过 CSS 变量暴露。从本文的第 2 步开始你的 Web 终端就拥有了独一无二的配色。延伸阅读官方主题文档apps/docs/content/docs/themes.mdx变量定义源头packages/wterm/dom/src/terminal.css原生演示含主题切换web/index.htmlReact 组件主题逻辑packages/wterm/react/src/Terminal.tsx【免费下载链接】wtermA terminal emulator for the web项目地址: https://gitcode.com/gh_mirrors/wterm1/wterm创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考