ZeroToSaaS Accessibility Theme Suite

Name: ZeroToSaaS Accessibility Theme Suite
Author: ZeroToSaaS.in

Publisher: ZeroToSaaS.inThemes in package: 20

Medically optimized, WCAG AAA compliant themes with Semantic Cognitive Status (Safe, Caution, Warning, Panic) and contextual file-type adaptation.

Open in VS Code GitHub

Color themes

VS Code preview

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

ZeroToSaaS Accessibility Theme Suite — ZeroToSaaS Light (Default)

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#0B4F9C
activityBar.background#ECF1F7
activityBar.border#D8E1ED
activityBar.foreground#0B4F9C
activityBar.inactiveForeground#485260
activityBarBadge.background#0B4F9C
activityBarBadge.foreground#FFFFFF
badge.background#0B4F9C
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#0B4F9C
breadcrumb.background#FCFCFD
breadcrumb.focusForeground#111827
breadcrumb.foreground#485260
button.background#0B4F9C
button.foreground#FFFFFF
button.hoverBackground#003D99
button.secondaryBackground#F6F8FB
button.secondaryForeground#111827
button.secondaryHoverBackground#E5EDF7
chat.avatarBackground#0B4F9C
chat.avatarForeground#FFFFFF
chat.linesAddedForeground#0B6229
chat.linesRemovedForeground#990014
chat.requestBackground#F6F8FB
chat.requestBorder#D8E1ED
chat.slashCommandBackground#0B4F9C1A
chat.slashCommandForeground#0B4F9C
commandCenter.activeBackground#E5EDF7
commandCenter.activeBorder#0B4F9C
commandCenter.activeForeground#111827
commandCenter.background#F6F8FB
commandCenter.border#D8E1ED
commandCenter.foreground#111827
commandCenter.inactiveBorder#D8E1ED
commandCenter.inactiveForeground#485260
debugConsole.background#FCFCFD
debugConsole.errorForeground#990014
debugConsole.foreground#111827
debugConsole.infoForeground#0B6229
debugConsole.sourceForeground#485260
debugConsole.warningForeground#8C3800
debugConsoleInputIcon.foreground#0B4F9C
debugIcon.breakpointCurrentStackframeForeground#784A00
debugIcon.breakpointDisabledForeground#48526080
debugIcon.breakpointForeground#990014
debugIcon.breakpointStackframeForeground#0B6229
debugIcon.breakpointUnverifiedForeground#8C3800
debugIcon.continueForeground#0B6229
debugIcon.disconnectForeground#990014
debugIcon.pauseForeground#784A00
debugIcon.restartForeground#0B6229
debugIcon.startForeground#0B6229
debugIcon.stepBackForeground#0B4F9C
debugIcon.stepIntoForeground#0B4F9C
debugIcon.stepOutForeground#0B4F9C
debugIcon.stepOverForeground#0B4F9C
debugIcon.stopForeground#990014
debugTokenExpression.boolean#784A00
debugTokenExpression.error#990014
debugTokenExpression.name#111827
debugTokenExpression.number#990014
debugTokenExpression.string#8C3800
debugTokenExpression.value#8C3800
debugToolBar.background#F6F8FB
debugToolBar.border#D8E1ED
debugView.stateLabelForeground#0B4F9C
debugView.valueChangedHighlight#FEF9EE
descriptionForeground#485260
diffEditor.border#D8E1ED
diffEditor.insertedTextBackground#F1FAF3CC
diffEditor.removedTextBackground#FFF2F2CC
disabledForeground#485260AA
dropdown.background#FCFCFD
dropdown.border#B4C4DA
dropdown.foreground#111827
editor.background#FCFCFD
editor.findMatchBackground#FEF9EE
editor.findMatchBorder#FDE4A3
editor.findMatchHighlightBackground#FEF9EECC
editor.foreground#111827
editor.hoverHighlightBackground#F6F8FB
editor.inactiveSelectionBackground#B8D6F880
editor.lineHighlightBackground#F6F8FB77
editor.lineHighlightBorder#00000000
editor.selectionBackground#B8D6F8B3
editor.selectionHighlightBackground#B8D6F866
editor.selectionHighlightBorder#0B4F9C4D
editor.wordHighlightBackground#0B4F9C1A
editor.wordHighlightStrongBackground#0B4F9C2E
editorActionList.background#FCFCFD
editorActionList.focusBackground#E5EDF7
editorActionList.focusForeground#111827
editorActionList.foreground#111827
editorAI.background#0B4F9C15
editorAI.border#0B4F9C4D
editorAI.foreground#0B4F9C
editorBracketHighlight.foreground1#0B4F9C
editorBracketHighlight.foreground2#0B6229
editorBracketHighlight.foreground3#784A00
editorBracketHighlight.foreground4#4F2683
editorBracketHighlight.foreground5#0B6229
editorBracketHighlight.foreground6#8C3800
editorBracketMatch.background#E5EDF7
editorBracketMatch.border#0B4F9C
editorCursor.foreground#0B4F9C
editorError.foreground#990014
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#485260CC
editorGroup.border#D8E1ED
editorGroupHeader.noTabsBackground#FCFCFD
editorGroupHeader.tabsBackground#F6F8FB
editorGroupHeader.tabsBorder#D8E1ED
editorHint.foreground#0B6229
editorHoverWidget.background#FCFCFD
editorHoverWidget.border#B4C4DA
editorHoverWidget.foreground#111827
editorHoverWidget.statusBarBackground#F6F8FB
editorIndentGuide.activeBackground#0B4F9C
editorIndentGuide.activeBackground1#0B4F9C
editorIndentGuide.activeBackground2#0B6229
editorIndentGuide.activeBackground3#784A00
editorIndentGuide.activeBackground4#4F2683
editorIndentGuide.activeBackground5#0B6229
editorIndentGuide.activeBackground6#8C3800
editorIndentGuide.background#D8E1ED
editorIndentGuide.background1#0B4F9C25
editorIndentGuide.background2#0B622925
editorIndentGuide.background3#784A0025
editorIndentGuide.background4#4F268325
editorIndentGuide.background5#0B622925
editorIndentGuide.background6#8C380025
editorInfo.foreground#0B4F9C
editorInlayHint.background#E5EDF799
editorInlayHint.foreground#485260
editorInlayHint.parameterForeground#784A00
editorInlayHint.typeForeground#0B6229
editorLineNumber.activeForeground#0B4F9C
editorLineNumber.foreground#48526099
editorLink.activeForeground#0B4F9C
editorStickyScroll.background#F6F8FB
editorStickyScroll.border#D8E1ED
editorStickyScroll.shadow#00000014
editorStickyScrollHover.background#E5EDF7
editorSuggestWidget.background#FCFCFD
editorSuggestWidget.border#B4C4DA
editorSuggestWidget.focusHighlightForeground#0B4F9C
editorSuggestWidget.foreground#111827
editorSuggestWidget.highlightForeground#0B4F9C
editorSuggestWidget.selectedBackground#E5EDF7
editorSuggestWidget.selectedForeground#111827
editorSuggestWidget.selectedIconForeground#0B4F9C
editorWarning.foreground#8C3800
editorWidget.background#FCFCFD
editorWidget.border#B4C4DA
editorWidget.foreground#111827
editorWidget.resizeBorder#0B4F9C
errorForeground#990014
focusBorder#0B4F9C
foreground#111827
gitDecoration.addedResourceForeground#0B6229
gitDecoration.conflictingResourceForeground#8C3800
gitDecoration.deletedResourceForeground#990014
gitDecoration.ignoredResourceForeground#48526088
gitDecoration.modifiedResourceForeground#784A00
gitDecoration.untrackedResourceForeground#0B6229
icon.foreground#111827
inlineChat.background#FCFCFD
inlineChat.border#B4C4DA
inlineChat.regionHighlight#0B4F9C1A
inlineChat.shadow#00000022
inlineChatDiff.inserted#F1FAF3CC
inlineChatDiff.removed#FFF2F2CC
inlineChatInput.background#F6F8FB
inlineChatInput.border#D8E1ED
inlineChatInput.focusBorder#0B4F9C
inlineChatInput.placeholderForeground#485260
inlineEdit.border#B4C4DA
inlineEdit.indicator.background#0B4F9C
inlineEdit.indicator.border#003D99
inlineEdit.indicator.foreground#FFFFFF
inlineEdit.modifiedBackground#F1FAF380
inlineEdit.originalBackground#FFF2F280
input.background#FCFCFD
input.border#B4C4DA
input.foreground#111827
input.placeholderForeground#485260
inputOption.activeBorder#0B4F9C
inputValidation.errorBackground#FFF2F2
inputValidation.errorBorder#990014
inputValidation.infoBackground#F1FAF3
inputValidation.infoBorder#0B6229
inputValidation.warningBackground#FFF6EE
inputValidation.warningBorder#8C3800
interactive.activeCodeBorder#0B4F9C
interactive.inactiveCodeBorder#D8E1ED
interactive.requestBorder#D8E1ED
keybindingLabel.background#F6F8FB
keybindingLabel.border#B4C4DA
keybindingLabel.bottomBorder#B4C4DA
keybindingLabel.foreground#111827
list.activeSelectionBackground#E5EDF7
list.activeSelectionForeground#111827
list.activeSelectionIconForeground#0B4F9C
list.errorForeground#990014
list.focusBackground#E5EDF7
list.focusForeground#111827
list.focusHighlightForeground#0B4F9C
list.highlightForeground#0B4F9C
list.hoverBackground#E5EDF766
list.hoverForeground#111827
list.inactiveFocusBackground#B8D6F855
list.inactiveSelectionBackground#B8D6F877
list.inactiveSelectionForeground#111827
list.inactiveSelectionIconForeground#0B4F9C
list.warningForeground#8C3800
menu.background#FCFCFD
menu.border#B4C4DA
menu.foreground#111827
menu.selectionBackground#E5EDF7
menu.selectionBorder#0B4F9C
menu.selectionForeground#111827
menu.separatorBackground#D8E1ED
menubar.selectionBackground#E5EDF7
menubar.selectionForeground#111827
multiDiffEditor.background#FCFCFD
multiDiffEditor.border#D8E1ED
multiDiffEditor.headerBackground#F6F8FB
notificationCenter.border#B4C4DA
notifications.background#FCFCFD
notifications.border#D8E1ED
notifications.foreground#111827
notificationToast.border#B4C4DA
outputView.background#FCFCFD
outputViewStickyScroll.background#F6F8FB
panel.background#F3F6FA
panel.border#D8E1ED
panelSection.border#D8E1ED
panelSection.dropBackground#E5EDF7
panelSectionHeader.background#F6F8FB
panelSectionHeader.border#D8E1ED
panelSectionHeader.foreground#111827
panelTitle.activeBorder#0B4F9C
panelTitle.activeForeground#111827
panelTitle.inactiveForeground#485260
peekView.border#0B4F9C
peekViewEditor.background#F6F8FB
peekViewEditor.matchHighlightBackground#FEF9EE
peekViewResult.background#F3F6FA
peekViewResult.matchHighlightBackground#FEF9EE
peekViewResult.selectionBackground#E5EDF7
peekViewTitle.background#F6F8FB
problemsErrorIcon.foreground#990014
problemsInfoIcon.foreground#0B4F9C
problemsWarningIcon.foreground#8C3800
quickInput.background#FCFCFD
quickInput.foreground#111827
quickInputList.focusBackground#E5EDF7
searchEditor.findMatchBackground#FEF9EE
searchEditor.findMatchBorder#FDE4A3
selection.background#E5EDF7
settings.focusedRowBackground#E5EDF750
settings.headerForeground#0B4F9C
settings.modifiedItemIndicator#0B4F9C
settings.rowHoverBackground#E5EDF725
sideBar.background#F3F6FA
sideBar.border#D8E1ED
sideBar.foreground#111827
sideBarSectionHeader.background#F6F8FB
sideBarSectionHeader.border#D8E1ED
sideBarSectionHeader.foreground#111827
sideBarTitle.foreground#0B4F9C
statusBar.background#0B4F9C
statusBar.border#0B4F9C
statusBar.debuggingBackground#FFF6EE
statusBar.debuggingForeground#8C3800
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0B4F9C
statusBar.noFolderForeground#FFFFFF
statusBarItem.hoverBackground#FFFFFF25
statusBarItem.remoteBackground#00000030
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#111827
symbolIcon.booleanForeground#990014
symbolIcon.classForeground#0B6229
symbolIcon.colorForeground#990014
symbolIcon.constantForeground#784A00
symbolIcon.eventForeground#4F2683
symbolIcon.fieldForeground#111827
symbolIcon.fileForeground#111827
symbolIcon.folderForeground#0B4F9C
symbolIcon.functionForeground#4F2683
symbolIcon.interfaceForeground#0B6229
symbolIcon.keyForeground#0B4F9C
symbolIcon.keywordForeground#0B4F9C
symbolIcon.methodForeground#4F2683
symbolIcon.moduleForeground#0B4F9C
symbolIcon.nullForeground#784A00
symbolIcon.numberForeground#990014
symbolIcon.objectForeground#0B6229
symbolIcon.operatorForeground#111827
symbolIcon.packageForeground#0B4F9C
symbolIcon.propertyForeground#111827
symbolIcon.snippetForeground#0B4F9C
symbolIcon.stringForeground#8C3800
symbolIcon.structForeground#0B6229
symbolIcon.textForeground#111827
symbolIcon.typeParameterForeground#0B6229
symbolIcon.unitForeground#784A00
symbolIcon.variableForeground#111827
tab.activeBackground#FCFCFD
tab.activeBorder#0B4F9C
tab.activeBorderTop#0B4F9C
tab.activeForeground#111827
tab.border#D8E1ED
tab.hoverBackground#FCFCFD
tab.hoverForeground#111827
tab.inactiveBackground#F6F8FB
tab.inactiveForeground#485260
tab.unfocusedActiveBackground#FCFCFD
tab.unfocusedActiveForeground#111827
tab.unfocusedInactiveForeground#485260
terminal.ansiBlack#111827
terminal.ansiBlue#0B4F9C
terminal.ansiBrightBlack#485260
terminal.ansiBrightBlue#003D99
terminal.ansiBrightCyan#0B6229
terminal.ansiBrightGreen#0B6229
terminal.ansiBrightMagenta#4F2683
terminal.ansiBrightRed#990014
terminal.ansiBrightWhite#111827
terminal.ansiBrightYellow#784A00
terminal.ansiCyan#0B6229
terminal.ansiGreen#0B6229
terminal.ansiMagenta#4F2683
terminal.ansiRed#990014
terminal.ansiWhite#F6F8FB
terminal.ansiYellow#784A00
terminal.background#FCFCFD
terminal.border#D8E1ED
terminal.findMatchBackground#FEF9EE
terminal.findMatchBorder#FDE4A3
terminal.findMatchHighlightBackground#FEF9EECC
terminal.foreground#111827
terminal.hoverHighlightBackground#F6F8FB
terminal.inactiveSelectionBackground#B8D6F855
terminal.selectionBackground#B8D6F8B3
terminal.tab.activeBorder#0B4F9C
terminalCommandDecoration.defaultBackground#0B4F9C80
terminalCommandDecoration.errorBackground#990014
terminalCommandDecoration.successBackground#0B6229
terminalCursor.background#FCFCFD
terminalCursor.foreground#0B4F9C
terminalOverviewRuler.cursorForeground#0B4F9C
terminalOverviewRuler.findMatchForeground#784A00
titleBar.activeBackground#F3F6FA
titleBar.activeForeground#111827
titleBar.border#D8E1ED
titleBar.inactiveBackground#F6F8FB
titleBar.inactiveForeground#485260
walkThrough.embeddedEditorBackground#F6F8FB
welcomePage.background#FCFCFD
welcomePage.buttonBackground#F6F8FB
welcomePage.buttonHoverBackground#E5EDF7
widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, comment.line.triple-slash, comment.line.number-sign, comment.line.dashes, comment.line.character, comment.line.percentage, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment, string.quoted.docstring, string.quoted.docstring.multi, string.quoted.docstring.multi.python, string.quoted.docstring.single.python, string.quoted.double.block.python, string.quoted.single.block.python, source.kotlin comment, source.kotlin comment.line, source.kotlin comment.block, source.kotlin comment.block.documentation, source.swift comment, source.go comment, source.rust comment, source.dart comment, source.java comment, source.ts comment, source.tsx comment, source.js comment, source.jsx comment, source.python comment, source.sql comment, source.shell comment, source.yaml comment	#485260	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier	#0B4F9C	bold
entity.name.function, support.function, meta.function-call, variable.function	#4F2683	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class	#0B6229	bold
constant, constant.language, constant.numeric, support.constant	#784A00	—
variable, variable.other, variable.other.readwrite, variable.other.property	#111827	—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator	#111827	—
invalid, invalid.illegal, invalid.deprecated	#990014	bold underline
constant.other.color, constant.other.color.rgb-value, constant.other.uuid, support.constant.color, keyword.other.dotenv, source.env variable.other.key, source.dotenv variable.other.key	#990014	—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp	#990014	—
source.python string.quoted, source.js string.quoted, source.jsx string.quoted, source.ts string.quoted, source.tsx string.quoted, source.rust string.quoted, source.go string.quoted, source.kotlin string.quoted, source.swift string.quoted, source.dart string.quoted, source.sql string.quoted	#8C3800	—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated	#8C3800	—
source.python variable.parameter, source.js variable.parameter, source.jsx variable.parameter, source.ts variable.parameter, source.tsx variable.parameter, source.rust variable.parameter, source.go variable.parameter, source.kotlin variable.parameter, source.swift variable.parameter, source.dart variable.parameter	#784A00	—
source.ts entity.name.type, source.tsx entity.name.type, source.rust entity.name.type, source.go entity.name.type, source.kotlin entity.name.type, source.swift entity.name.type, source.dart entity.name.type, source.python entity.name.type.class	#0B6229	bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls	#003D99	italic
source.python support.function.magic	#4F2683	bold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component	#0B6229	bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name	#784A00	—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create	#0B4F9C	bold
source.sql constant.other.database-name, source.sql constant.other.table-name	#0B6229	—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro	#4F2683	bold
source.go entity.name.package, source.go keyword.channel	#0B4F9C	bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier	#4F2683	—
source.dart storage.type.annotation, source.dart support.class.flutter	#0B6229	bold
source.json support.type.property-name	#0B6229	bold
source.yaml entity.name.tag	#0B6229	bold
source.toml entity.other.attribute-name.table, source.toml keyword.key	#0B6229	bold
source.ini entity.name.section, source.ini keyword.other.definition	#0B6229	bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other	#990014	bold
text.html.markdown, text.plain, meta.paragraph.markdown	#111827	—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading	#0B4F9C	bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code	#0B6229	—
text.html.markdown markup.underline.link, text.html.markdown string.other.link	#0B4F9C	underline
text.html.markdown markup.quote	#485260	italic
text.html entity.name.tag, text.xml entity.name.tag	#0B4F9C	bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name	#4F2683	—
log.error, log.fatal, log.critical, log.exception	#990014	bold
log.warning, log.warn	#8C3800	bold
log.info, log.notice	#0B6229	bold
log.debug, log.trace	#784A00	—
log.date, log.timestamp	#485260	—

