中文 | English
中文
🌙 Moongate Theme
从博客到编辑器，让代码栖息在月光里
Moongate 是一个从个人博客 moongate.top 衍生而来的 VS Code 主题，将博客的视觉语言带到代码编辑器中。
v2.4.0 代码精简与语言扩展：语言配置全面精简，新增 Rust 语言支持，TypeScript 内置对象视觉一致，构建脚本自动合并 token 规则，JSON 体积减小 16%。
📸 预览
| 语言 |
深色 |
浅色 |
| JavaScript |
 |
 |
| Python |
 |
 |
| Go |
 |
 |
| Vue |
 |
 |
✨ 设计理念
- 月光般的柔和：长时间 coding 不刺眼
- 清晰的边界：分明的视觉层次
- 昼夜皆宜：深色/浅色双主题，切换无感
- 物理海拔：侧边栏隆起，弹窗浮现，编辑器沉静
- 工程校准：所有色值通过 WCAG 对比度校验
🎨 配色系统
- 主色：冷调月蓝（深色
#3b82f6 / 浅色 #0284c7）
- 背景：深空
#0f172a / 冷月白 #f9fafb
- 海拔层级：四层明度阶梯（
surfaceGround → surfaceRaised → surfaceFloating → surfaceTooltip）
- 设计令牌：基于 DTCG 标准，自动生成 CSS 变量供跨平台复用
🧠 核心优化
| 优化项 |
Moongate 的解法 |
| 昼夜语义一致性 |
同一色系不同明度，视觉重量对等，切换无感 |
| 函数定义/调用分离 |
定义加粗，调用不加粗，全语言统一（Go、Python、JS、TS） |
| JSON 嵌套层级 |
蓝 → 青 → 紫 阶梯，层次一目了然 |
| UI 物理深度 |
海拔系统：不同 UI 区域分配明度阶梯，实现"纸张层叠" |
| 设计系统统一 |
DTCG 令牌自动生成 CSS 变量，一套颜色贯穿所有产品 |
✨ v2.4.0 亮点
- 🧹 语言配置全面精简：各语言文件移除与
base.yaml 重复的通用规则，Rust 精简 63%、Python 精简 56%、CSS 精简 50%，维护成本大幅降低
- 🦀 新增 Rust 语言支持：新增
rust.yaml 专属配置，覆盖泛型参数、生命周期、属性、宏等 Rust 特有语法元素，函数定义与调用统一加粗
- 🎯 TypeScript 内置对象一致：修复
JSON 意外加粗问题，所有内置对象（console、Math、JSON）视觉风格统一
- 📦 构建脚本优化：自动合并相同颜色的 token 规则，
tokenColors 从 89 条精简至 34 条（减少 62%），JSON 体积减小 16%
📜 查看完整更新日志
📐 设计系统
Moongate 基于 DTCG 设计令牌标准构建，提供完整的颜色、布局、排版、断点、z-index 令牌。
👉 查看完整设计系统文档
👉 使用颜色令牌驱动博客或 UI 组件库
👉 使用布局令牌（间距、排版、断点等）
⚙️ 推荐配置
语义高亮
安装 Moongate 后，语义高亮自动开启，无需任何手动配置。如遇问题，可检查：
{
"editor.semanticHighlighting.enabled": true
}
使用 Better Comments 插件时，可应用 Moongate 官方配色预设：
- 打开 VS Code 设置（JSON 格式）
- 将
extras/better-comments.json 合并到 better-comments.tags 字段
☕ 支持这个主题
如果 Moongate Theme 让你的编码时光更舒适，欢迎请我喝杯咖啡 —— 这会让我更有动力持续优化配色、支持更多语言。
👈 点击展开赞助方式
赞助费用将用于主题维护、新语言适配与配色优化。感谢每一份心意 ❤️
⬆ 返回顶部
English
🌙 Moongate Theme
From blog to editor, let your code rest in moonlight
Moongate is a VS Code theme born from moongate.top, bringing the same visual language into your code editor.
v2.4.0 Code Refinement & Language Expansion: Language configs deduplicated, Rust language support added, TypeScript built-in objects consistent, build script auto-merges token rules, JSON size reduced by 16%.
📸 Preview
| Language |
Dark |
Light |
| JavaScript |
|
|
| Python |
|
|
| Go |
|
|
| Vue |
|
|
✨ Design Philosophy
- Soft as moonlight: Easy on the eyes
- Clear boundaries: Distinct visual hierarchy
- Day & night: Thoughtfully balanced dark/light themes
- Physical elevation: Sidebars lift, popups float, editor recedes
- Engineering calibration: All colors pass WCAG contrast validation
🎨 Color System
- Primary: Cool lunar blue (dark
#3b82f6 / light #0284c7)
- Background: Night sky
#0f172a / moon white #f9fafb
- Elevation: Four lightness steps (
surfaceGround → surfaceRaised → surfaceFloating → surfaceTooltip)
- Design tokens: DTCG‑based, auto‑generates CSS variables for cross‑platform reuse
🧠 Core Optimizations
| Optimization |
How Moongate Fixes It |
| Day‑Night Consistency |
Same hue, different lightness – seamless switching |
| Function Def/Call Separation |
Definitions bold, calls not – unified across Go, Python, JS, TS |
| JSON Nesting Depth |
Blue → Cyan → Purple gradient – levels at a glance |
| UI Physical Depth |
Elevation system – natural "paper stack" effect |
| Design System Unity |
DTCG tokens – one color language across all products |
✨ v2.4.0 Highlights
- 🧹 Language configs deduplicated: Removed rules duplicating
base.yaml across all language files — Rust down 63%, Python 56%, CSS 50%, significantly reducing maintenance overhead
- 🦀 Rust language support added: New
rust.yaml configuration covering generic parameters, lifetimes, attributes, macros, and more — function definitions and calls unified as bold
- 🎯 TypeScript built‑in objects consistent: Fixed unexpected
JSON bolding — all built‑ins (console, Math, JSON) now share a consistent visual style
- 📦 Build script optimized: Auto‑merges token rules with identical colors —
tokenColors reduced from 89 to 34 rules (62% decrease), JSON size reduced by 16%
📜 View full changelog
📐 Design System
Moongate is built on the DTCG design token standard, providing complete color, layout, typography, breakpoint, and z-index tokens.
👉 View full documentation
⚙️ Recommended Setup
Semantic Highlighting
After installing Moongate, semantic highlighting is automatically enabled – no manual setup required. If you encounter issues, verify:
{
"editor.semanticHighlighting.enabled": true
}
Merge extras/better-comments.json into better-comments.tags in your VS Code settings.
☕ Support This Theme
If Moongate Theme makes your coding time more enjoyable, consider buying me a coffee — it motivates me to keep refining the color palette, supporting more languages, and maintaining the theme long-term.
👈 Click to reveal sponsorship options
Sponsorship funds will go toward theme maintenance, new language support, and color optimization. Thank you for your kindness ❤️
⬆ Back to top
探索不息，编码不止 | Explore endlessly, code without ceasing
© 2026 MOONGATE
