Kite Theme WCAG

Name: Kite Theme WCAG
Author: Zhouscar

Publisher: ZhouscarThemes in package: 3

Kite Theme but with higher contrast.

Open in VS Code GitHub

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Kite Theme WCAG — Kite Darker WCAG

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#0A7AFA
activityBar.background#22282F
activityBar.border#2D353E
activityBar.foreground#C7CED6
activityBar.inactiveForeground#586779
activityBarBadge.background#0A7AFA
activityBarBadge.foreground#E4E8EC
badge.background#606871
badge.foreground#E6E8EA
breadcrumb.background#24282E
breadcrumb.focusForeground#C9CED4
breadcrumb.foreground#ACB4BE
button.background#0956AE
button.foreground#E4E8EC
button.hoverBackground#0A7AFA
button.secondaryBackground#464E59
button.secondaryForeground#C7CED6
button.secondaryHoverBackground#5C6875
debugToolBar.background#31353A
debugToolBar.border#494f5536
diffEditor.border#494F55
diffEditor.insertedTextBackground#61AF5534
diffEditor.removedTextBackground#FA3A0A34
dropdown.background#26292C
dropdown.border#464E5970
dropdown.foreground#CBCED2
editor.background#22282F
editor.findMatchBackground#E4E8EC2B
editor.findMatchHighlightBackground#A3702E
editor.foldBackground#0462CD16
editor.foreground#C7CED6
editor.hoverHighlightBackground#424E5C
editor.inactiveSelectionBackground#6E819626
editor.lineHighlightBackground#424e5c80
editor.rangeHighlightBackground#424E5C
editor.selectionBackground#6E819642
editor.selectionHighlightBackground#C7CED62A
editor.selectionHighlightBorder#586779
editor.wordHighlightBackground#494F55
editor.wordHighlightStrongBackground#183454
editorBracketHighlight.foreground1#6EB0FC
editorBracketHighlight.foreground2#FCC16E
editorBracketHighlight.foreground3#7B6FFC
editorBracketHighlight.foreground4#6ECDFC
editorBracketHighlight.foreground5#FCAC6E
editorBracketHighlight.foreground6#CD6EFC
editorBracketHighlight.unexpectedBracket.foreground#FC736E
editorBracketMatch.background#0A7AFA20
editorBracketMatch.border#6E8196
editorCodeLens.foreground#6E8196
editorCursor.background#26292C
editorCursor.foreground#AFB5BB
editorError.foreground#FA3A0A
editorGroup.border#494F55
editorGroupHeader.tabsBackground#24282E
editorGroupHeader.tabsBorder#464E5970
editorGutter.addedBackground#1B770D
editorGutter.background#22282F
editorGutter.deletedBackground#AE2A09
editorGutter.foldingControlForeground#A9B4C1
editorGutter.modifiedBackground#0956AE
editorHoverWidget.background#24282E
editorHoverWidget.border#464e59bb
editorHoverWidget.foreground#ACB4BE
editorIndentGuide.activeBackground#586779
editorIndentGuide.background#38424D
editorInfo.foreground#4696F1
editorLineNumber.activeForeground#C7CED6
editorLineNumber.foreground#586779
editorLink.activeForeground#0ABAFA
editorMarkerNavigation.background#26292C
editorMarkerNavigationError.background#F16846
editorMarkerNavigationInfo.background#6EB0FC
editorMarkerNavigationWarning.background#C8A73C
editorOverviewRuler.background#22282F
editorOverviewRuler.border#60687180
editorRuler.foreground#424E5C
editorSuggestWidget.background#24282E
editorSuggestWidget.border#464E59
editorSuggestWidget.foreground#C9CED4
editorSuggestWidget.highlightForeground#3C95FB
editorSuggestWidget.selectedBackground#183454
editorWarning.foreground#F1A746
editorWhitespace.foreground#6E819626
editorWidget.background#24282E
editorWidget.foreground#C7CED6
editorWidget.resizeBorder#8CB2DE
focusBorder#0A7AFA
foreground#C7CED6
gitDecoration.addedResourceForeground#64D38D
gitDecoration.conflictingResourceForeground#7664D3
gitDecoration.deletedResourceForeground#D36464
gitDecoration.ignoredResourceForeground#949BA4
gitDecoration.modifiedResourceForeground#D3B264
gitDecoration.stageDeletedResourceForeground#C83C3C
gitDecoration.stageModifiedResourceForeground#E6BF84
gitDecoration.submoduleResourceForeground#6498D3
gitDecoration.untrackedResourceForeground#7BE09D
icon.foreground#C7CED6
input.background#26292C
input.foreground#CBCED2
input.placeholderForeground#AFB5BB
inputOption.activeBackground#0A7AFA66
inputOption.activeBorder#f50c0c00
inputOption.activeForeground#E6E8EA
list.activeSelectionBackground#073264
list.activeSelectionForeground#E4E8EC
list.dropBackground#464E59
list.focusBackground#183454
list.highlightForeground#0A7AFA
list.hoverBackground#24282E
list.hoverForeground#E4E8EC
list.inactiveSelectionBackground#24282E
list.inactiveSelectionForeground#E4E8EC
listFilterWidget.background#424E5C
listFilterWidget.noMatchesOutline#FA3A0A
menu.background#24282E
menu.border#464E5970
menu.foreground#C9CED4
menu.selectionBackground#034A9B
menu.selectionForeground#E5E8EB
menu.separatorBackground#464E59
menubar.selectionBackground#5C6875
menubar.selectionForeground#E5E8EB
merge.commonContentBackground#26292C
merge.commonHeaderBackground#494F55
notificationCenter.border#494F552A
notificationCenterHeader.background#333538
notificationCenterHeader.foreground#AFB5BB
notifications.background#26292C
notifications.border#494F552A
notifications.foreground#CBCED2
notificationsErrorIcon.foreground#C8433C
notificationsInfoIcon.foreground#3CA3C8
notificationsWarningIcon.foreground#C8BF3C
notificationToast.border#494F552A
panel.background#24282E
panel.border#464E59
panelTitle.activeBorder#0A7AFA
panelTitle.activeForeground#E6E8EA
panelTitle.inactiveForeground#CBCED2CC
peekView.border#0A7AFA
peekViewEditor.background#223449
peekViewEditor.matchHighlightBackground#c88b3c69
peekViewEditorGutter.background#223449
peekViewResult.background#1A2837
peekViewResult.lineForeground#8C9AAB
peekViewResult.matchHighlightBackground#C88D3C4F
peekViewResult.selectionBackground#183454
peekViewResult.selectionForeground#E4E8EC
peekViewTitleLabel.foreground#E4E8EC
pickerGroup.border#464E59
pickerGroup.foreground#3C95FB
progressBar.background#0A7AFA
scrollbar.shadow#22282F
scrollbarSlider.activeBackground#7381919B
scrollbarSlider.background#464E599B
scrollbarSlider.hoverBackground#5C68759B
selection.background#6E8196
sideBar.background#22282F
sideBar.border#2D353E
sideBar.foreground#C7CED6
sideBarSectionHeader.background#2D353E
sideBarTitle.foreground#ACB4BE
statusBar.background#24282E
statusBar.debuggingBackground#C88B3C
statusBar.debuggingForeground#24282E
statusBar.foreground#ACB4BE
statusBar.noFolderBackground#61237B
statusBar.noFolderForeground#C9CED4
statusBarItem.hoverBackground#464E59BB
statusBarItem.remoteBackground#034A9B
statusBarItem.remoteForeground#E5E8EB
tab.activeBackground#22282F
tab.activeBorder#0A7AFA
tab.activeForeground#E4E8EC
tab.border#22282F
tab.hoverBackground#424E5C
tab.hoverForeground#C7CED6
tab.inactiveBackground#24282E
tab.inactiveForeground#A9B4C1
terminal.ansiBlack#000913
terminal.ansiBlue#3C7dC8
terminal.ansiBrightBlack#606871
terminal.ansiBrightBlue#5097E7
terminal.ansiBrightCyan#46C3F1
terminal.ansiBrightGreen#53EC3C
terminal.ansiBrightMagenta#D165FF
terminal.ansiBrightRed#F14F46
terminal.ansiBrightWhite#E6E8EA
terminal.ansiBrightYellow#f1E646
terminal.ansiCyan#3CA3C8
terminal.ansiGreen#4FC83C
terminal.ansiMagenta#9E3CC8
terminal.ansiRed#C8433C
terminal.ansiWhite#CBCED2
terminal.ansiYellow#C8BF3C
terminal.border#464E59
terminal.foreground#CBCED2
terminal.selectionBackground#78818C80
terminalCursor.background#0462CD
terminalCursor.foreground#E6E8EA
textLink.foreground#3C95FB
titleBar.activeBackground#24282EBB
titleBar.activeForeground#ACB4BE
titleBar.inactiveBackground#24282E
titleBar.inactiveForeground#ACB4bECC
tree.indentGuidesStroke#464E59
widget.shadow#424e5c36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#7c8fa5	italic
punctuation	#a9b4c1	—
punctuation.decorator, meta.brace.round	#c7ced6	—
punctuation.terminator.statement	#8c9aab	—
punctuation.accessor.optional	#ac71f1	—
punctuation.definition.constant	#6eb0fc	—
punctuation.section.embedded	#c87ded	—
string, punctuation.definition.string	#edd37d	—
constant.numeric, keyword.other.unit	#edb97d	—
constant.language, entity.name.tag, keyword, keyword.operator, storage.modifier, storage.type, support.type.primitive	#fc6e86	—
variable.language, fenced_code.block.language	#a9b4c1	italic
variable.parameter, entity.name.variable.parameter, parameter.variable	#c7ced6	italic
meta.function, meta.function-call, meta.definition.function, meta.definition.method, meta.method.declaration, entity.name.function, entity.other.attribute-name, support.function, function.support.builtin, function.support.core, punctuation.definition.entity	#91e684	—
constant.language.boolean.true	#7fe255	bold
constant.language.boolean.false	#ee5e55	bold
constant.language.null	—	bold
support.variable.property	#a9b4c1	—
meta.property-value	#eef4fc	—
constant.character, constant.other, support.constant	#6eb0fc	—
meta.definition.variable, meta.parameters, meta.method.declaration, meta.object.member, variable.other.constant, variable.other.object, entity.name.variable.local	#6eb0fc	—
entity.name.class, entity.name.type, entity.name.class.declaration, entity.name.type.class, entity.other.inherited-class	#c87ded	—
meta.block, meta.class, meta.var.expr, meta.template.expression, meta.function-call.arguments, meta.definition.property, meta.field.declaration, meta.tag.without-attributes, meta.children, entity.name.type.namespace, entity.name.variable, entity.name.section, variable.object.property, variable.other.assignment, variable.other.object.property, variable.other.constant.property, variable.other.readwrite.alias	#c7ced6	—
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, variable.other.property, variable.other.jsdoc	#c7ced6	—
meta.object-literal.key, support.type.property-name	#c7ced6	—
meta.return.type, meta.field.declaration, meta.interface, support.type, support.type.primitive, support.type.property-name, punctuation.support.type.property-name	#7dc8ed	—
entity.other.attribute-name.pseudo-class	—	italic
markup.underline.link	#7ddbed	—
markup.bold	#dfdfe0	bold
markup.italic	#dfdfe0	italic
case-clause.expr, switch-block.expr, switch-statement.expr	#41a1c0	—
token.info-token	#6498d3	—
token.warn-token	#d3b264	—
token.error-token	#db6b6b	—
token.debug-token	#917cef	—
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#6eb0fc	—
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown	#7dc8ed	—
markup.quote.markdown	#edb97d	—
storage.type.cs, entity.name.type.cs	#897ff0	—
keyword.type.cs	#7dc8ed	—
variable.css, variable.scss, variable.less, variable.sass	#6eb0fc	—
support.class.dart, other.source.dart	#fc6e86	—
punctuation.definition.variable.php, variable.other	#c7ced6	—
meta.class.kotlin	#c87ded	—
support.class.kotlin	#7dc8ed	—
variable.other.readwrite.instance.ruby, punctuation.definition.variable.ruby	#6eb0fc	—
constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby	#7dc8ed	—
meta.function.method.with-arguments.ruby	#c7ced6	—
entity.name.type.class.std.rust	#897ff0	—
entity.name.type.rust, entity.name.type.numeric.rust	#6eb0fc	—
meta.indexed-name.python	#91e684	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Kite Theme WCAG — Kite Dark WCAG

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#0A7AFA
activityBar.background#272D35
activityBar.foreground#C7CED6
activityBar.inactiveForeground#586779
activityBarBadge.background#0A7AFA
activityBarBadge.foreground#E4E8EC
badge.background#606871
badge.foreground#E6E8EA
breadcrumb.background#2F353C
breadcrumb.focusForeground#C9CED4
breadcrumb.foreground#ACB4BE
button.background#0956AE
button.foreground#E4E8EC
button.hoverBackground#0A7AFA
button.secondaryBackground#464E59
button.secondaryForeground#C7CED6
button.secondaryHoverBackground#5C6875
debugToolBar.background#31353A
debugToolBar.border#494f5536
diffEditor.border#494F55
diffEditor.insertedTextBackground#61AF5534
diffEditor.removedTextBackground#FA3A0A34
dropdown.background#31353A
dropdown.border#464E5970
dropdown.foreground#CBCED2
editor.background#2D353E
editor.findMatchBackground#E4E8EC2B
editor.findMatchHighlightBackground#A3702E
editor.foldBackground#0462CD16
editor.foreground#C7CED6
editor.hoverHighlightBackground#424E5C
editor.inactiveSelectionBackground#6E819626
editor.lineHighlightBackground#424e5c80
editor.rangeHighlightBackground#424E5C
editor.selectionBackground#6E819642
editor.selectionHighlightBackground#C7CED62A
editor.selectionHighlightBorder#586779
editor.wordHighlightBackground#494F55
editor.wordHighlightStrongBackground#183454
editorBracketHighlight.foreground1#6EB0FC
editorBracketHighlight.foreground2#FCC16E
editorBracketHighlight.foreground3#7B6FFC
editorBracketHighlight.foreground4#6ECDFC
editorBracketHighlight.foreground5#FCAC6E
editorBracketHighlight.foreground6#CD6EFC
editorBracketHighlight.unexpectedBracket.foreground#FC736E
editorBracketMatch.background#0A7AFA20
editorBracketMatch.border#6E8196
editorCodeLens.foreground#6E8196
editorCursor.background#26292C
editorCursor.foreground#AFB5BB
editorError.foreground#FA3A0A
editorGroup.border#494F55
editorGroupHeader.tabsBackground#24282E
editorGroupHeader.tabsBorder#464E5970
editorGutter.addedBackground#1B770D
editorGutter.background#2D353E
editorGutter.deletedBackground#AE2A09
editorGutter.foldingControlForeground#A9B4C1
editorGutter.modifiedBackground#0956AE
editorHoverWidget.background#24282E
editorHoverWidget.border#464e59bb
editorHoverWidget.foreground#ACB4BE
editorIndentGuide.activeBackground#586779
editorIndentGuide.background#38424D
editorInfo.foreground#4696F1
editorLineNumber.activeForeground#C7CED6
editorLineNumber.foreground#586779
editorLink.activeForeground#0ABAFA
editorMarkerNavigation.background#26292C
editorMarkerNavigationError.background#F16846
editorMarkerNavigationInfo.background#6EB0FC
editorMarkerNavigationWarning.background#C8A73C
editorOverviewRuler.background#2D353E
editorOverviewRuler.border#60687180
editorRuler.foreground#424E5C
editorSuggestWidget.background#24282E
editorSuggestWidget.border#464E59
editorSuggestWidget.foreground#C9CED4
editorSuggestWidget.highlightForeground#3C95FB
editorSuggestWidget.selectedBackground#183454
editorWarning.foreground#F1A746
editorWhitespace.foreground#6E819626
editorWidget.background#24282E
editorWidget.foreground#C7CED6
editorWidget.resizeBorder#8CB2DE
focusBorder#0A7AFA
foreground#C7CED6
gitDecoration.addedResourceForeground#64D38D
gitDecoration.conflictingResourceForeground#7664D3
gitDecoration.deletedResourceForeground#D36464
gitDecoration.ignoredResourceForeground#949BA4
gitDecoration.modifiedResourceForeground#D3B264
gitDecoration.stageDeletedResourceForeground#C83C3C
gitDecoration.stageModifiedResourceForeground#E6BF84
gitDecoration.submoduleResourceForeground#6498D3
gitDecoration.untrackedResourceForeground#7BE09D
icon.foreground#C7CED6
input.background#31353A
input.foreground#CBCED2
input.placeholderForeground#AFB5BB
inputOption.activeBackground#0A7AFA66
inputOption.activeBorder#f50c0c00
inputOption.activeForeground#E6E8EA
list.activeSelectionBackground#073264
list.activeSelectionForeground#E4E8EC
list.dropBackground#464E59
list.focusBackground#183454
list.highlightForeground#0A7AFA
list.hoverBackground#2F353C
list.hoverForeground#E4E8EC
list.inactiveSelectionBackground#2F353C
list.inactiveSelectionForeground#E4E8EC
listFilterWidget.background#424E5C
listFilterWidget.noMatchesOutline#FA3A0A
menu.background#2F353C
menu.border#464E5970
menu.foreground#C9CED4
menu.selectionBackground#034A9B
menu.selectionForeground#E5E8EB
menu.separatorBackground#464E59
menubar.selectionBackground#5C6875
menubar.selectionForeground#E5E8EB
merge.commonContentBackground#26292C
merge.commonHeaderBackground#494F55
notificationCenter.border#494F552A
notificationCenterHeader.background#333538
notificationCenterHeader.foreground#AFB5BB
notifications.background#26292C
notifications.border#494F552A
notifications.foreground#CBCED2
notificationsErrorIcon.foreground#C8433C
notificationsInfoIcon.foreground#3CA3C8
notificationsWarningIcon.foreground#C8BF3C
notificationToast.border#494F552A
panel.background#2F353C
panel.border#464E59
panelTitle.activeBorder#0A7AFA
panelTitle.activeForeground#E6E8EA
panelTitle.inactiveForeground#CBCED2CC
peekView.border#0A7AFA
peekViewEditor.background#223449
peekViewEditor.matchHighlightBackground#c88b3c69
peekViewEditorGutter.background#223449
peekViewResult.background#1A2837
peekViewResult.lineForeground#8C9AAB
peekViewResult.matchHighlightBackground#C88D3C4F
peekViewResult.selectionBackground#183454
peekViewResult.selectionForeground#E4E8EC
peekViewTitleLabel.foreground#E4E8EC
pickerGroup.border#464E59
pickerGroup.foreground#3C95FB
progressBar.background#0A7AFA
scrollbar.shadow#22282F
scrollbarSlider.activeBackground#7381919B
scrollbarSlider.background#464E599B
scrollbarSlider.hoverBackground#5C68759B
selection.background#6E8196
sideBar.background#22282F
sideBar.foreground#C7CED6
sideBarSectionHeader.background#2D353E
sideBarTitle.foreground#ACB4BE
statusBar.background#24282E
statusBar.debuggingBackground#C88B3C
statusBar.debuggingForeground#24282E
statusBar.foreground#ACB4BE
statusBar.noFolderBackground#61237B
statusBar.noFolderForeground#C9CED4
statusBarItem.hoverBackground#464E59BB
statusBarItem.remoteBackground#034A9B
statusBarItem.remoteForeground#E5E8EB
tab.activeBackground#2D353E
tab.activeBorder#0A7AFA
tab.activeForeground#E4E8EC
tab.border#22282F
tab.hoverBackground#424E5C
tab.hoverForeground#C7CED6
tab.inactiveBackground#24282E
tab.inactiveForeground#A9B4C1
terminal.ansiBlack#000913
terminal.ansiBlue#3C7dC8
terminal.ansiBrightBlack#606871
terminal.ansiBrightBlue#5097E7
terminal.ansiBrightCyan#46C3F1
terminal.ansiBrightGreen#53EC3C
terminal.ansiBrightMagenta#D165FF
terminal.ansiBrightRed#F14F46
terminal.ansiBrightWhite#E6E8EA
terminal.ansiBrightYellow#f1E646
terminal.ansiCyan#3CA3C8
terminal.ansiGreen#4FC83C
terminal.ansiMagenta#9E3CC8
terminal.ansiRed#C8433C
terminal.ansiWhite#CBCED2
terminal.ansiYellow#C8BF3C
terminal.border#464E59
terminal.foreground#CBCED2
terminal.selectionBackground#78818C80
terminalCursor.background#0462CD
terminalCursor.foreground#E6E8EA
textLink.foreground#3C95FB
titleBar.activeBackground#464E59BB
titleBar.activeForeground#C9CED4
titleBar.inactiveBackground#2F353C
titleBar.inactiveForeground#ACB4bECC
tree.indentGuidesStroke#464E59
widget.shadow#424e5c36

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#8a9eb3	italic
punctuation	#a9b4c1	—
punctuation.decorator, meta.brace.round	#c7ced6	—
punctuation.terminator.statement	#8f9dae	—
punctuation.accessor.optional	#bb7fff	—
punctuation.definition.constant	#6eb0fc	—
punctuation.section.embedded	#c87ded	—
string, punctuation.definition.string	#edd37d	—
constant.numeric, keyword.other.unit	#edb97d	—
constant.language, entity.name.tag, keyword, keyword.operator, storage.modifier, storage.type, support.type.primitive	#fc6e86	—
variable.language, fenced_code.block.language	#a9b4c1	italic
variable.parameter, entity.name.variable.parameter, parameter.variable	#c7ced6	italic
meta.function, meta.function-call, meta.definition.function, meta.definition.method, meta.method.declaration, entity.name.function, entity.other.attribute-name, support.function, function.support.builtin, function.support.core, punctuation.definition.entity	#91e684	—
constant.language.boolean.true	#7fe255	bold
constant.language.boolean.false	#ff6d62	bold
constant.language.null	—	bold
support.variable.property	#a9b4c1	—
meta.property-value	#eef4fc	—
constant.character, constant.other, support.constant	#6eb0fc	—
meta.definition.variable, meta.parameters, meta.method.declaration, meta.object.member, variable.other.constant, variable.other.object, entity.name.variable.local	#6eb0fc	—
entity.name.class, entity.name.type, entity.name.class.declaration, entity.name.type.class, entity.other.inherited-class	#c87ded	—
meta.block, meta.class, meta.var.expr, meta.template.expression, meta.function-call.arguments, meta.definition.property, meta.field.declaration, meta.tag.without-attributes, meta.children, entity.name.type.namespace, entity.name.variable, entity.name.section, variable.object.property, variable.other.assignment, variable.other.object.property, variable.other.constant.property, variable.other.readwrite.alias	#c7ced6	—
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, variable.other.property, variable.other.jsdoc	#c7ced6	—
meta.object-literal.key, support.type.property-name	#c7ced6	—
meta.return.type, meta.field.declaration, meta.interface, support.type, support.type.primitive, support.type.property-name, punctuation.support.type.property-name	#7dc8ed	—
entity.other.attribute-name.pseudo-class	—	italic
markup.underline.link	#7ddbed	—
markup.bold	#dfdfe0	bold
markup.italic	#dfdfe0	italic
case-clause.expr, switch-block.expr, switch-statement.expr	#48a7c6	—
token.info-token	#6c9fdb	—
token.warn-token	#d3b264	—
token.error-token	#ec7a78	—
token.debug-token	#a18aff	—
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#6eb0fc	—
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown	#7dc8ed	—
markup.quote.markdown	#edb97d	—
storage.type.cs, entity.name.type.cs	#988dff	—
keyword.type.cs	#7dc8ed	—
variable.css, variable.scss, variable.less, variable.sass	#6eb0fc	—
support.class.dart, other.source.dart	#fc6e86	—
punctuation.definition.variable.php, variable.other	#c7ced6	—
meta.class.kotlin	#c87ded	—
support.class.kotlin	#7dc8ed	—
variable.other.readwrite.instance.ruby, punctuation.definition.variable.ruby	#6eb0fc	—
constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby	#7dc8ed	—
meta.function.method.with-arguments.ruby	#c7ced6	—
entity.name.type.class.std.rust	#988dff	—
entity.name.type.rust, entity.name.type.numeric.rust	#6eb0fc	—
meta.indexed-name.python	#91e684	—

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Kite Theme WCAG — Kite Light WCAG

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
export interface User {
  id: string;
  name: string;
  role: "admin" | "member";
  tags: string[];
}

