当敦煌壁画遇上 VS Code:我用古风色系开发了编程主题

最近去看了敦煌展、园博园的古刹,觉得配色极佳,于是花了 2 个周末开发了一个 VS Code 主题扩展 Ancient China Theme

欢迎加入技术交流群

灵感溯源

这个主题设计了两个风格,一个是暖色调的 Ancient Temple(古刹),比如砖红和暖金来自寺庙的朱漆门柱与鎏金装饰。

另一个是冷色调的 Mogao Grottoes(莫高窟),以敦煌壁画为灵感,采用冷色调,融入群青、矿物绿等色彩,呈现出洞窟壁画的神秘感。

色彩设计

古刹主题

json 复制代码
"colors": {
  "editor.background": "#2A2826", // 编辑器背景色:暗褐色
  "editor.foreground": "#E8E4D9", // 编辑器前景色:米白色
  "titleBar.activeBackground": "#8B2A1C", // 活动标题栏背景:砖红色
}
  • 砖红色 (#8B2A1C):源自古建筑中常见的红漆柱,象征喜庆与庄重
  • 暗褐色 (#2A2826):模拟古建筑内部木质结构的沉稳色调
  • 金黄色 (#D4AA5A):灵感来自佛像与寺庙装饰的金色元素

莫高窟主题

json 复制代码
"tokenColors": [
  {
    "scope": ["keyword", "storage.type", "storage.modifier"],
    "settings": {
      "foreground": "#4A7DAC" // 蓝色 - 敦煌壁画中常见的群青色
    }
  },
  {
    "scope": ["entity.name.type", "entity.name.class"],
    "settings": {
      "foreground": "#4CAF8F" // 孔雀绿 - 壁画中常见的绿色调
    }
  },
  {
    "scope": ["entity.other.attribute-name"],
    "settings": {
      "foreground": "#E67E54" // 赭石色 - 敦煌壁画常用的红土颜料色
    }
  }
]
  • 群青色 (#4A7DAC):敦煌壁画中常用的矿物颜料,表现天空与水的色彩
  • 孔雀绿 (#4CAF8F):壁画中表现植物与装饰的绿色调
  • 赭石色 (#E67E54):壁画中常见的红土颜料,用于人物肤色与衣饰

开发者友好

平衡设计

其实我还挺喜欢 VS Code 自带的 Quiet Light,很柔和不容易疲劳,所以在设计这两个主题时为了确保长时间编程不会造成视觉疲劳,做了以下考虑,提示词也是改了好几个版本:

  • 背景色选择了柔和的暗色调,减少屏幕亮度对眼睛的刺激
  • 前景色与背景色保持足够的对比度,确保文本清晰可辨
  • 语法高亮色彩区分明显但不过于鲜艳,避免视觉干扰

多语言支持

主题支持多种编程语言,目前包括:

  • JavaScript/TypeScript
  • HTML/CSS
  • Markdown
  • JSON
  • YAML
  • PHP
  • Ruby
  • Go
  • Python
  • Java
  • C++
  • C#
  • Rust

使用体验

古刹主题预览

莫高窟主题预览

使用方法

  • 打开 VS Code
  • 进入扩展市场
  • 搜索 Ancient China Theme
  • 点击安装
  • 通过 Ctrl+K Ctrl+T 或菜单 Code → 首选项 → 颜色主题 选择 Ancient Temple 或 Mogao Grottoes

未来计划

  • 增加浅色系的中国传统元素的主题变体,如青花瓷主题、山水画主题等
  • 优化对更多编程语言的支持
  • 根据用户反馈持续改进色彩方案

欢迎大家体验并给予反馈,也欢迎到 GitHub 仓库 点个 Star 🌟 支持!

总之,这是一次将传统文化元素融入现代技术的创意尝试。如果你也对这方面感兴趣,欢迎一起交流讨论!

相关推荐
To_OC8 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic8 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy9 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志9 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble10 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯11 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜12 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司12 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
kaiking_g12 小时前
vue项目中,静态导入 vs 动态导入 详解
前端·javascript·vue.js
江华森12 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http