VSCode如何安装One Dark Pro主题_热门主题安装与切换

8次阅读

One Dark Pro主题需先安装再启用,否则无效;必须从扩展市场认准binaryify作者安装,用Ctrl+K Ctrl+T启用,并单独配置One Dark Pro Icons图标主题及Fira Code字体和行高。

one dark pro 主题能直接装、立刻用,但**装完不启用=白装**,这是 90% 新手卡住的第一步。

安装扩展:认准作者 binaryify,别点错“Pro”变体

vscode 自带的主题列表里没有 One Dark Pro,它必须走扩展市场安装。很多人搜 One Dark ThemeOneDark-Pro(带连字符),结果装了非官方版本——语法高亮错乱、侧边栏颜色断层、甚至和插件冲突。

  • 打开 VSCode,按 Ctrl+Shift+Xwindows/linux)或 Cmd+Shift+XmacOS)进入扩展视图
  • 搜索框输入 One Dark Pro(空格不能少,避免匹配到旧版 One Dark
  • 在结果中找作者是 binaryify、下载量超 1500 万、评分 4.9+ 的那个——图标是深蓝底 + 白色原子符号
  • 点击 Install,等右下角提示“已安装”即可

启用主题:快捷键 Ctrl+K Ctrl+T 是最快路径

安装只是把主题“下载到本地”,VSCode 默认仍用 default Dark+。必须手动切换,否则编辑器界面毫无变化。

  • Ctrl+K 松开,再按 Ctrl+T(macosCmd+K Cmd+T),直接呼出主题选择器
  • 滚动列表,找以 One Dark Pro 开头的选项(如 One Dark ProOne Dark Pro VividOne Dark Pro Cobalt
  • 回车确认,界面秒变——注意看状态栏右下角是否显示当前主题名
  • 如果没生效,试试 Ctrl+Shift+P → 输入 Developer: Reload Window 强制重载窗口

补全 atom 风格:图标主题要单独配 One Dark Pro

只换颜色主题,文件资源管理器还是默认图标——圆角方形青蓝图标才是 Atom 味儿的关键。这个图标主题和颜色主题不是一回事,得单独装、单独启。

  • 先确认是否已安装图标扩展:在扩展市场搜 One Dark Pro IconsOne Dark Pro,安装作者同为 binaryify 的那个
  • Ctrl+Shift+P → 输入 Preferences: File Icon Theme → 回车
  • 从列表中选 One Dark Pro(不是 Material Icon Theme 或其他)
  • 侧边栏文件图标会立刻变成深灰底+青蓝高亮的圆角方块,.js、.py、.md 各有专属样式

字体与行高适配:不调就容易眼累

One Dark Pro 在 Atom 里默认配 Fira CodeSource Code Pro,VSCode 若用默认 Consolas,字间距发紧、连字不触发、行距过小,写半小时就眼睛酸。

  • Ctrl+Shift+P → 输入 Preferences: Open Settings (jsON) → 回车
  • {}

    中添加两行(注意逗号):

"editor.fontFamily": "'Fira Code', 'Source Code Pro', 'Consolas', 'monospace'", "editor.lineHeight": 24

保存后代码立刻舒展——尤其适合长函数或嵌套 JSX/html。若没装 Fira Code,系统会自动降级到下一个字体,不影响使用。

最容易被忽略的是图标主题这一步:很多人以为“装了 One Dark Pro 就全好了”,结果侧边栏还是扁平灰色图标,Atom 复刻感直接掉一半。装完颜色主题,顺手再配一次图标主题,5 秒搞定,体验差一个数量级。

text=ZqhQzanResources