更新记录

1.0.0（2026-05-30） 下载此版本

HBuilder X 深色主题配色（仿 VS Code 深色主题）

HBuilder X 实际上是直接在用户配置里覆盖主题，所以该插件只是个配置文件，还是需要自行替换配置。

主要是我也不知道该怎么上传主题配置文件，就只能借着插件的名义上传一下了

方式一

打开 工具 - 设置 - 源码试图 右侧的 用户设置，直接替换下面这部分内容即可：

 "editor.colorScheme": "Monokai",
 "workbench.colorCustomizations": {
    "[Monokai]": {
      "button.background": "#0E639C",
      "button.hoverBackground": "#1177BB",
      "console.background": "#181818",
      "editor.background": "#1E1E1E",
      "editor.caretLine": "#242424",
      "editor.foldMarker.collapsed.background": "#C5C5C5",
      "editor.foldMarker.expanded.foreground": "#C5C5C5",
      "editor.foreground": "#D4D4D4",
      "editor.indicator.matchtag": "#ffffff",
      "editor.linenumber": "#6E7681",
      "editor.selection": "#264F78",
      "editor.unactive_selection.background": "#3A3D41",
      "editor.whitespace": "#222222",
      "editorGroup.border": "#2B2B2B",
      "editorGroupHeader.tabsBackground": "#181818",
      "editorSuggestWidget.background": "#252526",
      "editorSuggestWidget.border": "#3C3C3C",
      "editorSuggestWidget.selectedBackground": "#04395E",
      "focusBorder": "#0078D4",
      "imageview.background": "#1E1E1E",
      "imageview.foreground": "#CCCCCC",
      "input.background": "#313131",
      "input.border": "#3C3C3C",
      "input.foreground": "#CCCCCC",
      "list.activeSelectionBackground": "#04395E",
      "list.foreground": "#CCCCCC",
      "list.highlightForeground": "#FFFFFF",
      "list.hoverBackground": "#2A2D2E",
      "minimap.handle.background": "#5A5A5A",
      "notifications.background": "#252526",
      "notifications.border": "#3C3C3C",
      "notifications.foreground": "#CCCCCC",
      "scrollbarSlider.background": "#4C4C4C",
      "scrollbarSlider.hoverBackground": "#6B6B6B",
      "settings.dropdownBackground": "#313131",
      "settings.dropdownBorder": "#3C3C3C",
      "settings.dropdownForeground": "#CCCCCC",
      "settings.textInputBackground": "#313131",
      "settings.textInputBorder": "#3C3C3C",
      "sideBar.background": "#181818",
      "sideBar.border": "#2B2B2B",
      "statusBar.background": "#181818",
      "statusBar.foreground": "#CCCCCC",
      "tab.activeBackground": "#1E1E1E",
      "tab.activeBorder": "#0078D4",
      "tab.border": "#2B2B2B",
      "tab.hoverBackground": "#2A2D2E",
      "tab.inactiveBackground": "#181818",
      "tab.inactiveForeground": "#9D9D9D",
      "terminal.background": "#181818",
      "titleBar.activeBackground": "#181818",
      "titleBar.activeForeground": "#CCCCCC",
      "toolBar.background": "#181818",
      "toolBar.border": "#2B2B2B",
      "toolBar.hoverBackground": "#2A2D2E"
    }
}

方式二

也可下载插件后直接将 /uni_modules/l-theme/pages/theme.json 内容替换到 工具 - 设置 - 源码试图 右侧的 用户设置 内，即可生效。

注意: 此方法会覆盖你的其他设置，建议使用 方式一。如果确实要用 方式二，请先另存一份之前的配置文件.

平台兼容性

uni-app(3.7.8)

uni-app x(3.7.8)

l-theme

开发文档

HBuilder X 实际上是直接在用户配置里覆盖主题，所以该插件只是个配置文件，还是需要自行替换配置