如何在VS Code深色模式下使用light-css进行Markdown预览？

直接修改官方的markdown.css容易被VS Code更新覆盖，且全量复制light样式会导致样式冲突，推荐用自定义CSS的方式实现，步骤如下：

1. 安装自定义CSS扩展 #

在VS Code中安装「Custom CSS and JS Loader」扩展，用于加载自定义样式文件。

2. 创建自定义样式文件 #

新建一个CSS文件（比如custom-markdown-light-dark.css），写入以下核心样式，覆盖深色模式下Markdown预览的关键样式：

/* 强制深色模式下的Markdown预览使用Light主题样式 */
body.vscode-dark .markdown-preview-view {
  background-color: #ffffff !important;
  color: #1e1e1e !important;
}

body.vscode-dark .markdown-preview-view a {
  color: #007acc !important;
}

body.vscode-dark .markdown-preview-view h1,
body.vscode-dark .markdown-preview-view h2,
body.vscode-dark .markdown-preview-view h3,
body.vscode-dark .markdown-preview-view h4,
body.vscode-dark .markdown-preview-view h5,
body.vscode-dark .markdown-preview-view h6 {
  color: #1e1e1e !important;
  border-bottom-color: #e0e0e0 !important;
}

body.vscode-dark .markdown-preview-view code {
  background-color: #f5f5f5 !important;
  color: #d73a49 !important;
}

body.vscode-dark .markdown-preview-view pre {
  background-color: #f5f5f5 !important;
}

body.vscode-dark .markdown-preview-view blockquote {
  border-left-color: #007acc !important;
  color: #6a737d !important;
}

3. 配置VS Code加载自定义CSS #

打开VS Code设置（快捷键Ctrl+,），添加以下配置：

"vscode_custom_css.imports": [
  "file:///你的自定义CSS文件绝对路径"
],
"vscode_custom_css.policy": true

注意替换路径为你实际的文件路径，比如file:///C:/Users/xxx/Documents/custom-markdown-light-dark.css。

4. 生效自定义样式 #

重启VS Code，按下Ctrl+Shift+P打开命令面板，执行「Reload Custom CSS and JS」命令，完成后深色模式下的Markdown预览就会使用Light主题的样式了。

说明 #

官方markdown.css中，深色模式的样式通过body.vscode-dark类隔离，直接复制light样式会因选择器优先级问题失效。用body.vscode-dark .markdown-preview-view作为前缀，配合!important强制覆盖原有样式，只替换核心的背景、文字、标题等颜色，既能实现需求，又避免全量复制带来的冗余问题。

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