VS Code preview

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

ZeroToSaaS Accessibility Theme Suite — ZeroToSaaS Light Night (Default)

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#63A3DE
activityBar.background#1D232E
activityBar.border#2B323D
activityBar.foreground#63A3DE
activityBar.inactiveForeground#95A0B0
activityBarBadge.background#63A3DE
activityBarBadge.foreground#FFFFFF
badge.background#63A3DE
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#63A3DE
breadcrumb.background#0C1119
breadcrumb.focusForeground#E8ECF1
breadcrumb.foreground#95A0B0
button.background#63A3DE
button.foreground#FFFFFF
button.hoverBackground#7AB5E8
button.secondaryBackground#121822
button.secondaryForeground#E8ECF1
button.secondaryHoverBackground#1E2530
chat.avatarBackground#63A3DE
chat.avatarForeground#FFFFFF
chat.linesAddedForeground#6BCB7A
chat.linesRemovedForeground#FF768A
chat.requestBackground#121822
chat.requestBorder#2B323D
chat.slashCommandBackground#63A3DE1A
chat.slashCommandForeground#63A3DE
commandCenter.activeBackground#1E2530
commandCenter.activeBorder#63A3DE
commandCenter.activeForeground#E8ECF1
commandCenter.background#121822
commandCenter.border#2B323D
commandCenter.foreground#E8ECF1
commandCenter.inactiveBorder#2B323D
commandCenter.inactiveForeground#95A0B0
debugConsole.background#0C1119
debugConsole.errorForeground#FF768A
debugConsole.foreground#E8ECF1
debugConsole.infoForeground#6BCB7A
debugConsole.sourceForeground#95A0B0
debugConsole.warningForeground#E89A5A
debugConsoleInputIcon.foreground#63A3DE
debugIcon.breakpointCurrentStackframeForeground#E8B85A
debugIcon.breakpointDisabledForeground#95A0B080
debugIcon.breakpointForeground#FF768A
debugIcon.breakpointStackframeForeground#6BCB7A
debugIcon.breakpointUnverifiedForeground#E89A5A
debugIcon.continueForeground#6BCB7A
debugIcon.disconnectForeground#FF768A
debugIcon.pauseForeground#E8B85A
debugIcon.restartForeground#6BCB7A
debugIcon.startForeground#6BCB7A
debugIcon.stepBackForeground#63A3DE
debugIcon.stepIntoForeground#63A3DE
debugIcon.stepOutForeground#63A3DE
debugIcon.stepOverForeground#63A3DE
debugIcon.stopForeground#FF768A
debugTokenExpression.boolean#E8B85A
debugTokenExpression.error#FF768A
debugTokenExpression.name#E8ECF1
debugTokenExpression.number#FD7084
debugTokenExpression.string#E89A5A
debugTokenExpression.value#E89A5A
debugToolBar.background#121822
debugToolBar.border#2B323D
debugView.stateLabelForeground#63A3DE
debugView.valueChangedHighlight#2A2410
descriptionForeground#95A0B0
diffEditor.border#2B323D
diffEditor.insertedTextBackground#0E2A14CC
diffEditor.removedTextBackground#2A0E12CC
disabledForeground#95A0B0AA
dropdown.background#0C1119
dropdown.border#3D4651
dropdown.foreground#E8ECF1
editor.background#0C1119
editor.findMatchBackground#2A2410
editor.findMatchBorder#E8B85A
editor.findMatchHighlightBackground#2A2410CC
editor.foreground#E8ECF1
editor.hoverHighlightBackground#121822
editor.inactiveSelectionBackground#2A4A7A80
editor.lineHighlightBackground#12182277
editor.lineHighlightBorder#00000000
editor.selectionBackground#2A4A7AB3
editor.selectionHighlightBackground#2A4A7A66
editor.selectionHighlightBorder#63A3DE4D
editor.wordHighlightBackground#63A3DE1A
editor.wordHighlightStrongBackground#63A3DE2E
editorActionList.background#0C1119
editorActionList.focusBackground#1E2530
editorActionList.focusForeground#E8ECF1
editorActionList.foreground#E8ECF1
editorAI.background#63A3DE15
editorAI.border#63A3DE4D
editorAI.foreground#63A3DE
editorBracketHighlight.foreground1#63A3DE
editorBracketHighlight.foreground2#6BCB7A
editorBracketHighlight.foreground3#E8B85A
editorBracketHighlight.foreground4#B89BE8
editorBracketHighlight.foreground5#6BCB7A
editorBracketHighlight.foreground6#E89A5A
editorBracketMatch.background#1E2530
editorBracketMatch.border#63A3DE
editorCursor.foreground#63A3DE
editorError.foreground#FF768A
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#95A0B0CC
editorGroup.border#2B323D
editorGroupHeader.noTabsBackground#0C1119
editorGroupHeader.tabsBackground#121822
editorGroupHeader.tabsBorder#2B323D
editorHint.foreground#6BCB7A
editorHoverWidget.background#0C1119
editorHoverWidget.border#3D4651
editorHoverWidget.foreground#E8ECF1
editorHoverWidget.statusBarBackground#121822
editorIndentGuide.activeBackground#63A3DE
editorIndentGuide.activeBackground1#63A3DE
editorIndentGuide.activeBackground2#6BCB7A
editorIndentGuide.activeBackground3#E8B85A
editorIndentGuide.activeBackground4#B89BE8
editorIndentGuide.activeBackground5#6BCB7A
editorIndentGuide.activeBackground6#E89A5A
editorIndentGuide.background#2B323D
editorIndentGuide.background1#63A3DE25
editorIndentGuide.background2#6BCB7A25
editorIndentGuide.background3#E8B85A25
editorIndentGuide.background4#B89BE825
editorIndentGuide.background5#6BCB7A25
editorIndentGuide.background6#E89A5A25
editorInfo.foreground#63A3DE
editorInlayHint.background#1E253099
editorInlayHint.foreground#95A0B0
editorInlayHint.parameterForeground#E8B85A
editorInlayHint.typeForeground#6BCB7A
editorLineNumber.activeForeground#63A3DE
editorLineNumber.foreground#95A0B099
editorLink.activeForeground#63A3DE
editorStickyScroll.background#121822
editorStickyScroll.border#2B323D
editorStickyScroll.shadow#00000044
editorStickyScrollHover.background#1E2530
editorSuggestWidget.background#0C1119
editorSuggestWidget.border#3D4651
editorSuggestWidget.focusHighlightForeground#63A3DE
editorSuggestWidget.foreground#E8ECF1
editorSuggestWidget.highlightForeground#63A3DE
editorSuggestWidget.selectedBackground#1E2530
editorSuggestWidget.selectedForeground#E8ECF1
editorSuggestWidget.selectedIconForeground#63A3DE
editorWarning.foreground#E89A5A
editorWidget.background#0C1119
editorWidget.border#3D4651
editorWidget.foreground#E8ECF1
editorWidget.resizeBorder#63A3DE
errorForeground#FF768A
focusBorder#63A3DE
foreground#E8ECF1
gitDecoration.addedResourceForeground#6BCB7A
gitDecoration.conflictingResourceForeground#E89A5A
gitDecoration.deletedResourceForeground#FF768A
gitDecoration.ignoredResourceForeground#95A0B088
gitDecoration.modifiedResourceForeground#E8B85A
gitDecoration.untrackedResourceForeground#6BCB7A
icon.foreground#E8ECF1
inlineChat.background#0C1119
inlineChat.border#3D4651
inlineChat.regionHighlight#63A3DE1A
inlineChat.shadow#00000055
inlineChatDiff.inserted#0E2A14CC
inlineChatDiff.removed#2A0E12CC
inlineChatInput.background#121822
inlineChatInput.border#2B323D
inlineChatInput.focusBorder#63A3DE
inlineChatInput.placeholderForeground#95A0B0
inlineEdit.border#3D4651
inlineEdit.indicator.background#63A3DE
inlineEdit.indicator.border#7AB5E8
inlineEdit.indicator.foreground#FFFFFF
inlineEdit.modifiedBackground#0E2A1480
inlineEdit.originalBackground#2A0E1280
input.background#0C1119
input.border#3D4651
input.foreground#E8ECF1
input.placeholderForeground#95A0B0
inputOption.activeBorder#63A3DE
inputValidation.errorBackground#2A0E12
inputValidation.errorBorder#FF768A
inputValidation.infoBackground#0E2A14
inputValidation.infoBorder#6BCB7A
inputValidation.warningBackground#2A1A0E
inputValidation.warningBorder#E89A5A
interactive.activeCodeBorder#63A3DE
interactive.inactiveCodeBorder#2B323D
interactive.requestBorder#2B323D
keybindingLabel.background#121822
keybindingLabel.border#3D4651
keybindingLabel.bottomBorder#3D4651
keybindingLabel.foreground#E8ECF1
list.activeSelectionBackground#1E2530
list.activeSelectionForeground#E8ECF1
list.activeSelectionIconForeground#63A3DE
list.errorForeground#FF768A
list.focusBackground#1E2530
list.focusForeground#E8ECF1
list.focusHighlightForeground#63A3DE
list.highlightForeground#63A3DE
list.hoverBackground#1E253066
list.hoverForeground#E8ECF1
list.inactiveFocusBackground#2A4A7A55
list.inactiveSelectionBackground#2A4A7A77
list.inactiveSelectionForeground#E8ECF1
list.inactiveSelectionIconForeground#63A3DE
list.warningForeground#E89A5A
menu.background#0C1119
menu.border#3D4651
menu.foreground#E8ECF1
menu.selectionBackground#1E2530
menu.selectionBorder#63A3DE
menu.selectionForeground#E8ECF1
menu.separatorBackground#2B323D
menubar.selectionBackground#1E2530
menubar.selectionForeground#E8ECF1
multiDiffEditor.background#0C1119
multiDiffEditor.border#2B323D
multiDiffEditor.headerBackground#121822
notificationCenter.border#3D4651
notifications.background#0C1119
notifications.border#2B323D
notifications.foreground#E8ECF1
notificationToast.border#3D4651
outputView.background#0C1119
outputViewStickyScroll.background#121822
panel.background#171D27
panel.border#2B323D
panelSection.border#2B323D
panelSection.dropBackground#1E2530
panelSectionHeader.background#121822
panelSectionHeader.border#2B323D
panelSectionHeader.foreground#E8ECF1
panelTitle.activeBorder#63A3DE
panelTitle.activeForeground#E8ECF1
panelTitle.inactiveForeground#95A0B0
peekView.border#63A3DE
peekViewEditor.background#121822
peekViewEditor.matchHighlightBackground#2A2410
peekViewResult.background#171D27
peekViewResult.matchHighlightBackground#2A2410
peekViewResult.selectionBackground#1E2530
peekViewTitle.background#121822
problemsErrorIcon.foreground#FF768A
problemsInfoIcon.foreground#63A3DE
problemsWarningIcon.foreground#E89A5A
quickInput.background#0C1119
quickInput.foreground#E8ECF1
quickInputList.focusBackground#1E2530
searchEditor.findMatchBackground#2A2410
searchEditor.findMatchBorder#E8B85A
selection.background#1E2530
settings.focusedRowBackground#1E253050
settings.headerForeground#63A3DE
settings.modifiedItemIndicator#63A3DE
settings.rowHoverBackground#1E253025
sideBar.background#171D27
sideBar.border#2B323D
sideBar.foreground#E8ECF1
sideBarSectionHeader.background#121822
sideBarSectionHeader.border#2B323D
sideBarSectionHeader.foreground#E8ECF1
sideBarTitle.foreground#63A3DE
statusBar.background#0B4F9C
statusBar.border#0B4F9C
statusBar.debuggingBackground#2A1A0E
statusBar.debuggingForeground#E89A5A
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#0B4F9C
statusBar.noFolderForeground#FFFFFF
statusBarItem.hoverBackground#FFFFFF25
statusBarItem.remoteBackground#00000030
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#E8ECF1
symbolIcon.booleanForeground#FD7084
symbolIcon.classForeground#6BCB7A
symbolIcon.colorForeground#FD7084
symbolIcon.constantForeground#E8B85A
symbolIcon.eventForeground#B89BE8
symbolIcon.fieldForeground#E8ECF1
symbolIcon.fileForeground#E8ECF1
symbolIcon.folderForeground#63A3DE
symbolIcon.functionForeground#B89BE8
symbolIcon.interfaceForeground#6BCB7A
symbolIcon.keyForeground#63A3DE
symbolIcon.keywordForeground#63A3DE
symbolIcon.methodForeground#B89BE8
symbolIcon.moduleForeground#63A3DE
symbolIcon.nullForeground#E8B85A
symbolIcon.numberForeground#FD7084
symbolIcon.objectForeground#6BCB7A
symbolIcon.operatorForeground#E8ECF1
symbolIcon.packageForeground#63A3DE
symbolIcon.propertyForeground#E8ECF1
symbolIcon.snippetForeground#63A3DE
symbolIcon.stringForeground#E89A5A
symbolIcon.structForeground#6BCB7A
symbolIcon.textForeground#E8ECF1
symbolIcon.typeParameterForeground#6BCB7A
symbolIcon.unitForeground#E8B85A
symbolIcon.variableForeground#E8ECF1
tab.activeBackground#0C1119
tab.activeBorder#63A3DE
tab.activeBorderTop#63A3DE
tab.activeForeground#E8ECF1
tab.border#2B323D
tab.hoverBackground#0C1119
tab.hoverForeground#E8ECF1
tab.inactiveBackground#121822
tab.inactiveForeground#95A0B0
tab.unfocusedActiveBackground#0C1119
tab.unfocusedActiveForeground#E8ECF1
tab.unfocusedInactiveForeground#95A0B0
terminal.ansiBlack#121822
terminal.ansiBlue#63A3DE
terminal.ansiBrightBlack#171D27
terminal.ansiBrightBlue#7AB5E8
terminal.ansiBrightCyan#6BCB7A
terminal.ansiBrightGreen#6BCB7A
terminal.ansiBrightMagenta#B89BE8
terminal.ansiBrightRed#FF768A
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E8B85A
terminal.ansiCyan#6BCB7A
terminal.ansiGreen#6BCB7A
terminal.ansiMagenta#B89BE8
terminal.ansiRed#FF768A
terminal.ansiWhite#E8ECF1
terminal.ansiYellow#E8B85A
terminal.background#0C1119
terminal.border#2B323D
terminal.findMatchBackground#2A2410
terminal.findMatchBorder#E8B85A
terminal.findMatchHighlightBackground#2A2410CC
terminal.foreground#E8ECF1
terminal.hoverHighlightBackground#121822
terminal.inactiveSelectionBackground#2A4A7A55
terminal.selectionBackground#2A4A7AB3
terminal.tab.activeBorder#63A3DE
terminalCommandDecoration.defaultBackground#63A3DE80
terminalCommandDecoration.errorBackground#FF768A
terminalCommandDecoration.successBackground#6BCB7A
terminalCursor.background#0C1119
terminalCursor.foreground#63A3DE
terminalOverviewRuler.cursorForeground#63A3DE
terminalOverviewRuler.findMatchForeground#E8B85A
titleBar.activeBackground#171D27
titleBar.activeForeground#E8ECF1
titleBar.border#2B323D
titleBar.inactiveBackground#121822
titleBar.inactiveForeground#95A0B0
walkThrough.embeddedEditorBackground#121822
welcomePage.background#0C1119
welcomePage.buttonBackground#121822
welcomePage.buttonHoverBackground#1E2530
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, comment.line.triple-slash, comment.line.number-sign, comment.line.dashes, comment.line.character, comment.line.percentage, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment, string.quoted.docstring, string.quoted.docstring.multi, string.quoted.docstring.multi.python, string.quoted.docstring.single.python, string.quoted.double.block.python, string.quoted.single.block.python, source.kotlin comment, source.kotlin comment.line, source.kotlin comment.block, source.kotlin comment.block.documentation, source.swift comment, source.go comment, source.rust comment, source.dart comment, source.java comment, source.ts comment, source.tsx comment, source.js comment, source.jsx comment, source.python comment, source.sql comment, source.shell comment, source.yaml comment	#95A0B0	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier	#63A3DE	bold
entity.name.function, support.function, meta.function-call, variable.function	#B89BE8	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class	#6BCB7A	bold
constant, constant.language, constant.numeric, support.constant	#E8B85A	—
variable, variable.other, variable.other.readwrite, variable.other.property	#E8ECF1	—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator	#E8ECF1	—
invalid, invalid.illegal, invalid.deprecated	#FF768A	bold underline
constant.other.color, constant.other.color.rgb-value, constant.other.uuid, support.constant.color, keyword.other.dotenv, source.env variable.other.key, source.dotenv variable.other.key	#FF768A	—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp	#FF768A	—
source.python string.quoted, source.js string.quoted, source.jsx string.quoted, source.ts string.quoted, source.tsx string.quoted, source.rust string.quoted, source.go string.quoted, source.kotlin string.quoted, source.swift string.quoted, source.dart string.quoted, source.sql string.quoted	#E89A5A	—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated	#E89A5A	—
source.python variable.parameter, source.js variable.parameter, source.jsx variable.parameter, source.ts variable.parameter, source.tsx variable.parameter, source.rust variable.parameter, source.go variable.parameter, source.kotlin variable.parameter, source.swift variable.parameter, source.dart variable.parameter	#E8B85A	—
source.ts entity.name.type, source.tsx entity.name.type, source.rust entity.name.type, source.go entity.name.type, source.kotlin entity.name.type, source.swift entity.name.type, source.dart entity.name.type, source.python entity.name.type.class	#6BCB7A	bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls	#7AB5E8	italic
source.python support.function.magic	#B89BE8	bold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component	#6BCB7A	bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name	#E8B85A	—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create	#63A3DE	bold
source.sql constant.other.database-name, source.sql constant.other.table-name	#6BCB7A	—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro	#B89BE8	bold
source.go entity.name.package, source.go keyword.channel	#63A3DE	bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier	#B89BE8	—
source.dart storage.type.annotation, source.dart support.class.flutter	#6BCB7A	bold
source.json support.type.property-name	#6BCB7A	bold
source.yaml entity.name.tag	#6BCB7A	bold
source.toml entity.other.attribute-name.table, source.toml keyword.key	#6BCB7A	bold
source.ini entity.name.section, source.ini keyword.other.definition	#6BCB7A	bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other	#FF768A	bold
text.html.markdown, text.plain, meta.paragraph.markdown	#E8ECF1	—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading	#63A3DE	bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code	#6BCB7A	—
text.html.markdown markup.underline.link, text.html.markdown string.other.link	#63A3DE	underline
text.html.markdown markup.quote	#95A0B0	italic
text.html entity.name.tag, text.xml entity.name.tag	#63A3DE	bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name	#B89BE8	—
log.error, log.fatal, log.critical, log.exception	#FF768A	bold
log.warning, log.warn	#E89A5A	bold
log.info, log.notice	#6BCB7A	bold
log.debug, log.trace	#E8B85A	—
log.date, log.timestamp	#95A0B0	—

