Update chat avatar styles

This commit is contained in:
David Dossett 2023-10-23 17:10:19 -07:00
parent 2346f95977
commit 2423f43195
No known key found for this signature in database
GPG key ID: 52AE5593859A97F3
4 changed files with 22 additions and 8 deletions

View file

@ -37,6 +37,8 @@
"--vscode-charts-purple",
"--vscode-charts-red",
"--vscode-charts-yellow",
"--vscode-chat-providerAvatarBackground",
"--vscode-chat-providerAvatarForeground",
"--vscode-chat-requestBorder",
"--vscode-chat-slashCommandBackground",
"--vscode-chat-slashCommandForeground",
@ -696,8 +698,6 @@
"--vscode-tree-indentGuidesStroke",
"--vscode-tree-tableColumnsBorder",
"--vscode-tree-tableOddRowsBackground",
"--vscode-voiceRecording-background",
"--vscode-voiceRecording-dimmedBackground",
"--vscode-walkThrough-embeddedEditorBackground",
"--vscode-walkthrough-stepTitle-foreground",
"--vscode-welcomePage-background",
@ -784,4 +784,4 @@
"--z-index-notebook-sticky-scroll",
"--zoom-factor"
]
}
}

View file

@ -351,7 +351,7 @@ export class ChatListItemRenderer extends Disposable implements ITreeRenderer<Ch
avatarImgIcon.src = FileAccess.uriToBrowserUri(element.avatarIconUri).toString(true);
templateData.avatarContainer.replaceChildren(dom.$('.avatar', undefined, avatarImgIcon));
} else {
const defaultIcon = isRequestVM(element) ? Codicon.account : Codicon.hubot;
const defaultIcon = isRequestVM(element) ? Codicon.account : Codicon.copilot;
const avatarIcon = dom.$(ThemeIcon.asCSSSelector(defaultIcon));
templateData.avatarContainer.replaceChildren(dom.$('.avatar.codicon-avatar', undefined, avatarIcon));
}

View file

@ -91,10 +91,11 @@
width: 24px;
height: 24px;
border-radius: 50%;
outline: 1px solid var(--vscode-chat-requestBorder)
}
.interactive-item-container .header .avatar.codicon-avatar {
background: var(--vscode-badge-background);
background: var(--vscode-chat-providerAvatarBackground);
}
.interactive-item-container .header .avatar+.avatar {
@ -108,7 +109,8 @@
}
.interactive-item-container .header .avatar .codicon {
color: var(--vscode-badge-foreground) !important;
color: var(--vscode-chat-providerAvatarForeground);
font-size: 14px;
}
.monaco-list-row:not(.focused) .interactive-item-container:not(:hover) .header .monaco-toolbar,

View file

@ -5,11 +5,11 @@
import { Color, RGBA } from 'vs/base/common/color';
import { localize } from 'vs/nls';
import { badgeBackground, badgeForeground, registerColor } from 'vs/platform/theme/common/colorRegistry';
import { badgeBackground, badgeForeground, contrastBorder, foreground, registerColor } from 'vs/platform/theme/common/colorRegistry';
export const chatRequestBorder = registerColor(
'chat.requestBorder',
{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: null, hcLight: null, },
{ dark: new Color(new RGBA(255, 255, 255, 0.10)), light: new Color(new RGBA(0, 0, 0, 0.10)), hcDark: contrastBorder, hcLight: contrastBorder, },
localize('chat.requestBorder', 'The border color of a chat request.')
);
@ -24,3 +24,15 @@ export const chatSlashCommandForeground = registerColor(
{ dark: badgeForeground, light: badgeForeground, hcDark: Color.black, hcLight: badgeForeground },
localize('chat.slashCommandForeground', 'The foreground color of a chat slash command.')
);
export const chatAvatarBackground = registerColor(
'chat.providerAvatarBackground',
{ dark: '#1f1f1f', light: '#f2f2f2', hcDark: Color.black, hcLight: Color.white, },
localize('chat.avatarBackground', 'The background color of a chat avatar.')
);
export const chatAvatarForeground = registerColor(
'chat.providerAvatarForeground',
{ dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground, },
localize('chat.avatarForeground', 'The foreground color of a chat avatar.')
);