主题选择与配置

结论

经过研究，当前采用的方案是：

• 使用 Border 主题
• 配合 Style Settings 导入配置
• 再叠加少量自定义 CSS，补齐细节样式

这样更容易复现，也方便后续继续微调。

效果图：

1. 选择主题

选择 Border 主题。

2. 导入 Style Settings 配置

在 Style Settings 的导入功能中，添加或粘贴以下配置，即可复现当前比较满意的主题效果：

{
  "Components@@status-bar-autohide": true,
  "Components@@tab-autohide": false,
  "Components@@Ribbon-autohide": true,
  "Components@@nav-header-autohide": true,
  "Components@@tab-title-bar-autohide": true,
  "Components@@vault-profile-autohide": true,
  "Components@@CTA-BTN-enable": true,
  "Components@@file-names-untrim": false,
  "Components@@folder-font-bold": true,
  "Components@@file-icon-remove": false,
  "Components@@colorful-folder": true,
  "Components@@outline-enhanced": true,
  "Components@@new-tab-btn-select": "new-tab-text-btn-restore",
  "Components@@new-tab-image-select": "new-tab-image-default",
  "Components@@graph-node@@light": "#1F1C1C",
  "Components@@extra-anim-remove": false,
  "Components@@setting-item-title-icon-remove": false,
  "Components@@scrollbar-hide": false,
  "Components@@restored-scrollbars": false,
  "Plugin@@Projects-bg-color": "Projects-bg-color-default",
  "Appearance-light@@accent-color-override-light": true,
  "Appearance-light@@background-mod-left-split-light": "#E8EDF2",
  "Appearance-light@@background-mod-right-split-light": "#F4F2ED",
  "Appearance-light@@background-mod-root-split-light": "#F4F2ED",
  "Appearance-light@@background-underlying-light": "#F4F2ED",
  "Appearance-light@@card-border-radius-light": "12px",
  "Appearance-light@@color-activated-tab-header-light": "#6E4BC2",
  "Appearance-light@@color-to-tab-icon-light": false,
  "Appearance-light@@border-radius-activated-tab-header-light": "6px",
  "Appearance-light@@color-activated-tab-header-underline-light": "#6E4BC2",
  "Appearance-light@@background-activated-tab-header-light": "f4f2ed",
  "Appearance-light@@Active-states-file-explorer-select-light": "activated-file-tab-style-light",
  "Appearance-light@@card-highlight-light": true,
  "Appearance-light@@workspace-divider-transparent-light": false,
  "Editor@@line-hover-indicator": false,
  "Editor@@focus-indicator-list-level": true,
  "Editor@@focus-indicator-codeblock-line-number": false,
  "Editor@@border-focus-mode": false,
  "Editor@@editor-grid-background-pattren": false,
  "Editor@@collapse-icon-restore": false,
  "Editor@@heading-indicator-off": false,
  "Appearance-light@@card-shadow-light": "0 0 0 1px #6E4BC2, 0 0 8px 0 rgba(138,92,245,0.2)",
  "Appearance-light@@card-layout-open-light": true,
  "Appearance-light@@theme-light-style-select": "theme-light-background-adapt",
  "Appearance-light@@accent-light": "#6E4BC2",
  "Editor@@seamless-embeds": false,
  "Editor@@inline-code-background-dark": "none",
  "Editor@@inline-code-normal@@light": "#6B43A3",
  "Editor@@inline-code-background-light": "rgba(107, 67, 163, 0.08)",
  "Appearance-light@@background-primary@@light": "#F4F2ED",
  "Appearance-light@@background-modifier-hover@@light": "#9370DB4D",
  "Appearance-light@@background-secondary@@light": "#E8EDF2",
  "Appearance-light@@background-modifier-border@@light": "#D0CEC7",
  "Appearance-light@@background-modifier-border-hover@@light": "#D0D0D0",
  "Appearance-light@@background-modifier-border-focus@@light": "#C1A8FF",
  "Appearance-light@@mod-left-split-background-select-light": "mod-left-split-background-secondary-light",
  "Appearance-light@@background-underlying-select-light": "background-underlying-primary-light",
  "Editor@@code-background-light": "#2b2b2b",
  "Editor@@code-normal@@light": "#b1babd",
  "Editor@@code-comment@@light": "#808080",
  "Editor@@code-keyword@@light": "#cc7832",
  "Editor@@code-string@@light": "#6a8759",
  "Editor@@code-property@@light": "#b1babd",
  "Editor@@code-function@@light": "#8489C4",
  "Editor@@code-value@@light": "#6897bb",
  "Editor@@code-operator@@light": "#a9b7c6",
  "Editor@@code-punctuation@@light": "#abb2bf",
  "Editor@@code-tag@@light": "#e06c75",
  "Editor@@code-border-light": "1px solid #666666",
  "Editor@@code-background-dark": "#2b2b2b",
  "Editor@@code-border-dark": "1px solid #666666"
}

3. 搭配自定义 CSS

在上面的主题配置基础上，再启用以下 CSS 片段。

兼容 Border 主题的 Mac 风格代码块

文件：snippets/border-mac-codeblock-compat.css

用途：主要用于兼容 Border 主题下的 Mac 风格代码块显示。

让文件夹栏颜色更丰富

文件：snippets/color-file.css

用途：增强文件夹栏的颜色层次，让侧边栏更鲜明。

放大四周图标

文件：snippets/layout.css

用途：让界面四周的图标更大，提升可视性和点击体验。