VS Code preview

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

ZeroToSaaS Accessibility Theme Suite — ZeroToSaaS Protanopia (Magenta / Teal)

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#0A4BA0
activityBar.background#ECE4EE
activityBar.border#DFC9E3
activityBar.foreground#0A4BA0
activityBar.inactiveForeground#624769
activityBarBadge.background#0A4BA0
activityBarBadge.foreground#FFFFFF
badge.background#0A4BA0
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#0A4BA0
breadcrumb.background#FCFAFC
breadcrumb.focusForeground#1E0E22
breadcrumb.foreground#624769
button.background#0A4BA0
button.foreground#FFFFFF
button.hoverBackground#003478
button.secondaryBackground#F7F2F8
button.secondaryForeground#1E0E22
button.secondaryHoverBackground#E4DAE6
chat.avatarBackground#0A4BA0
chat.avatarForeground#FFFFFF
chat.linesAddedForeground#015D53
chat.linesRemovedForeground#8C0064
chat.requestBackground#F7F2F8
chat.requestBorder#DFC9E3
chat.slashCommandBackground#0A4BA01A
chat.slashCommandForeground#0A4BA0
commandCenter.activeBackground#E4DAE6
commandCenter.activeBorder#0A4BA0
commandCenter.activeForeground#1E0E22
commandCenter.background#F7F2F8
commandCenter.border#DFC9E3
commandCenter.foreground#1E0E22
commandCenter.inactiveBorder#DFC9E3
commandCenter.inactiveForeground#624769
debugConsole.background#FCFAFC
debugConsole.errorForeground#8C0064
debugConsole.foreground#1E0E22
debugConsole.infoForeground#015D53
debugConsole.sourceForeground#624769
debugConsole.warningForeground#7D3800
debugConsoleInputIcon.foreground#0A4BA0
debugIcon.breakpointCurrentStackframeForeground#703700
debugIcon.breakpointDisabledForeground#62476980
debugIcon.breakpointForeground#8C0064
debugIcon.breakpointStackframeForeground#015D53
debugIcon.breakpointUnverifiedForeground#7D3800
debugIcon.continueForeground#015D53
debugIcon.disconnectForeground#8C0064
debugIcon.pauseForeground#703700
debugIcon.restartForeground#015D53
debugIcon.startForeground#015D53
debugIcon.stepBackForeground#0A4BA0
debugIcon.stepIntoForeground#0A4BA0
debugIcon.stepOutForeground#0A4BA0
debugIcon.stepOverForeground#0A4BA0
debugIcon.stopForeground#8C0064
debugTokenExpression.boolean#703700
debugTokenExpression.error#8C0064
debugTokenExpression.name#1E0E22
debugTokenExpression.number#8C0064
debugTokenExpression.string#7D3800
debugTokenExpression.value#7D3800
debugToolBar.background#F7F2F8
debugToolBar.border#DFC9E3
debugView.stateLabelForeground#0A4BA0
debugView.valueChangedHighlight#FEF8F0
descriptionForeground#624769
diffEditor.border#DFC9E3
diffEditor.insertedTextBackground#F1FAF8CC
diffEditor.removedTextBackground#FDF2F9CC
disabledForeground#624769AA
dropdown.background#FCFAFC
dropdown.border#C5A3CA
dropdown.foreground#1E0E22
editor.background#FCFAFC
editor.findMatchBackground#FEF8F0
editor.findMatchBorder#FDDDB0
editor.findMatchHighlightBackground#FEF8F0CC
editor.foreground#1E0E22
editor.hoverHighlightBackground#F7F2F8
editor.inactiveSelectionBackground#E2C8F080
editor.lineHighlightBackground#F7F2F877
editor.lineHighlightBorder#00000000
editor.selectionBackground#E2C8F0B3
editor.selectionHighlightBackground#E2C8F066
editor.selectionHighlightBorder#0A4BA04D
editor.wordHighlightBackground#0A4BA01A
editor.wordHighlightStrongBackground#0A4BA02E
editorActionList.background#FCFAFC
editorActionList.focusBackground#E4DAE6
editorActionList.focusForeground#1E0E22
editorActionList.foreground#1E0E22
editorAI.background#0A4BA015
editorAI.border#0A4BA04D
editorAI.foreground#0A4BA0
editorBracketHighlight.foreground1#0A4BA0
editorBracketHighlight.foreground2#015D53
editorBracketHighlight.foreground3#703700
editorBracketHighlight.foreground4#8C0064
editorBracketHighlight.foreground5#015D53
editorBracketHighlight.foreground6#7D3800
editorBracketMatch.background#E4DAE6
editorBracketMatch.border#0A4BA0
editorCursor.foreground#0A4BA0
editorError.foreground#8C0064
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#624769CC
editorGroup.border#DFC9E3
editorGroupHeader.noTabsBackground#FCFAFC
editorGroupHeader.tabsBackground#F7F2F8
editorGroupHeader.tabsBorder#DFC9E3
editorHint.foreground#015D53
editorHoverWidget.background#FCFAFC
editorHoverWidget.border#C5A3CA
editorHoverWidget.foreground#1E0E22
editorHoverWidget.statusBarBackground#F7F2F8
editorIndentGuide.activeBackground#0A4BA0
editorIndentGuide.activeBackground1#0A4BA0
editorIndentGuide.activeBackground2#015D53
editorIndentGuide.activeBackground3#703700
editorIndentGuide.activeBackground4#8C0064
editorIndentGuide.activeBackground5#015D53
editorIndentGuide.activeBackground6#7D3800
editorIndentGuide.background#DFC9E3
editorIndentGuide.background1#0A4BA025
editorIndentGuide.background2#015D5325
editorIndentGuide.background3#70370025
editorIndentGuide.background4#8C006425
editorIndentGuide.background5#015D5325
editorIndentGuide.background6#7D380025
editorInfo.foreground#0A4BA0
editorInlayHint.background#E4DAE699
editorInlayHint.foreground#624769
editorInlayHint.parameterForeground#703700
editorInlayHint.typeForeground#015D53
editorLineNumber.activeForeground#0A4BA0
editorLineNumber.foreground#62476999
editorLink.activeForeground#0A4BA0
editorStickyScroll.background#F7F2F8
editorStickyScroll.border#DFC9E3
editorStickyScroll.shadow#00000014
editorStickyScrollHover.background#E4DAE6
editorSuggestWidget.background#FCFAFC
editorSuggestWidget.border#C5A3CA
editorSuggestWidget.focusHighlightForeground#0A4BA0
editorSuggestWidget.foreground#1E0E22
editorSuggestWidget.highlightForeground#0A4BA0
editorSuggestWidget.selectedBackground#E4DAE6
editorSuggestWidget.selectedForeground#1E0E22
editorSuggestWidget.selectedIconForeground#0A4BA0
editorWarning.foreground#7D3800
editorWidget.background#FCFAFC
editorWidget.border#C5A3CA
editorWidget.foreground#1E0E22
editorWidget.resizeBorder#0A4BA0
errorForeground#8C0064
focusBorder#0A4BA0
foreground#1E0E22
gitDecoration.addedResourceForeground#015D53
gitDecoration.conflictingResourceForeground#7D3800
gitDecoration.deletedResourceForeground#8C0064
gitDecoration.ignoredResourceForeground#62476988
gitDecoration.modifiedResourceForeground#703700
gitDecoration.untrackedResourceForeground#015D53
icon.foreground#1E0E22
inlineChat.background#FCFAFC
inlineChat.border#C5A3CA
inlineChat.regionHighlight#0A4BA01A
inlineChat.shadow#00000022
inlineChatDiff.inserted#F1FAF8CC
inlineChatDiff.removed#FDF2F9CC
inlineChatInput.background#F7F2F8
inlineChatInput.border#DFC9E3
inlineChatInput.focusBorder#0A4BA0
inlineChatInput.placeholderForeground#624769
inlineEdit.border#C5A3CA
inlineEdit.indicator.background#0A4BA0
inlineEdit.indicator.border#003478
inlineEdit.indicator.foreground#FFFFFF
inlineEdit.modifiedBackground#F1FAF880
inlineEdit.originalBackground#FDF2F980
input.background#FCFAFC
input.border#C5A3CA
input.foreground#1E0E22
input.placeholderForeground#624769
inputOption.activeBorder#0A4BA0
inputValidation.errorBackground#FDF2F9
inputValidation.errorBorder#8C0064
inputValidation.infoBackground#F1FAF8
inputValidation.infoBorder#015D53
inputValidation.warningBackground#FFF7F0
inputValidation.warningBorder#7D3800
interactive.activeCodeBorder#0A4BA0
interactive.inactiveCodeBorder#DFC9E3
interactive.requestBorder#DFC9E3
keybindingLabel.background#F7F2F8
keybindingLabel.border#C5A3CA
keybindingLabel.bottomBorder#C5A3CA
keybindingLabel.foreground#1E0E22
list.activeSelectionBackground#E4DAE6
list.activeSelectionForeground#1E0E22
list.activeSelectionIconForeground#0A4BA0
list.errorForeground#8C0064
list.focusBackground#E4DAE6
list.focusForeground#1E0E22
list.focusHighlightForeground#0A4BA0
list.highlightForeground#0A4BA0
list.hoverBackground#E4DAE666
list.hoverForeground#1E0E22
list.inactiveFocusBackground#E2C8F055
list.inactiveSelectionBackground#E2C8F077
list.inactiveSelectionForeground#1E0E22
list.inactiveSelectionIconForeground#0A4BA0
list.warningForeground#7D3800
menu.background#FCFAFC
menu.border#C5A3CA
menu.foreground#1E0E22
menu.selectionBackground#E4DAE6
menu.selectionBorder#0A4BA0
menu.selectionForeground#1E0E22
menu.separatorBackground#DFC9E3
menubar.selectionBackground#E4DAE6
menubar.selectionForeground#1E0E22
multiDiffEditor.background#FCFAFC
multiDiffEditor.border#DFC9E3
multiDiffEditor.headerBackground#F7F2F8
notificationCenter.border#C5A3CA
notifications.background#FCFAFC
notifications.border#DFC9E3
notifications.foreground#1E0E22
notificationToast.border#C5A3CA
outputView.background#FCFAFC
outputViewStickyScroll.background#F7F2F8
panel.background#F4EEF5
panel.border#DFC9E3
panelSection.border#DFC9E3
panelSection.dropBackground#E4DAE6
panelSectionHeader.background#F7F2F8
panelSectionHeader.border#DFC9E3
panelSectionHeader.foreground#1E0E22
panelTitle.activeBorder#0A4BA0
panelTitle.activeForeground#1E0E22
panelTitle.inactiveForeground#624769
peekView.border#0A4BA0
peekViewEditor.background#F7F2F8
peekViewEditor.matchHighlightBackground#FEF8F0
peekViewResult.background#F4EEF5
peekViewResult.matchHighlightBackground#FEF8F0
peekViewResult.selectionBackground#E4DAE6
peekViewTitle.background#F7F2F8
problemsErrorIcon.foreground#8C0064
problemsInfoIcon.foreground#0A4BA0
problemsWarningIcon.foreground#7D3800
quickInput.background#FCFAFC
quickInput.foreground#1E0E22
quickInputList.focusBackground#E4DAE6
searchEditor.findMatchBackground#FEF8F0
searchEditor.findMatchBorder#FDDDB0
selection.background#E4DAE6
settings.focusedRowBackground#E4DAE650
settings.headerForeground#0A4BA0
settings.modifiedItemIndicator#0A4BA0
settings.rowHoverBackground#E4DAE625
sideBar.background#F4EEF5
sideBar.border#DFC9E3
sideBar.foreground#1E0E22
sideBarSectionHeader.background#F7F2F8
sideBarSectionHeader.border#DFC9E3
sideBarSectionHeader.foreground#1E0E22
sideBarTitle.foreground#0A4BA0
statusBar.background#8C0064
statusBar.border#8C0064
statusBar.debuggingBackground#FFF7F0
statusBar.debuggingForeground#7D3800
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#8C0064
statusBar.noFolderForeground#FFFFFF
statusBarItem.hoverBackground#FFFFFF25
statusBarItem.remoteBackground#00000030
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#1E0E22
symbolIcon.booleanForeground#8C0064
symbolIcon.classForeground#015D53
symbolIcon.colorForeground#8C0064
symbolIcon.constantForeground#703700
symbolIcon.eventForeground#8C0064
symbolIcon.fieldForeground#1E0E22
symbolIcon.fileForeground#1E0E22
symbolIcon.folderForeground#0A4BA0
symbolIcon.functionForeground#8C0064
symbolIcon.interfaceForeground#015D53
symbolIcon.keyForeground#0A4BA0
symbolIcon.keywordForeground#0A4BA0
symbolIcon.methodForeground#8C0064
symbolIcon.moduleForeground#0A4BA0
symbolIcon.nullForeground#703700
symbolIcon.numberForeground#8C0064
symbolIcon.objectForeground#015D53
symbolIcon.operatorForeground#1E0E22
symbolIcon.packageForeground#0A4BA0
symbolIcon.propertyForeground#1E0E22
symbolIcon.snippetForeground#0A4BA0
symbolIcon.stringForeground#7D3800
symbolIcon.structForeground#015D53
symbolIcon.textForeground#1E0E22
symbolIcon.typeParameterForeground#015D53
symbolIcon.unitForeground#703700
symbolIcon.variableForeground#1E0E22
tab.activeBackground#FCFAFC
tab.activeBorder#0A4BA0
tab.activeBorderTop#0A4BA0
tab.activeForeground#1E0E22
tab.border#DFC9E3
tab.hoverBackground#FCFAFC
tab.hoverForeground#1E0E22
tab.inactiveBackground#F7F2F8
tab.inactiveForeground#624769
tab.unfocusedActiveBackground#FCFAFC
tab.unfocusedActiveForeground#1E0E22
tab.unfocusedInactiveForeground#624769
terminal.ansiBlack#1E0E22
terminal.ansiBlue#0A4BA0
terminal.ansiBrightBlack#624769
terminal.ansiBrightBlue#003478
terminal.ansiBrightCyan#015D53
terminal.ansiBrightGreen#015D53
terminal.ansiBrightMagenta#8C0064
terminal.ansiBrightRed#8C0064
terminal.ansiBrightWhite#1E0E22
terminal.ansiBrightYellow#703700
terminal.ansiCyan#015D53
terminal.ansiGreen#015D53
terminal.ansiMagenta#8C0064
terminal.ansiRed#8C0064
terminal.ansiWhite#F7F2F8
terminal.ansiYellow#703700
terminal.background#FCFAFC
terminal.border#DFC9E3
terminal.findMatchBackground#FEF8F0
terminal.findMatchBorder#FDDDB0
terminal.findMatchHighlightBackground#FEF8F0CC
terminal.foreground#1E0E22
terminal.hoverHighlightBackground#F7F2F8
terminal.inactiveSelectionBackground#E2C8F055
terminal.selectionBackground#E2C8F0B3
terminal.tab.activeBorder#0A4BA0
terminalCommandDecoration.defaultBackground#0A4BA080
terminalCommandDecoration.errorBackground#8C0064
terminalCommandDecoration.successBackground#015D53
terminalCursor.background#FCFAFC
terminalCursor.foreground#0A4BA0
terminalOverviewRuler.cursorForeground#0A4BA0
terminalOverviewRuler.findMatchForeground#703700
titleBar.activeBackground#F4EEF5
titleBar.activeForeground#1E0E22
titleBar.border#DFC9E3
titleBar.inactiveBackground#F7F2F8
titleBar.inactiveForeground#624769
walkThrough.embeddedEditorBackground#F7F2F8
welcomePage.background#FCFAFC
welcomePage.buttonBackground#F7F2F8
welcomePage.buttonHoverBackground#E4DAE6
widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, comment.line.triple-slash, comment.line.number-sign, comment.line.dashes, comment.line.character, comment.line.percentage, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment, string.quoted.docstring, string.quoted.docstring.multi, string.quoted.docstring.multi.python, string.quoted.docstring.single.python, string.quoted.double.block.python, string.quoted.single.block.python, source.kotlin comment, source.kotlin comment.line, source.kotlin comment.block, source.kotlin comment.block.documentation, source.swift comment, source.go comment, source.rust comment, source.dart comment, source.java comment, source.ts comment, source.tsx comment, source.js comment, source.jsx comment, source.python comment, source.sql comment, source.shell comment, source.yaml comment	#624769	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier	#0A4BA0	bold
entity.name.function, support.function, meta.function-call, variable.function	#8C0064	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class	#015D53	bold
constant, constant.language, constant.numeric, support.constant	#703700	—
variable, variable.other, variable.other.readwrite, variable.other.property	#1E0E22	—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator	#1E0E22	—
invalid, invalid.illegal, invalid.deprecated	#8C0064	bold underline
constant.other.color, constant.other.color.rgb-value, constant.other.uuid, support.constant.color, keyword.other.dotenv, source.env variable.other.key, source.dotenv variable.other.key	#8C0064	—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp	#8C0064	—
source.python string.quoted, source.js string.quoted, source.jsx string.quoted, source.ts string.quoted, source.tsx string.quoted, source.rust string.quoted, source.go string.quoted, source.kotlin string.quoted, source.swift string.quoted, source.dart string.quoted, source.sql string.quoted	#7D3800	—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated	#7D3800	—
source.python variable.parameter, source.js variable.parameter, source.jsx variable.parameter, source.ts variable.parameter, source.tsx variable.parameter, source.rust variable.parameter, source.go variable.parameter, source.kotlin variable.parameter, source.swift variable.parameter, source.dart variable.parameter	#703700	—
source.ts entity.name.type, source.tsx entity.name.type, source.rust entity.name.type, source.go entity.name.type, source.kotlin entity.name.type, source.swift entity.name.type, source.dart entity.name.type, source.python entity.name.type.class	#015D53	bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls	#003478	italic
source.python support.function.magic	#8C0064	bold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component	#015D53	bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name	#703700	—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create	#0A4BA0	bold
source.sql constant.other.database-name, source.sql constant.other.table-name	#015D53	—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro	#8C0064	bold
source.go entity.name.package, source.go keyword.channel	#0A4BA0	bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier	#8C0064	—
source.dart storage.type.annotation, source.dart support.class.flutter	#015D53	bold
source.json support.type.property-name	#015D53	bold
source.yaml entity.name.tag	#015D53	bold
source.toml entity.other.attribute-name.table, source.toml keyword.key	#015D53	bold
source.ini entity.name.section, source.ini keyword.other.definition	#015D53	bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other	#8C0064	bold
text.html.markdown, text.plain, meta.paragraph.markdown	#1E0E22	—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading	#0A4BA0	bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code	#015D53	—
text.html.markdown markup.underline.link, text.html.markdown string.other.link	#0A4BA0	underline
text.html.markdown markup.quote	#624769	italic
text.html entity.name.tag, text.xml entity.name.tag	#0A4BA0	bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name	#8C0064	—
log.error, log.fatal, log.critical, log.exception	#8C0064	bold
log.warning, log.warn	#7D3800	bold
log.info, log.notice	#015D53	bold
log.debug, log.trace	#703700	—
log.date, log.timestamp	#624769	—

