microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-05-31 00:10:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix chat input border colors and animation duration (#311933)

Browse Source 
* fix: update chat input working border colors for improved visibility

* fix: reduce animation duration for chat send button and adjust border color brightness

Co-authored-by: Copilot <copilot@github.com>

---------

Co-authored-by: mrleemurray <mrleemurray@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Lee Murray
2026-04-22 18:17:59 +01:00
committed by GitHub
parent b2ffe3f008
commit 3cf9be6318
4 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
extensions/theme-defaults/themes/2026-dark.json
View File

@@ -258,9 +258,9 @@
"gauge.errorBackground": "#F287724D",
"chat.requestBubbleBackground": "#ffffff13",
"chat.requestBubbleHoverBackground": "#ffffff22",
"chat.inputWorkingBorderColor1": "#E8E8EC",
"chat.inputWorkingBorderColor2": "#8A8A92",
"chat.inputWorkingBorderColor3": "#3A3A40",
"chat.inputWorkingBorderColor1": "#297AA0",
"chat.inputWorkingBorderColor2": "#1C546F",
"chat.inputWorkingBorderColor3": "#5BA8CC",
"editorCommentsWidget.rangeBackground": "#488FAE26",
"editorCommentsWidget.rangeActiveBackground": "#488FAE46",
"charts.foreground": "#CCCCCC",

6
extensions/theme-defaults/themes/2026-light.json
View File

@@ -261,9 +261,9 @@
"chat.requestBubbleBackground": "#EEF4FB",
"chat.requestBubbleHoverBackground": "#E6EDFA",
"chat.thinkingShimmer": "#999999",
"chat.inputWorkingBorderColor1": "#B8B8C0",
"chat.inputWorkingBorderColor2": "#7A7A82",
"chat.inputWorkingBorderColor3": "#2E2E34",
"chat.inputWorkingBorderColor1": "#0069CC",
"chat.inputWorkingBorderColor2": "#004A99",
"chat.inputWorkingBorderColor3": "#3399E6",
"editorCommentsWidget.rangeBackground": "#EEF4FB",
"editorCommentsWidget.rangeActiveBackground": "#E6EDFA",
"charts.foreground": "#202020",

4
src/vs/sessions/contrib/chat/browser/media/chatInput.css
View File

@@ -320,7 +320,7 @@
color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor3) 60%, var(--vscode-input-background)) 200deg,
color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor1) 60%, var(--vscode-input-background)) 360deg);
color: var(--vscode-button-foreground);
animation: chat-send-button-spin 18s linear infinite;
animation: chat-send-button-spin 8s linear infinite;
transition: box-shadow 120ms ease;
}
@@ -389,7 +389,7 @@
color-mix(in srgb, var(--vscode-chat-inputWorkingBorderColor1) 60%, var(--vscode-input-background)) 360deg) !important;
color: var(--vscode-button-foreground) !important;
border-radius: 5px;
animation: chat-send-button-spin 18s linear infinite;
animation: chat-send-button-spin 8s linear infinite;
transition: box-shadow 120ms ease;
/* Lift the label above the click pulse `::after` on the action-item parent
so the pulse appears to expand from behind the button, not on top of it. */

8
src/vs/workbench/contrib/chat/common/widget/chatColors.ts
View File

@@ -6,6 +6,8 @@
import { Color, RGBA } from '../../../../../base/common/color.js';
import { localize } from '../../../../../nls.js';
import { badgeBackground, badgeForeground, contrastBorder, editorBackground, editorSelectionBackground, editorWidgetBackground, foreground, registerColor, transparent } from '../../../../../platform/theme/common/colorRegistry.js';
import { buttonBackground } from '../../../../../platform/theme/common/colors/inputColors.js';
import { darken, lighten } from '../../../../../platform/theme/common/colorUtils.js';
// This color intentionally matches commandCenter.background but is separate so that it
// doesn't get overridden when debugging (the debug toolbar overrides commandCenter.background).
@@ -90,15 +92,15 @@ export const chatThinkingShimmer = registerColor(
export const chatInputWorkingBorderColor1 = registerColor(
'chat.inputWorkingBorderColor1',
{ dark: '#B8B8C0', light: '#5A5A62', hcDark: '#FFFFFF', hcLight: '#000000' },
{ dark: buttonBackground, light: buttonBackground, hcDark: '#FFFFFF', hcLight: '#000000' },
localize('chat.inputWorkingBorderColor1', 'First color stop of the animated chat input border shown while a request is in flight.'), true);
export const chatInputWorkingBorderColor2 = registerColor(
'chat.inputWorkingBorderColor2',
{ dark: '#8A8A92', light: '#7A7A82', hcDark: '#A0A0A0', hcLight: '#555555' },
{ dark: darken(buttonBackground, 0.5), light: darken(buttonBackground, 0.3), hcDark: '#A0A0A0', hcLight: '#555555' },
localize('chat.inputWorkingBorderColor2', 'Secondary accent color used by other animated chat input affordances. Not used by the in-flight chat input border.'), true);
export const chatInputWorkingBorderColor3 = registerColor(
'chat.inputWorkingBorderColor3',
{ dark: '#3A3A40', light: '#2E2E34', hcDark: '#000000', hcLight: '#000000' },
{ dark: lighten(buttonBackground, 0.5), light: lighten(buttonBackground, 0.3), hcDark: '#000000', hcLight: '#000000' },
localize('chat.inputWorkingBorderColor3', 'Tertiary accent color used by other animated chat input affordances. Not used by the in-flight chat input border.'), true);