fix: unbordered themes for Modern UI (#900)

CHANGELOG.md

@@ -1,4 +1,8 @@
 # CHANGELOG
+
+## 3.20.4 | 2026.10.28
+- Make One Dark Pro themes unbordered for Modern UI (borders match each theme's editor background) #900
+
 ## 3.20.3 | 2026.10.07
 - Use a readable linked editing highlight instead of VS Code's default red #769
 - Color C++ word operators (`and`, `or`, `not`, ...) like other keyword operators #867

package.json

@@ -2,7 +2,7 @@
   "name": "material-theme",
   "displayName": "One Dark Pro",
   "description": "Atom's iconic One Dark theme for Visual Studio Code",
-  "version": "3.20.3",
+  "version": "3.20.4",
   "publisher": "zhuangtongfa",
   "license": "MIT",
   "bugs": {

src/themes/data/modernUiTokens.ts

@@ -114,6 +114,46 @@ function createModernUiTokens(colors: ThemeColors): ThemeColors {
   }
 }
 
+/**
+ * Ayu-style unbordered chrome: paint panel/sidebar/tab/shell strokes with the
+ * theme's editor background so Modern UI islands and classic chrome sit flush.
+ * Uses editor.background (matches Flat/Night Flat shell; for standard/darker/mix
+ * it is the main editor surface — same approach as the local Flat demo).
+ */
+function createUnborderedTokens(colors: ThemeColors): ThemeColors {
+  const flatBg = colors['editor.background']
+  return {
+    'activityBar.border': flatBg,
+    'sideBar.border': flatBg,
+    'sideBarSectionHeader.border': flatBg,
+    'sideBarStickyScroll.border': flatBg,
+    'editorGroup.border': flatBg,
+    'editorGroupHeader.tabsBorder': flatBg,
+    'editorStickyScroll.border': flatBg,
+    'tab.border': flatBg,
+    'panel.border': flatBg,
+    'panelInput.border': flatBg,
+    'statusBar.border': flatBg,
+    'titleBar.border': flatBg,
+    'terminal.border': flatBg,
+    'terminalStickyScroll.border': flatBg,
+    'multiDiffEditor.border': flatBg,
+    'agentsPanel.border': flatBg,
+    'agentsChatInput.border': flatBg,
+    'agentsNewSessionButton.border': flatBg,
+    'modernPanel.border': flatBg,
+    'modernActivityBar.border': flatBg,
+    'modernActivityBar.background': flatBg,
+    'modernActivityBar.inactiveBackground': flatBg,
+    'surface.border': flatBg,
+    'surface.background': flatBg,
+    'editor.border': flatBg,
+    'modernUI.shellBackground': flatBg,
+    'modernUI.inactiveShellBackground': flatBg,
+    'widget.border': flatBg,
+  }
+}
+
 export function withModernUiTokens<T extends ThemeColors>(colors: T) {
   const additions: ThemeColors = {}
   const modernUiTokens = createModernUiTokens(colors)
@@ -124,8 +164,15 @@ export function withModernUiTokens<T extends ThemeColors>(colors: T) {
     }
   }
 
-  return {
+  const merged = {
     ...colors,
     ...additions,
   }
+
+  // Unbordered overrides always win so classic borders and modernUi-derived
+  // strokes (panel.border, editorGroup.border, etc.) become flush.
+  return {
+    ...merged,
+    ...createUnborderedTokens(merged),
+  }
 }

themes/OneDark-Pro-darker.json

@@ -2148,7 +2148,7 @@
     "editorCursor.foreground": "#528bff",
     "editorError.foreground": "#c24038",
     "editorGroup.emptyBackground": "#23272e",
-    "editorGroup.border": "#181a1f",
+    "editorGroup.border": "#23272e",
     "editorGroupHeader.tabsBackground": "#1e2227",
     "editorGutter.addedBackground": "#109868",
     "editorGutter.deletedBackground": "#9A353D",
@@ -2193,7 +2193,7 @@
     "minimapGutter.deletedBackground": "#9A353D",
     "minimapGutter.modifiedBackground": "#948B60",
     "multiDiffEditor.headerBackground": "#21252b",
-    "panel.border": "#3e4452",
+    "panel.border": "#23272e",
     "panelSectionHeader.background": "#1e2227",
     "peekViewEditor.background": "#1b1d23",
     "peekViewEditor.matchHighlightBackground": "#29244b",
@@ -2219,7 +2219,7 @@
     "tab.activeBackground": "#23272e",
     "tab.activeBorder": "#b4b4b4",
     "tab.activeForeground": "#dcdcdc",
-    "tab.border": "#181a1f",
+    "tab.border": "#23272e",
     "tab.hoverBackground": "#323842",
     "tab.inactiveBackground": "#1e2227",
     "tab.unfocusedHoverBackground": "#323842",
@@ -2240,7 +2240,7 @@
     "terminal.ansiWhite": "#d7dae0",
     "terminal.ansiYellow": "#d18f52",
     "terminal.background": "#23272e",
-    "terminal.border": "#3e4452",
+    "terminal.border": "#23272e",
     "terminal.foreground": "#abb2bf",
     "terminal.selectionBackground": "#abb2bf30",
     "textBlockQuote.background": "#2e3440",
@@ -2290,32 +2290,32 @@
     "agentsBadge.background": "#4d78cc",
     "agentsBadge.foreground": "#f8fafd",
     "agentsChatInput.background": "#1d1f23",
-    "agentsChatInput.border": "#181a1f",
+    "agentsChatInput.border": "#23272e",
     "agentsChatInput.focusBorder": "#61afef",
     "agentsChatInput.foreground": "#abb2bf",
     "agentsChatInput.placeholderForeground": "#6b717d",
     "agentsGradient.tintColor": "#4d78cc",
     "agentsNewSessionButton.background": "#ff000000",
-    "agentsNewSessionButton.border": "#181a1f",
+    "agentsNewSessionButton.border": "#23272e",
     "agentsNewSessionButton.foreground": "#abb2bf",
     "agentsNewSessionButton.hoverBackground": "#2c313a",
     "agentsPanel.background": "#1e2227",
-    "agentsPanel.border": "#3e4452",
+    "agentsPanel.border": "#23272e",
     "agentsPanel.foreground": "#abb2bf",
     "agentsUnreadBadge.background": "#4d78cc",
     "agentsUnreadBadge.foreground": "#f8fafd",
     "editorStickyScroll.background": "#23272e",
-    "editorStickyScroll.border": "#181a1f",
+    "editorStickyScroll.border": "#23272e",
     "editorStickyScroll.shadow": "#23252c",
     "editorStickyScrollGutter.background": "#23272e",
     "editorStickyScrollHover.background": "#2c313c",
     "peekViewEditorStickyScroll.background": "#1b1d23",
     "peekViewEditorStickyScrollGutter.background": "#1b1d23",
     "sideBarStickyScroll.background": "#1e2227",
-    "sideBarStickyScroll.border": "#3e4452",
+    "sideBarStickyScroll.border": "#23272e",
     "sideBarStickyScroll.shadow": "#23252c",
     "terminalStickyScroll.background": "#23272e",
-    "terminalStickyScroll.border": "#3e4452",
+    "terminalStickyScroll.border": "#23272e",
     "terminalStickyScrollHover.background": "#2c313c",
     "git.blame.editorDecorationForeground": "#636b78",
     "scmGraph.foreground1": "#d18f52",
@@ -2332,6 +2332,23 @@
     "scmGraph.historyItemRefColor": "#4aa5f0",
     "scmGraph.historyItemRemoteRefColor": "#c162de",
     "multiDiffEditor.background": "#23272e",
-    "multiDiffEditor.border": "#3e4452"
+    "multiDiffEditor.border": "#23272e",
+    "activityBar.border": "#23272e",
+    "sideBar.border": "#23272e",
+    "sideBarSectionHeader.border": "#23272e",
+    "editorGroupHeader.tabsBorder": "#23272e",
+    "panelInput.border": "#23272e",
+    "statusBar.border": "#23272e",
+    "titleBar.border": "#23272e",
+    "modernPanel.border": "#23272e",
+    "modernActivityBar.border": "#23272e",
+    "modernActivityBar.background": "#23272e",
+    "modernActivityBar.inactiveBackground": "#23272e",
+    "surface.border": "#23272e",
+    "surface.background": "#23272e",
+    "editor.border": "#23272e",
+    "modernUI.shellBackground": "#23272e",
+    "modernUI.inactiveShellBackground": "#23272e",
+    "widget.border": "#23272e"
   }
 }