VS Code preview

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

ZeroToSaaS Accessibility Theme Suite — ZeroToSaaS Protanopia Night (Magenta / Teal)

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#61A1DD
activityBar.background#231D28
activityBar.border#2D2833
activityBar.foreground#61A1DD
activityBar.inactiveForeground#A597B1
activityBarBadge.background#61A1DD
activityBarBadge.foreground#FFFFFF
badge.background#61A1DD
badge.foreground#FFFFFF
breadcrumb.activeSelectionForeground#61A1DD
breadcrumb.background#110D14
breadcrumb.focusForeground#EEEAF0
breadcrumb.foreground#A597B1
button.background#61A1DD
button.foreground#FFFFFF
button.hoverBackground#7AB5E8
button.secondaryBackground#19131E
button.secondaryForeground#EEEAF0
button.secondaryHoverBackground#241E2E
chat.avatarBackground#61A1DD
chat.avatarForeground#FFFFFF
chat.linesAddedForeground#4AD0BC
chat.linesRemovedForeground#F27ABA
chat.requestBackground#19131E
chat.requestBorder#2D2833
chat.slashCommandBackground#61A1DD1A
chat.slashCommandForeground#61A1DD
commandCenter.activeBackground#241E2E
commandCenter.activeBorder#61A1DD
commandCenter.activeForeground#EEEAF0
commandCenter.background#19131E
commandCenter.border#2D2833
commandCenter.foreground#EEEAF0
commandCenter.inactiveBorder#2D2833
commandCenter.inactiveForeground#A597B1
debugConsole.background#110D14
debugConsole.errorForeground#F27ABA
debugConsole.foreground#EEEAF0
debugConsole.infoForeground#4AD0BC
debugConsole.sourceForeground#A597B1
debugConsole.warningForeground#E89A5A
debugConsoleInputIcon.foreground#61A1DD
debugIcon.breakpointCurrentStackframeForeground#E8B85A
debugIcon.breakpointDisabledForeground#A597B180
debugIcon.breakpointForeground#F27ABA
debugIcon.breakpointStackframeForeground#4AD0BC
debugIcon.breakpointUnverifiedForeground#E89A5A
debugIcon.continueForeground#4AD0BC
debugIcon.disconnectForeground#F27ABA
debugIcon.pauseForeground#E8B85A
debugIcon.restartForeground#4AD0BC
debugIcon.startForeground#4AD0BC
debugIcon.stepBackForeground#61A1DD
debugIcon.stepIntoForeground#61A1DD
debugIcon.stepOutForeground#61A1DD
debugIcon.stepOverForeground#61A1DD
debugIcon.stopForeground#F27ABA
debugTokenExpression.boolean#E8B85A
debugTokenExpression.error#F27ABA
debugTokenExpression.name#EEEAF0
debugTokenExpression.number#ED75B5
debugTokenExpression.string#E89A5A
debugTokenExpression.value#E89A5A
debugToolBar.background#19131E
debugToolBar.border#2D2833
debugView.stateLabelForeground#61A1DD
debugView.valueChangedHighlight#2A2410
descriptionForeground#A597B1
diffEditor.border#2D2833
diffEditor.insertedTextBackground#0E2622CC
diffEditor.removedTextBackground#2A0E1ECC
disabledForeground#A597B1AA
dropdown.background#110D14
dropdown.border#3C3642
dropdown.foreground#EEEAF0
editor.background#110D14
editor.findMatchBackground#2A2410
editor.findMatchBorder#E8B85A
editor.findMatchHighlightBackground#2A2410CC
editor.foreground#EEEAF0
editor.hoverHighlightBackground#19131E
editor.inactiveSelectionBackground#4A285880
editor.lineHighlightBackground#19131E77
editor.lineHighlightBorder#00000000
editor.selectionBackground#4A2858B3
editor.selectionHighlightBackground#4A285866
editor.selectionHighlightBorder#61A1DD4D
editor.wordHighlightBackground#61A1DD1A
editor.wordHighlightStrongBackground#61A1DD2E
editorActionList.background#110D14
editorActionList.focusBackground#241E2E
editorActionList.focusForeground#EEEAF0
editorActionList.foreground#EEEAF0
editorAI.background#61A1DD15
editorAI.border#61A1DD4D
editorAI.foreground#61A1DD
editorBracketHighlight.foreground1#61A1DD
editorBracketHighlight.foreground2#4AD0BC
editorBracketHighlight.foreground3#E8B85A
editorBracketHighlight.foreground4#ED75B5
editorBracketHighlight.foreground5#4AD0BC
editorBracketHighlight.foreground6#E89A5A
editorBracketMatch.background#241E2E
editorBracketMatch.border#61A1DD
editorCursor.foreground#61A1DD
editorError.foreground#F27ABA
editorGhostText.background#00000000
editorGhostText.border#00000000
editorGhostText.foreground#A597B1CC
editorGroup.border#2D2833
editorGroupHeader.noTabsBackground#110D14
editorGroupHeader.tabsBackground#19131E
editorGroupHeader.tabsBorder#2D2833
editorHint.foreground#4AD0BC
editorHoverWidget.background#110D14
editorHoverWidget.border#3C3642
editorHoverWidget.foreground#EEEAF0
editorHoverWidget.statusBarBackground#19131E
editorIndentGuide.activeBackground#61A1DD
editorIndentGuide.activeBackground1#61A1DD
editorIndentGuide.activeBackground2#4AD0BC
editorIndentGuide.activeBackground3#E8B85A
editorIndentGuide.activeBackground4#ED75B5
editorIndentGuide.activeBackground5#4AD0BC
editorIndentGuide.activeBackground6#E89A5A
editorIndentGuide.background#2D2833
editorIndentGuide.background1#61A1DD25
editorIndentGuide.background2#4AD0BC25
editorIndentGuide.background3#E8B85A25
editorIndentGuide.background4#ED75B525
editorIndentGuide.background5#4AD0BC25
editorIndentGuide.background6#E89A5A25
editorInfo.foreground#61A1DD
editorInlayHint.background#241E2E99
editorInlayHint.foreground#A597B1
editorInlayHint.parameterForeground#E8B85A
editorInlayHint.typeForeground#4AD0BC
editorLineNumber.activeForeground#61A1DD
editorLineNumber.foreground#A597B199
editorLink.activeForeground#61A1DD
editorStickyScroll.background#19131E
editorStickyScroll.border#2D2833
editorStickyScroll.shadow#00000044
editorStickyScrollHover.background#241E2E
editorSuggestWidget.background#110D14
editorSuggestWidget.border#3C3642
editorSuggestWidget.focusHighlightForeground#61A1DD
editorSuggestWidget.foreground#EEEAF0
editorSuggestWidget.highlightForeground#61A1DD
editorSuggestWidget.selectedBackground#241E2E
editorSuggestWidget.selectedForeground#EEEAF0
editorSuggestWidget.selectedIconForeground#61A1DD
editorWarning.foreground#E89A5A
editorWidget.background#110D14
editorWidget.border#3C3642
editorWidget.foreground#EEEAF0
editorWidget.resizeBorder#61A1DD
errorForeground#F27ABA
focusBorder#61A1DD
foreground#EEEAF0
gitDecoration.addedResourceForeground#4AD0BC
gitDecoration.conflictingResourceForeground#E89A5A
gitDecoration.deletedResourceForeground#F27ABA
gitDecoration.ignoredResourceForeground#A597B188
gitDecoration.modifiedResourceForeground#E8B85A
gitDecoration.untrackedResourceForeground#4AD0BC
icon.foreground#EEEAF0
inlineChat.background#110D14
inlineChat.border#3C3642
inlineChat.regionHighlight#61A1DD1A
inlineChat.shadow#00000055
inlineChatDiff.inserted#0E2622CC
inlineChatDiff.removed#2A0E1ECC
inlineChatInput.background#19131E
inlineChatInput.border#2D2833
inlineChatInput.focusBorder#61A1DD
inlineChatInput.placeholderForeground#A597B1
inlineEdit.border#3C3642
inlineEdit.indicator.background#61A1DD
inlineEdit.indicator.border#7AB5E8
inlineEdit.indicator.foreground#FFFFFF
inlineEdit.modifiedBackground#0E262280
inlineEdit.originalBackground#2A0E1E80
input.background#110D14
input.border#3C3642
input.foreground#EEEAF0
input.placeholderForeground#A597B1
inputOption.activeBorder#61A1DD
inputValidation.errorBackground#2A0E1E
inputValidation.errorBorder#F27ABA
inputValidation.infoBackground#0E2622
inputValidation.infoBorder#4AD0BC
inputValidation.warningBackground#2A1A0E
inputValidation.warningBorder#E89A5A
interactive.activeCodeBorder#61A1DD
interactive.inactiveCodeBorder#2D2833
interactive.requestBorder#2D2833
keybindingLabel.background#19131E
keybindingLabel.border#3C3642
keybindingLabel.bottomBorder#3C3642
keybindingLabel.foreground#EEEAF0
list.activeSelectionBackground#241E2E
list.activeSelectionForeground#EEEAF0
list.activeSelectionIconForeground#61A1DD
list.errorForeground#F27ABA
list.focusBackground#241E2E
list.focusForeground#EEEAF0
list.focusHighlightForeground#61A1DD
list.highlightForeground#61A1DD
list.hoverBackground#241E2E66
list.hoverForeground#EEEAF0
list.inactiveFocusBackground#4A285855
list.inactiveSelectionBackground#4A285877
list.inactiveSelectionForeground#EEEAF0
list.inactiveSelectionIconForeground#61A1DD
list.warningForeground#E89A5A
menu.background#110D14
menu.border#3C3642
menu.foreground#EEEAF0
menu.selectionBackground#241E2E
menu.selectionBorder#61A1DD
menu.selectionForeground#EEEAF0
menu.separatorBackground#2D2833
menubar.selectionBackground#241E2E
menubar.selectionForeground#EEEAF0
multiDiffEditor.background#110D14
multiDiffEditor.border#2D2833
multiDiffEditor.headerBackground#19131E
notificationCenter.border#3C3642
notifications.background#110D14
notifications.border#2D2833
notifications.foreground#EEEAF0
notificationToast.border#3C3642
outputView.background#110D14
outputViewStickyScroll.background#19131E
panel.background#1D1823
panel.border#2D2833
panelSection.border#2D2833
panelSection.dropBackground#241E2E
panelSectionHeader.background#19131E
panelSectionHeader.border#2D2833
panelSectionHeader.foreground#EEEAF0
panelTitle.activeBorder#61A1DD
panelTitle.activeForeground#EEEAF0
panelTitle.inactiveForeground#A597B1
peekView.border#61A1DD
peekViewEditor.background#19131E
peekViewEditor.matchHighlightBackground#2A2410
peekViewResult.background#1D1823
peekViewResult.matchHighlightBackground#2A2410
peekViewResult.selectionBackground#241E2E
peekViewTitle.background#19131E
problemsErrorIcon.foreground#F27ABA
problemsInfoIcon.foreground#61A1DD
problemsWarningIcon.foreground#E89A5A
quickInput.background#110D14
quickInput.foreground#EEEAF0
quickInputList.focusBackground#241E2E
searchEditor.findMatchBackground#2A2410
searchEditor.findMatchBorder#E8B85A
selection.background#241E2E
settings.focusedRowBackground#241E2E50
settings.headerForeground#61A1DD
settings.modifiedItemIndicator#61A1DD
settings.rowHoverBackground#241E2E25
sideBar.background#1D1823
sideBar.border#2D2833
sideBar.foreground#EEEAF0
sideBarSectionHeader.background#19131E
sideBarSectionHeader.border#2D2833
sideBarSectionHeader.foreground#EEEAF0
sideBarTitle.foreground#61A1DD
statusBar.background#8C0064
statusBar.border#8C0064
statusBar.debuggingBackground#2A1A0E
statusBar.debuggingForeground#E89A5A
statusBar.foreground#FFFFFF
statusBar.noFolderBackground#8C0064
statusBar.noFolderForeground#FFFFFF
statusBarItem.hoverBackground#FFFFFF25
statusBarItem.remoteBackground#00000030
statusBarItem.remoteForeground#FFFFFF
symbolIcon.arrayForeground#EEEAF0
symbolIcon.booleanForeground#ED75B5
symbolIcon.classForeground#4AD0BC
symbolIcon.colorForeground#ED75B5
symbolIcon.constantForeground#E8B85A
symbolIcon.eventForeground#ED75B5
symbolIcon.fieldForeground#EEEAF0
symbolIcon.fileForeground#EEEAF0
symbolIcon.folderForeground#61A1DD
symbolIcon.functionForeground#ED75B5
symbolIcon.interfaceForeground#4AD0BC
symbolIcon.keyForeground#61A1DD
symbolIcon.keywordForeground#61A1DD
symbolIcon.methodForeground#ED75B5
symbolIcon.moduleForeground#61A1DD
symbolIcon.nullForeground#E8B85A
symbolIcon.numberForeground#ED75B5
symbolIcon.objectForeground#4AD0BC
symbolIcon.operatorForeground#EEEAF0
symbolIcon.packageForeground#61A1DD
symbolIcon.propertyForeground#EEEAF0
symbolIcon.snippetForeground#61A1DD
symbolIcon.stringForeground#E89A5A
symbolIcon.structForeground#4AD0BC
symbolIcon.textForeground#EEEAF0
symbolIcon.typeParameterForeground#4AD0BC
symbolIcon.unitForeground#E8B85A
symbolIcon.variableForeground#EEEAF0
tab.activeBackground#110D14
tab.activeBorder#61A1DD
tab.activeBorderTop#61A1DD
tab.activeForeground#EEEAF0
tab.border#2D2833
tab.hoverBackground#110D14
tab.hoverForeground#EEEAF0
tab.inactiveBackground#19131E
tab.inactiveForeground#A597B1
tab.unfocusedActiveBackground#110D14
tab.unfocusedActiveForeground#EEEAF0
tab.unfocusedInactiveForeground#A597B1
terminal.ansiBlack#19131E
terminal.ansiBlue#61A1DD
terminal.ansiBrightBlack#1D1823
terminal.ansiBrightBlue#7AB5E8
terminal.ansiBrightCyan#4AD0BC
terminal.ansiBrightGreen#4AD0BC
terminal.ansiBrightMagenta#ED75B5
terminal.ansiBrightRed#F27ABA
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#E8B85A
terminal.ansiCyan#4AD0BC
terminal.ansiGreen#4AD0BC
terminal.ansiMagenta#ED75B5
terminal.ansiRed#F27ABA
terminal.ansiWhite#EEEAF0
terminal.ansiYellow#E8B85A
terminal.background#110D14
terminal.border#2D2833
terminal.findMatchBackground#2A2410
terminal.findMatchBorder#E8B85A
terminal.findMatchHighlightBackground#2A2410CC
terminal.foreground#EEEAF0
terminal.hoverHighlightBackground#19131E
terminal.inactiveSelectionBackground#4A285855
terminal.selectionBackground#4A2858B3
terminal.tab.activeBorder#61A1DD
terminalCommandDecoration.defaultBackground#61A1DD80
terminalCommandDecoration.errorBackground#F27ABA
terminalCommandDecoration.successBackground#4AD0BC
terminalCursor.background#110D14
terminalCursor.foreground#61A1DD
terminalOverviewRuler.cursorForeground#61A1DD
terminalOverviewRuler.findMatchForeground#E8B85A
titleBar.activeBackground#1D1823
titleBar.activeForeground#EEEAF0
titleBar.border#2D2833
titleBar.inactiveBackground#19131E
titleBar.inactiveForeground#A597B1
walkThrough.embeddedEditorBackground#19131E
welcomePage.background#110D14
welcomePage.buttonBackground#19131E
welcomePage.buttonHoverBackground#241E2E
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, comment.line, comment.line.double-slash, comment.line.triple-slash, comment.line.number-sign, comment.line.dashes, comment.line.character, comment.line.percentage, comment.block, comment.block.documentation, punctuation.definition.comment, string.comment, string.quoted.docstring, string.quoted.docstring.multi, string.quoted.docstring.multi.python, string.quoted.docstring.single.python, string.quoted.double.block.python, string.quoted.single.block.python, source.kotlin comment, source.kotlin comment.line, source.kotlin comment.block, source.kotlin comment.block.documentation, source.swift comment, source.go comment, source.rust comment, source.dart comment, source.java comment, source.ts comment, source.tsx comment, source.js comment, source.jsx comment, source.python comment, source.sql comment, source.shell comment, source.yaml comment	#A597B1	italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete, storage, storage.type, storage.modifier	#61A1DD	bold
entity.name.function, support.function, meta.function-call, variable.function	#ED75B5	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.enum, entity.name.interface, support.class, support.type, entity.other.inherited-class	#4AD0BC	bold
constant, constant.language, constant.numeric, support.constant	#E8B85A	—
variable, variable.other, variable.other.readwrite, variable.other.property	#EEEAF0	—
keyword.operator, punctuation, punctuation.accessor, punctuation.separator	#EEEAF0	—
invalid, invalid.illegal, invalid.deprecated	#F27ABA	bold underline
constant.other.color, constant.other.color.rgb-value, constant.other.uuid, support.constant.color, keyword.other.dotenv, source.env variable.other.key, source.dotenv variable.other.key	#F27ABA	—
string.regexp, string.regexp constant.character.escape, constant.other.character-class.regexp	#F27ABA	—
source.python string.quoted, source.js string.quoted, source.jsx string.quoted, source.ts string.quoted, source.tsx string.quoted, source.rust string.quoted, source.go string.quoted, source.kotlin string.quoted, source.swift string.quoted, source.dart string.quoted, source.sql string.quoted	#E89A5A	—
source.js string.template, source.ts string.template, source.tsx string.template, source.python string.interpolated	#E89A5A	—
source.python variable.parameter, source.js variable.parameter, source.jsx variable.parameter, source.ts variable.parameter, source.tsx variable.parameter, source.rust variable.parameter, source.go variable.parameter, source.kotlin variable.parameter, source.swift variable.parameter, source.dart variable.parameter	#E8B85A	—
source.ts entity.name.type, source.tsx entity.name.type, source.rust entity.name.type, source.go entity.name.type, source.kotlin entity.name.type, source.swift entity.name.type, source.dart entity.name.type, source.python entity.name.type.class	#4AD0BC	bold
source.python entity.name.function.decorator, source.python variable.language.special.self, source.python variable.language.special.cls	#7AB5E8	italic
source.python support.function.magic	#ED75B5	bold
source.jsx entity.name.tag, source.tsx entity.name.tag, source.jsx support.class.component, source.tsx support.class.component	#4AD0BC	bold
source.jsx entity.other.attribute-name, source.tsx entity.other.attribute-name	#E8B85A	—
source.sql keyword.other.DML, source.sql keyword.other.DDL, source.sql keyword.other.order, source.sql keyword.other.create	#61A1DD	bold
source.sql constant.other.database-name, source.sql constant.other.table-name	#4AD0BC	—
source.rust storage.modifier.lifetime, source.rust entity.name.function.macro	#ED75B5	bold
source.go entity.name.package, source.go keyword.channel	#61A1DD	bold
source.kotlin storage.type.annotation, source.swift storage.type.annotation, source.swift keyword.other.declaration-specifier	#ED75B5	—
source.dart storage.type.annotation, source.dart support.class.flutter	#4AD0BC	bold
source.json support.type.property-name	#4AD0BC	bold
source.yaml entity.name.tag	#4AD0BC	bold
source.toml entity.other.attribute-name.table, source.toml keyword.key	#4AD0BC	bold
source.ini entity.name.section, source.ini keyword.other.definition	#4AD0BC	bold
source.env variable.other.key, source.dotenv variable.other.key, source.env keyword.other	#F27ABA	bold
text.html.markdown, text.plain, meta.paragraph.markdown	#EEEAF0	—
text.html.markdown markup.heading, text.html.markdown entity.name.section, text.html.markdown punctuation.definition.heading	#61A1DD	bold
text.html.markdown markup.inline.raw, text.html.markdown markup.fenced_code	#4AD0BC	—
text.html.markdown markup.underline.link, text.html.markdown string.other.link	#61A1DD	underline
text.html.markdown markup.quote	#A597B1	italic
text.html entity.name.tag, text.xml entity.name.tag	#61A1DD	bold
text.html entity.other.attribute-name, text.xml entity.other.attribute-name	#ED75B5	—
log.error, log.fatal, log.critical, log.exception	#F27ABA	bold
log.warning, log.warn	#E89A5A	bold
log.info, log.notice	#4AD0BC	bold
log.debug, log.trace	#E8B85A	—
log.date, log.timestamp	#A597B1	—