/**
 * Fetch user data by ID
 * @param id
 * @returns User object or null if ID is invalid
 */
export async function fetchUser(id: string): Promise<User | null> {
  if (!id) {
    return null;
  }

  const response = await fetch(`/api/users/${id}`, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return (await response.json()) as User;
}

function greet(user: User): string {
  // Simple greeting function that uses the user's name
  return `Hello, ${user.name}!`;
}

Problems1

Output

Debug Console

Terminal

Ports

~/my-project $ pnpm dev
▲ Next.js ready on http://localhost:3000
✓ compiled client and server successfully in 412ms
wait - compiling /theme/vscode...
~/my-project $

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#E4E8EC
activityBar.background#F9FAFB
activityBar.border#E6E8EA
activityBar.foreground#424E5C
activityBar.inactiveForeground#A9B4C1
activityBarBadge.background#0A7AFA
activityBarBadge.foreground#FFFFFF
badge.background#AFB5BB
badge.foreground#31353A
breadcrumb.background#FFFFFF
breadcrumb.focusForeground#26292C
breadcrumb.foreground#78818C
button.background#0A7AFA
button.foreground#F3F5F6
button.hoverBackground#0462CD
button.secondaryBackground#A9B4C1
button.secondaryForeground#464E59
button.secondaryHoverBackground#5C6875
debugToolBar.background#F4F5F6
debugToolBar.border#E6E8EA
diffEditor.border#E6E8EA
diffEditor.insertedTextBackground#61AF5534
diffEditor.removedTextBackground#FA3A0A34
dropdown.background#FFFFFF
dropdown.border#E6E8EA
dropdown.foreground#31353A
editor.background#FFFFFF
editor.findMatchBackground#F5A475BF
editor.findMatchHighlightBackground#F5CE75BF
editor.foldBackground#0462CD09
editor.foreground#04274E
editor.hoverHighlightBackground#C7CED650
editor.inactiveSelectionBackground#6E819626
editor.lineHighlightBackground#E4E8EC80
editor.rangeHighlightBackground#C7CED6
editor.selectionBackground#6E819642
editor.selectionHighlightBackground#C7CED62A
editor.selectionHighlightBorder#8C9AAB
editor.wordHighlightBackground#B3DFEA80
editor.wordHighlightBorder#6EB0FC
editor.wordHighlightStrongBackground#B3CDEA
editorBracketHighlight.foreground1#237CE1
editorBracketHighlight.foreground2#E19223
editorBracketHighlight.foreground3#867DED
editorBracketHighlight.foreground4#23A2E1
editorBracketHighlight.foreground5#E17523
editorBracketHighlight.foreground6#A223E1
editorBracketHighlight.unexpectedBracket.foreground#E12923
editorBracketMatch.background#0A7AFA10
editorBracketMatch.border#6E819680
editorCodeLens.foreground#8C9AAB
editorCursor.background#AFB5BB
editorCursor.foreground#26292C
editorError.foreground#FA3A0A
editorGroup.border#E6E8EA
editorGroupHeader.tabsBackground#F4F5F6
editorGroupHeader.tabsBorder#E6E8EA
editorGutter.addedBackground#0FC251
editorGutter.background#FFFFFF
editorGutter.deletedBackground#C20F0F
editorGutter.foldingControlForeground#A9B4C1
editorGutter.modifiedBackground#6EB0FC
editorHoverWidget.background#F4F5F6
editorHoverWidget.border#C9CED4BB
editorHoverWidget.foreground#5C6875
editorIndentGuide.activeBackground#B8C1CC
editorIndentGuide.background#D6DBE1
editorInfo.foreground#4696F1
editorInlayHint.background#0ABAFA
editorInlayHint.parameterBackground#0ABAFA
editorInlayHint.typeBackground#0ABAFA
editorLineNumber.activeForeground#586779
editorLineNumber.foreground#C7CED6
editorLink.activeForeground#0ABAFA
editorMarkerNavigation.background#F4F5F6
editorMarkerNavigationError.background#F16846
editorMarkerNavigationInfo.background#6EB0FC
editorMarkerNavigationWarning.background#C8A73C
editorOverviewRuler.background#FFFFFF
editorOverviewRuler.border#E6E8EA
editorRuler.foreground#E6E8EA
editorSuggestWidget.background#F4F5F6
editorSuggestWidget.border#C9CED4
editorSuggestWidget.foreground#5C6875
editorSuggestWidget.highlightForeground#3C95FB
editorSuggestWidget.selectedBackground#B3CDEA
editorWarning.foreground#F1A746
editorWhitespace.foreground#6E819626
editorWidget.background#F4F5F6
editorWidget.foreground#424E5C
editorWidget.resizeBorder#8CB2DE
focusBorder#0A7AFA
foreground#2D353E
gitDecoration.addedResourceForeground#0FC251
gitDecoration.conflictingResourceForeground#A32EA3
gitDecoration.deletedResourceForeground#A32E2E
gitDecoration.ignoredResourceForeground#949BA4
gitDecoration.modifiedResourceForeground#A3802E
gitDecoration.stageDeletedResourceForeground#C20F0F
gitDecoration.stageModifiedResourceForeground#C28D0F
gitDecoration.submoduleResourceForeground#0F63C2
gitDecoration.untrackedResourceForeground#2EA359
icon.foreground#424E5C
input.background#FFFFFF
input.foreground#31353A
input.placeholderForeground#78818C
inputOption.activeBackground#0A7AFA66
inputOption.activeBorder#F50C0C00
inputOption.activeForeground#31353A
list.activeSelectionBackground#A4CBF9
list.activeSelectionForeground#2D353E
list.dropBackground#C9CED4
list.focusBackground#C9CED4
list.highlightForeground#0A7AFA
list.hoverBackground#E5E8EB
list.hoverForeground#2D353E
list.inactiveSelectionBackground#E4E8EC
list.inactiveSelectionForeground#2F353C
listFilterWidget.background#C7CED6
listFilterWidget.noMatchesOutline#FA3A0A
menu.background#F4F5F6
menu.border#E6E8EA
menu.foreground#5C6875
menu.selectionBackground#A4CBF9
menu.selectionForeground#2F353C
menu.separatorBackground#E6E8EA
menubar.selectionBackground#F4F5F6
menubar.selectionForeground#5C6875
merge.commonContentBackground#E5E8EB
merge.commonHeaderBackground#C9CED4
notificationCenter.border#CBCED2
notificationCenterHeader.background#CBCED2
notificationCenterHeader.foreground#333538
notifications.background#E6E8EA
notifications.border#CBCED2
notifications.foreground#26292C
notificationsErrorIcon.foreground#F14F46
notificationsInfoIcon.foreground#46C3F1
notificationsWarningIcon.foreground#FCBA6E
notificationToast.border#E4E8EC
panel.background#F3F5F6
panel.border#E6E8EA
panelTitle.activeBorder#0A7AFA
panelTitle.activeForeground#31353A
panelTitle.inactiveForeground#494F55CC
peekView.border#0A7AFA
peekViewEditor.background#EEF4FC
peekViewEditor.matchHighlightBackground#F5CE7569
peekViewEditor.matchHighlightBorder#F5CE75
peekViewEditorGutter.background#EEF4FC
peekViewResult.background#FFFFFF
peekViewResult.lineForeground#6E8196
peekViewResult.matchHighlightBackground#C88D3C4F
peekViewResult.selectionBackground#E4E8EC
peekViewResult.selectionForeground#183454
peekViewTitleLabel.foreground#E4E8EC
pickerGroup.border#E6E8EA
pickerGroup.foreground#3C95FB
progressBar.background#0A7AFA
scrollbar.shadow#C7CED6
scrollbarSlider.activeBackground#949BA49B
scrollbarSlider.background#CBCED29B
scrollbarSlider.hoverBackground#AFB5BB9B
selection.background#C7CED6
sideBar.background#F3F5F6
sideBar.foreground#424E5C
sideBarSectionHeader.background#E4E8EC
sideBarSectionHeader.border#E6E8EA
sideBarTitle.foreground#5C6875
statusBar.background#E5E8EB
statusBar.border#E6E8EA
statusBar.debuggingBackground#DDA45A
statusBar.debuggingForeground#24282E
statusBar.foreground#24282E
statusBar.noFolderBackground#С984E6
statusBar.noFolderForeground#24282E
statusBarItem.hoverBackground#C9CED4BB
statusBarItem.remoteBackground#75B1F5
statusBarItem.remoteForeground#E5E8EB
tab.activeBackground#FFFFFF
tab.activeBorder#0A7AFA
tab.activeForeground#22282F
tab.border#E6E8EA
tab.hoverBackground#FFFFFF
tab.hoverForeground#424E5C
tab.inactiveBackground#F4F5F6
tab.inactiveForeground#78818C
terminal.ansiBlack#000913
terminal.ansiBlue#3C7dC8
terminal.ansiBrightBlack#606871
terminal.ansiBrightBlue#5097E7
terminal.ansiBrightCyan#46C3F1
terminal.ansiBrightGreen#53EC3C
terminal.ansiBrightMagenta#D165FF
terminal.ansiBrightRed#F14F46
terminal.ansiBrightWhite#949BA4
terminal.ansiBrightYellow#F1E646
terminal.ansiCyan#3CA3C8
terminal.ansiGreen#4FC83C
terminal.ansiMagenta#9E3CC8
terminal.ansiRed#C8433C
terminal.ansiWhite#78818C
terminal.ansiYellow#C8BF3C
terminal.border#E6E8EA
terminal.foreground#494F55
terminal.selectionBackground#949BA480
terminalCursor.background#0462CD
terminalCursor.foreground#31353A
textLink.foreground#0A7AFA
titleBar.activeBackground#FFFFFF
titleBar.activeForeground#464E59
titleBar.border#E6E8EA
titleBar.inactiveBackground#F4F5F6
titleBar.inactiveForeground#5C6875CC
tree.indentGuidesStroke#C9CED4
widget.shadow#C7CED636

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#627994	italic
punctuation	#6d7884	—
punctuation.decorator, meta.brace.round	#04274e	—
punctuation.terminator.statement	#6d7884	—
punctuation.accessor.optional	#925ad7	—
punctuation.definition.constant	#1377db	—
punctuation.section.embedded	#993cc8	—
string, punctuation.definition.string	#8a7600	—
constant.numeric, keyword.other.unit	#ae6503	—
constant.language, entity.name.tag, keyword, keyword.operator, storage.modifier, storage.type, support.type.primitive	#e00b2e	—
variable.language, fenced_code.block.language	#6a7888	italic
variable.parameter, entity.name.variable.parameter, parameter.variable	#04274e	italic
meta.function, meta.function-call, meta.definition.function, meta.definition.method, meta.method.declaration, entity.name.function, entity.other.attribute-name, support.function, function.support.builtin, function.support.core, punctuation.definition.entity	#078a00	—
constant.language.boolean.true	#008b00	bold
constant.language.boolean.false	#d24540	bold
constant.language.null	—	bold
support.variable.property	#586779	—
meta.property-value	#586779	—
constant.character, constant.other, support.constant	#1377db	—
meta.definition.variable, meta.parameters, meta.method.declaration, meta.object.member, variable.other.constant, variable.other.object, entity.name.variable.local	#0b6ee0	—
entity.name.class, entity.name.type, entity.name.class.declaration, entity.name.type.class, entity.other.inherited-class	#b129f5	—
meta.block, meta.class, meta.var.expr, meta.template.expression, meta.function-call.arguments, meta.definition.property, meta.field.declaration, meta.tag.without-attributes, meta.children, entity.name.type.namespace, entity.name.variable, entity.name.section, variable.object.property, variable.other.assignment, variable.other.object.property, variable.other.constant.property, variable.other.readwrite.alias	#04274e	—
punctuation.definition.variable, punctuation.support.type.property-name, storage.modifier.lifetime, variable.other.property, variable.other.jsdoc	#04274e	—
meta.object-literal.key, support.type.property-name	#04274e	—
meta.return.type, meta.field.declaration, meta.interface, support.type, support.type.primitive, support.type.property-name, punctuation.support.type.property-name	#007fb2	—
entity.other.attribute-name.pseudo-class	—	italic
markup.underline.link	#008299	—
markup.bold	#1e1e1f	bold
markup.italic	#1e1e1f	italic
case-clause.expr, switch-block.expr, switch-statement.expr	#09819f	—
token.info-token	#0f63c2	—
token.warn-token	#9d6e00	—
token.error-token	#c20f0f	—
token.debug-token	#422ea3	—
fenced_code.block.language, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown, punctuation.definition.italic.markdown, punctuation.definition.markdown, punctuation.definition.metadata.markdown, punctuation.definition.raw.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#0a42fa	—
punctuation.definition.list.begin.markdown, punctuation.definition.quote.begin.markdown	#007fb2	—
markup.quote.markdown	#e72500	—
storage.type.cs, entity.name.type.cs	#3528c3	—
keyword.type.cs	#007fb2	—
variable.css, variable.scss, variable.less, variable.sass	#0b6ee0	—
support.class.dart, other.source.dart	#e00b2e	—
punctuation.definition.variable.php, variable.other	#04274e	—
meta.class.kotlin	#c337c4	—
support.class.kotlin	#007fb2	—
variable.other.readwrite.instance.ruby, punctuation.definition.variable.ruby	#0a42fa	—
constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby	#007fb2	—
meta.function.method.with-arguments.ruby	#04274e	—
entity.name.type.class.std.rust	#6828c3	—
entity.name.type.rust, entity.name.type.numeric.rust	#0a42fa	—
meta.indexed-name.python	#078a00	—