themes/OneDark-Pro-flat.json

@@ -2192,7 +2192,7 @@
     "editorCursor.background": "#ffffffc9",
     "editorCursor.foreground": "#f0f0f0",
     "editorError.foreground": "#c24038",
-    "editorGroup.border": "#23252c",
+    "editorGroup.border": "#282c34",
     "editorGroup.emptyBackground": "#282c34",
     "editorGroupHeader.tabsBackground": "#282c34",
     "editorGutter.addedBackground": "#109868",
@@ -2246,8 +2246,8 @@
     "notificationLink.foreground": "#f0f0f0",
     "notifications.foreground": "#969aa4",
     "panel.background": "#282c34",
-    "panel.border": "#3e4452",
-    "panelInput.border": "#23252c",
+    "panel.border": "#282c34",
+    "panelInput.border": "#282c34",
     "panelSection.dropBackground": "#323842a8",
     "panelSectionHeader.background": "#21252b",
     "panelTitle.activeBorder": "#f0f0f0",
@@ -2264,7 +2264,7 @@
     "settings.focusedRowBackground": "#282c34",
     "settings.headerForeground": "#fff",
     "sideBar.background": "#282c34",
-    "sideBar.border": "#23252c",
+    "sideBar.border": "#282c34",
     "sideBar.dropBackground": "#323842a8",
     "sideBar.foreground": "#969aa4",
     "sideBarSectionHeader.background": "#282c34",
