Skip to content

Fix card colors in customization modal for better theme contrast - #333620

Merged
Hawk Ticehurst (hawkticehurst) merged 3 commits into
mainfrom
agents/fix-customization-modal-card-colors
Aug 31, 2026
Merged

Fix card colors in customization modal for better theme contrast#333620
Hawk Ticehurst (hawkticehurst) merged 3 commits into
mainfrom
agents/fix-customization-modal-card-colors

Conversation

@hawkticehurst

@hawkticehurst Hawk Ticehurst (hawkticehurst) commented Aug 31, 2026

Copy link
Copy Markdown
Member

Fixes #333581

This pull request addresses the issue reported in #333581 regarding insufficient contrast between customization modal cards and their parent container background in certain themes, particularly Solarized Dark.

Changes made:

  • Updated CSS for customization cards to ensure their backgrounds and borders provide adequate separation from the parent container.
  • Applied consistent background and border styles across various card types, including overview, inventory, and settings cards.
  • Verified the changes against the Solarized Dark theme to ensure the intended visual hierarchy is maintained.

These adjustments enhance the visibility of the customization cards, improving user experience across different themes.

ui-diff-20260831-150237 ui-diff-20260831-150341

Copilot AI balanced review requested due to automatic review settings August 31, 2026 19:04

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Pull request overview

Updates customization card styling to improve visual separation across themes.

Changes:

  • Adds tinted card backgrounds based on agent panel colors.
  • Aligns card borders and row separators with agent panel theming.

Reviewed changes

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

File Description
aiCustomizationWelcomePromptLaunchers.css Updates welcome and migration card colors.
aiCustomizationManagement.css Updates inventory and marketplace card styling.
agentGlobalConfigurationSettings.css Updates settings cards and row separators.

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Prefer the widget border when a theme defines one, while retaining the agent panel border fallback for themes without it.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions

github-actions Bot commented Aug 31, 2026

Copy link
Copy Markdown
Contributor

Screenshot Changes

Base: 752a80ff Current: 0870143a

Changed (88)

chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabWithItems/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabWithItems/Light
Before After
before after
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabEmpty/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationListWidget/InstructionsTabEmpty/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePage/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePage/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePageNarrow/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/WelcomePageNarrow/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentHostPromptMigration/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentHostPromptMigration/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsSkillsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersSearch/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersSearch/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabActiveSession/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabActiveSession/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersAuthRequired/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersAuthRequired/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerActiveSessionDetail/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerActiveSessionDetail/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsSearch/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsSearch/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsEmptyUser/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsEmptyUser/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/RemoteSkillsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/RemoteSkillsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/HooksEmptyWorkspace/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/HooksEmptyWorkspace/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabNarrow/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabNarrow/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsPluginsTab/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/SessionsPluginsTab/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpBrowseMode/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginBrowseMode/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHome/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHome/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogSearch/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogSearch/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHomeNarrow/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHomeNarrow/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHomeEmptyInstalled/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginCatalogHomeEmptyInstalled/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTabScrolled/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTabScrolled/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabScrolled/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTabNarrow/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabNarrow/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTabNarrow/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemPreview/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemPreview/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemRaw/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/AgentsItemRaw/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemPreview/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemPreview/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemRaw/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/BuiltinSkillItemRaw/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/McpServerDetail/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetail/Light
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetailNarrow/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationManagementEditor/PluginDetailNarrow/Light
Before After
before after
chat/aiCustomizations/aiCustomizationWelcomePages/WelcomePage/Dark
Before After
before after
chat/aiCustomizations/aiCustomizationWelcomePages/WelcomePage/Light
Before After
before after

Accept the CI-rendered blocks-ci hashes for the intended customization card background and border contrast changes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@hawkticehurst
Hawk Ticehurst (hawkticehurst) merged commit bcec367 into main Aug 31, 2026
37 checks passed
@hawkticehurst
Hawk Ticehurst (hawkticehurst) deleted the agents/fix-customization-modal-card-colors branch August 31, 2026 19:59
@vs-code-engineering vs-code-engineering Bot added this to the 1.137.0 milestone Aug 31, 2026
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.

Some themes sort of lose the card layout

3 participants