VS Code中如何设置.ipynb格式Jupyter Notebook的输出单元格颜色

VS Code当前未提供可视化配置入口，单独调整.ipynb格式文件中输入、输出单元格的独立背景色。所有内置深色主题的输出区块默认与主编辑区背景同色，是造成输入输出边界模糊、辨识度低的核心原因，可通过以下可落地步骤快速实现深灰色输出背景的自定义配置：

前置准备 #

• 在VS Code扩展市场，搜索安装Custom CSS and JS Loader插件

操作流程 #

1. 按下Ctrl+Shift+P调出全局命令面板，输入Preferences: Open User Settings (JSON)，打开全局用户配置文件
2. 在本地非系统敏感目录新建自定义样式文件，后缀为.css，例如命名为jupyter-style.css。在文件内写入以下样式规则，可按需替换括号内的深灰色色值调整实际显示效果：

   /* 自定义Jupyter输出单元格背景为深灰色 */
   .monaco-workbench .notebook.outputContainer {
       background-color: #2a2a2a !important;
       /* 可选添加侧边强化边框，进一步拉高输入输出区块的辨识度 */
       border-left: 2px solid #404040;
       border-radius: 3px;
   }
   

3. 回到用户设置JSON文件，在配置项末尾追加以下内容，将文件路径替换为你刚才新建的CSS文件的实际本地路径：

   "vscode_custom_css.imports": [
       "file:///你的CSS文件完整本地路径"
   ],
   "vscode_custom_css.policy": true
   

4. 再次调出全局命令面板，执行Custom CSS and JS: Enable Custom CSS and JS命令，按照提示重启VS Code即可生效

常见问题说明 #

• 每次VS Code版本更新后，自定义样式可能会因程序文件覆盖失效，只需要再次执行上述启用自定义CSS的操作即可恢复
• 自定义写入的样式优先级高于所有内置、第三方主题的内置规则，不会被其他主题配置覆盖

内容的提问来源于stack exchange，提问作者garej