@@ -2305,7 +2305,7 @@
     "terminal.ansiWhite": "#d7dae0",
     "terminal.ansiYellow": "#d18f52",
     "terminal.background": "#282c34",
-    "terminal.border": "#3e4452",
+    "terminal.border": "#282c34",
     "terminal.foreground": "#abb2bf",
     "terminal.selectionBackground": "#abb2bf30",
     "textBlockQuote.background": "#2e3440",
@@ -2357,32 +2357,32 @@
     "agentsBadge.background": "#21252b",
     "agentsBadge.foreground": "#f8fafd",
     "agentsChatInput.background": "#21252b",
-    "agentsChatInput.border": "#23252c",
+    "agentsChatInput.border": "#282c34",
     "agentsChatInput.focusBorder": "#61afef",
     "agentsChatInput.foreground": "#abb2bf",
     "agentsChatInput.placeholderForeground": "#6b717d",
     "agentsGradient.tintColor": "#21252b",
     "agentsNewSessionButton.background": "#ff000000",
-    "agentsNewSessionButton.border": "#23252c",
+    "agentsNewSessionButton.border": "#282c34",
     "agentsNewSessionButton.foreground": "#abb2bf",
     "agentsNewSessionButton.hoverBackground": "#2c313a",
     "agentsPanel.background": "#282c34",
-    "agentsPanel.border": "#3e4452",
+    "agentsPanel.border": "#282c34",
     "agentsPanel.foreground": "#969aa4",
     "agentsUnreadBadge.background": "#21252b",
     "agentsUnreadBadge.foreground": "#f8fafd",
     "editorStickyScroll.background": "#282c34",
-    "editorStickyScroll.border": "#23252c",
+    "editorStickyScroll.border": "#282c34",
     "editorStickyScroll.shadow": "#282c34",
     "editorStickyScrollGutter.background": "#282c34",
     "editorStickyScrollHover.background": "#2c313c",
     "peekViewEditorStickyScroll.background": "#1b1d23",
     "peekViewEditorStickyScrollGutter.background": "#1b1d23",
     "sideBarStickyScroll.background": "#282c34",
-    "sideBarStickyScroll.border": "#3e4452",
+    "sideBarStickyScroll.border": "#282c34",
     "sideBarStickyScroll.shadow": "#282c34",
     "terminalStickyScroll.background": "#282c34",
-    "terminalStickyScroll.border": "#3e4452",
+    "terminalStickyScroll.border": "#282c34",
     "terminalStickyScrollHover.background": "#2c313c",
     "git.blame.editorDecorationForeground": "#636b78",
     "scmGraph.foreground1": "#d18f52",
@@ -2399,6 +2399,20 @@
     "scmGraph.historyItemRefColor": "#4aa5f0",
     "scmGraph.historyItemRemoteRefColor": "#c162de",
     "multiDiffEditor.background": "#282c34",
-    "multiDiffEditor.border": "#3e4452"
+    "multiDiffEditor.border": "#282c34",
+    "activityBar.border": "#282c34",
+    "sideBarSectionHeader.border": "#282c34",
+    "editorGroupHeader.tabsBorder": "#282c34",
+    "titleBar.border": "#282c34",
+    "modernPanel.border": "#282c34",
+    "modernActivityBar.border": "#282c34",
+    "modernActivityBar.background": "#282c34",
+    "modernActivityBar.inactiveBackground": "#282c34",
+    "surface.border": "#282c34",
+    "surface.background": "#282c34",
+    "editor.border": "#282c34",
+    "modernUI.shellBackground": "#282c34",
+    "modernUI.inactiveShellBackground": "#282c34",
+    "widget.border": "#282c34"
   }
 }