Skip to content

Update default dark and light themes to Modern For better styling #317911

Open
DevFlex-AI wants to merge 1 commit into
microsoft:mainfrom
DevFlex-AI:main
Open

Update default dark and light themes to Modern For better styling #317911
DevFlex-AI wants to merge 1 commit into
microsoft:mainfrom
DevFlex-AI:main

Conversation

@DevFlex-AI
Copy link
Copy Markdown

Description of the Proposed Changes

This PR updates the core theme fallback constants and the initial render splash colors to align with the Dark Modern and Light Modern themes.
While the "Modern" themes have successfully become the standard visual identity for VS Code, the underlying workbenchThemeService.ts still relied on legacy theme defaults (Dark 2026 / Light 2026) for its internal fallback states and initial color maps.
By updating these constants, this PR ensures a perfectly cohesive experience in two key areas:

  1. Fallback & System Detection: When a user's theme settings are missing, reset, or when relying on system color scheme detection, the editor will now correctly default to the current standard (Dark/Light Modern) rather than older iterations.
  2. Splash Screen / Initial Render: The COLOR_THEME_DARK_INITIAL_COLORS and COLOR_THEME_LIGHT_INITIAL_COLORS maps have been carefully synchronized with their respective dark_modern.json and light_modern.json counterparts. This guarantees that the pre-load splash screen perfectly matches the final editor UI, eliminating visual jank or color flashing during startup.
    Specific changes made:
  • Updated ThemeSettingDefaults.COLOR_THEME_DARK to 'Dark Modern'
  • Updated ThemeSettingDefaults.COLOR_THEME_LIGHT to 'Light Modern'
  • Cleaned up and synchronized COLOR_THEME_DARK_INITIAL_COLORS to exactly match Dark Modern tokens.
  • Cleaned up and synchronized COLOR_THEME_LIGHT_INITIAL_COLORS to exactly match Light Modern tokens.

How to Test

  1. Build and run VS Code from source (yarn watch -> ./scripts/code.sh).
  2. Verify that on a fresh profile (or by clearing your workbench.colorTheme setting), the editor defaults to the Modern themes.
  3. Observe the initial startup sequence to verify that the splash background and initial structural elements perfectly match the final loaded Modern theme without any color flashing.
  4. Toggle window.autoDetectColorScheme to true and verify it switches between Dark Modern and Light Modern gracefully.

Copilot AI review requested due to automatic review settings May 22, 2026 02:54
@DevFlex-AI
Copy link
Copy Markdown
Author

@microsoft-github-policy-service agree

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the default workbench theme names and adjusts the initial color token values for the built-in dark/light themes to align with the “Modern” variants.

Changes:

  • Renamed the default theme setting values from “Dark/Light 2026” to “Dark/Light Modern”.
  • Tweaked several default color tokens (adding status bar hover tokens, adjusting button/tab tokens, removing some explicit defaults).

Comment on lines +83 to +88
'button.border': '#ffffff1a',
'button.foreground': '#FFFFFF',
'button.hoverBackground': '#026EC1',
'button.secondaryBackground': '#313131',
'button.secondaryBackground': '#00000000',
'button.secondaryForeground': '#CCCCCC',
'button.secondaryHoverBackground': '#3C3C3C',
'button.secondaryHoverBackground': '#2B2B2B',
Comment on lines +42 to +43
export const COLOR_THEME_DARK = 'Dark Modern';
export const COLOR_THEME_LIGHT = 'Light Modern';
@DevFlex-AI
Copy link
Copy Markdown
Author

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Updates the default workbench theme names and adjusts the initial color token values for the built-in dark/light themes to align with the “Modern” variants.

Changes:

* Renamed the default theme setting values from “Dark/Light 2026” to “Dark/Light Modern”.

* Tweaked several default color tokens (adding status bar hover tokens, adjusting button/tab tokens, removing some explicit defaults).

I fixed some problem please review

@DevFlex-AI DevFlex-AI requested a review from Copilot May 22, 2026 03:04
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 3 comments.

Comment on lines +166 to +167
'statusBarItem.hoverBackground': '#F1F1F133',
'statusBarItem.hoverForeground': '#FFFFFF',
Comment on lines +305 to +306
'statusBarItem.hoverBackground': '#1F1F1F11',
'statusBarItem.hoverForeground': '#000000',
'button.foreground': '#FFFFFF',
'button.hoverBackground': '#026EC1',
'button.secondaryBackground': '#313131',
'button.secondaryBackground': '#00000000',
@DevFlex-AI
Copy link
Copy Markdown
Author

I am fixing these

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 2 comments.

Comment on lines 126 to 129
'menu.background': '#1F1F1F',
'menu.border': '#454545',
'menu.foreground': '#CCCCCC',
'menu.selectionBackground': '#0078d4',
'menu.separatorBackground': '#454545',
'menu.selectionBackground': '#0078D4',
'notificationCenterHeader.background': '#1F1F1F',
'notificationCenterHeader.foreground': '#CCCCCC',
Comment on lines 175 to 179
'tab.hoverBackground': '#1F1F1F',
'tab.inactiveBackground': '#181818',
'tab.inactiveForeground': '#9D9D9D',
'tab.lastPinnedBorder': '#ccc3',
'tab.selectedBackground': '#222222',
'tab.selectedBorderTop': '#6caddf',
'tab.selectedForeground': '#ffffffa0',
'tab.selectedBorderTop': '#6CADDF',
'tab.unfocusedActiveBorder': '#1F1F1F',
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants