Alien Blood Contrast

Name: Alien Blood Contrast
Author: kozcode

Publisher: kozcodeThemes in package: 10

Dark themes combining Alien Blood UI with Solarized Dark syntax highlighting, in standard and high contrast, each with optional status bar accents to tell windows apart

Open in VS Code GitHub

Color themes

VS Code preview

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

Alien Blood Contrast — Alien Blood Contrast High Blue

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.background#0f1610
activityBar.border#37793f
activityBar.dropBorder#c2d8ce
activityBar.foreground#4fd93c
activityBar.inactiveForeground#37793f
activityBarBadge.background#2f7e25
activityBarBadge.foreground#fff
badge.background#2f7e25
button.background#0f1610
button.border#37793f
button.foreground#c2d8ce
button.secondaryBackground#000e07
button.secondaryForeground#c2d8ce
debugConsole.errorForeground#f0554e
debugConsole.infoForeground#4fd93c
debugConsole.sourceForeground#c2d8ce
debugConsole.warningForeground#c3db3a
debugIcon.breakpointCurrentStackframeForeground#ffa62b
debugIcon.breakpointDisabledForeground#37793f
debugIcon.breakpointForeground#18e000
debugIcon.breakpointStackframeForeground#00e0c4
debugIcon.continueForeground#00aae0
debugIcon.disconnectForeground#00aae0
debugIcon.pauseForeground#00aae0
debugIcon.restartForeground#4fd93c
debugIcon.startForeground#4fd93c
debugIcon.stepBackForeground#00aae0
debugIcon.stepIntoForeground#00aae0
debugIcon.stepOutForeground#00aae0
debugIcon.stepOverForeground#00aae0
debugIcon.stopForeground#f0554e
debugTokenExpression.boolean#18e000
debugTokenExpression.error#f0554e
debugTokenExpression.name#4fcfc2
debugTokenExpression.number#00e0c4
debugTokenExpression.string#c2d8ce
debugToolBar.background#000e07
debugToolBar.border#0f1610
debugView.stateLabelBackground#112616
debugView.stateLabelForeground#18e000
debugView.valueChangedHighlight#bde00080
diffEditor.diagonalFill#c2d8ce50
diffEditor.insertedTextBackground#18e00010
diffEditor.removedTextBackground#7f2b2735
dropdown.background#0f1610
editor.background#0f1610
editor.findMatchBackground#be0c0350
editor.findMatchHighlightBackground#18e00020
editor.focusedStackFrameHighlightBackground#47587f20
editor.foreground#d3dede
editor.lineHighlightBackground#1d412520
editor.lineHighlightBorder#ffffff00
editor.selectionBackground#1d412577
editor.snippetFinalTabstopHighlightBackground#1d412544
editor.snippetTabstopHighlightBackground#1d412544
editor.stackFrameHighlightBackground#e0d10013
editor.wordHighlightBackground#3c481260
editor.wordHighlightStrongBackground#647d7550
editorBracketHighlight.foreground1#18e000
editorBracketHighlight.foreground2#ffa62b
editorBracketHighlight.foreground3#bde000
editorBracketHighlight.foreground4#73fa91
editorBracketHighlight.foreground5#00e0c4
editorCursor.background#0f1610
editorCursor.foreground#73fa91
editorError.foreground#f0554e
editorGroup.border#37793f
editorGroupHeader.tabsBackground#000e07
editorLineNumber.activeForeground#e2f0e8
editorLineNumber.foreground#6cae7a
editorOverviewRuler.addedForeground#ffa62b
editorOverviewRuler.deletedForeground#6e8526
editorOverviewRuler.errorForeground#f0554e
editorOverviewRuler.infoForeground#c2d8ce
editorOverviewRuler.modifiedForeground#73fa9180
editorOverviewRuler.warningForeground#c3db3a
editorWarning.foreground#c3db3a
editorWidget.background#000e07
editorWidget.border#37793f
editorWidget.foreground#c2d8ce
errorForeground#f0554e
focusBorder#37793f
gitDecoration.conflictingResourceForeground#f0554e
gitDecoration.modifiedResourceForeground#c3db3a
gitDecoration.untrackedResourceForeground#4fd93c
icon.foreground#c2d8ce
input.background#0f1610
input.foreground#c2d8ce
list.activeSelectionBackground#0f1610
list.activeSelectionForeground#c2d8ce
list.errorForeground#f0554e
list.focusBackground#11261698
list.focusHighlightForeground#4fd93c
list.focusOutline#37793f
list.highlightForeground#4fd93c
list.hoverBackground#0f1610
list.inactiveSelectionBackground#11261698
list.warningForeground#c3db3a
menu.background#000e07
menu.foreground#c2d8ce
menu.separatorBackground#0f1610
minimap.errorHighlight#f0554e
minimap.findMatchHighlight#18e00060
minimap.selectionHighlight#37793f
minimap.selectionOccurrenceHighlight#bde00070
minimap.warningHighlight#c3db3a
minimapGutter.addedBackground#e08009
minimapGutter.deletedBackground#3c4812
minimapGutter.modifiedBackground#73fa9190
notificationLink.foreground#4fd93c
notificationsErrorIcon.foreground#f0554e
notificationsInfoIcon.foreground#4fbadd
notificationsWarningIcon.foreground#c3db3a
notificationToast.border#37793f
panel.background#000e07
panel.border#37793f
panelSection.border#37793f
panelSectionHeader.background#0f1610
panelSectionHeader.foreground#c2d8ce
panelTitle.activeBorder#37793f
panelTitle.activeForeground#c2d8ce
peekView.border#4fd93c
peekViewEditor.background#000e07
peekViewEditor.matchHighlightBackground#1d4125
peekViewResult.background#000e07
peekViewResult.fileForeground#4fd93c
peekViewResult.lineForeground#c2d8ce
peekViewResult.matchHighlightBackground#1d4125
peekViewResult.selectionBackground#0f1610
peekViewTitle.background#000e07
peekViewTitleDescription.foreground#4fd93c
peekViewTitleLabel.foreground#18e000
problemsErrorIcon.foreground#f0554e
problemsInfoIcon.foreground#4fbadd
problemsWarningIcon.foreground#c3db3a
scrollbarSlider.activeBackground#717f24bb
scrollbarSlider.background#11261698
scrollbarSlider.hoverBackground#1d4125bb
selection.background#18e00020
sideBar.background#000e07
sideBar.border#37793f
sideBar.foreground#c2d8ce
sideBarSectionHeader.background#0f1610
sideBarTitle.foreground#c2d8ce
statusBar.background#2f6a7f
statusBar.border#2f6a7f
statusBar.debuggingBackground#2f6a7f
statusBar.debuggingBorder#2f6a7f
statusBar.debuggingForeground#f2f8f5
statusBar.foreground#f2f8f5
statusBar.noFolderBackground#2f6a7f
statusBar.noFolderBorder#2f6a7f
statusBar.noFolderForeground#f2f8f5
statusBarItem.activeBackground#ffffff3d
statusBarItem.errorBackground#7f2b27
statusBarItem.hoverBackground#ffffff26
statusBarItem.prominentBackground#ffffff30
statusBarItem.prominentHoverBackground#ffffff45
statusBarItem.remoteBackground#2f6a7f
statusBarItem.remoteForeground#f2f8f5
statusBarItem.warningBackground#bde000
tab.activeBackground#11261698
tab.activeBorder#37793f
tab.activeForeground#c2d8ce
tab.border#37793f
tab.inactiveBackground#0f1610
tab.inactiveForeground#c2d8ce
terminal.ansiBlack#112616
terminal.ansiBlue#4fbadd
terminal.ansiBrightBlack#6e8526
terminal.ansiBrightBlue#00aae0
terminal.ansiBrightCyan#00e0c4
terminal.ansiBrightGreen#c3db3a
terminal.ansiBrightMagenta#5f8dff
terminal.ansiBrightRed#ffa62b
terminal.ansiBrightWhite#f2f8f5
terminal.ansiBrightYellow#bde000
terminal.ansiCyan#4fcfc2
terminal.ansiGreen#4fd93c
terminal.ansiMagenta#8b9ae0
terminal.ansiRed#ffa62b
terminal.ansiWhite#d6e6de
terminal.ansiYellow#c3db3a
terminal.background#000e07
terminal.foreground#d6e6de
terminal.selectionBackground#1d4125
terminalCursor.foreground#73fa91
textLink.activeForeground#18e000
textLink.foreground#4fd93c
titleBar.activeBackground#0f1610
titleBar.activeForeground#c2d8ce
titleBar.border#37793f
titleBar.inactiveBackground#0f1610
widget.shadow#000e07

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d3dede	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#d3dede	—
comment	#93a8ae	italic
string	#4fdcd0	—
string.regexp	#ff5f58	—
constant.numeric	#ff6bad	—
variable.language, variable.other	#63bdff	—
keyword	#c3dd1a	—
storage	#dce6e6	bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution	#ff7b30
entity.name.function	#63bdff	—
punctuation.definition.variable	#c3dd1a	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#ff5f58	—
constant.language, meta.preprocessor	#f0bd20	—
support.function.construct, keyword.other.new	#ff7b30	—
constant.character, constant.other	#ff7b30	—
entity.other.inherited-class, punctuation.separator.namespace.ruby	#a3a8f5	—
variable.parameter	—	—
entity.name.tag	#63bdff	—
punctuation.definition.tag	#93a8ae	—
entity.other.attribute-name	#dce6e6	—
support.function	#63bdff	—
punctuation.separator.continuation	#ff5f58	—
support.constant, support.variable	—	—
support.type, support.class	#c3dd1a	—
support.type.exception	#ff7b30	—
support.other.variable	—	—
invalid	#ff5f58	—
meta.diff, meta.diff.header	#63bdff	italic
markup.deleted	#ff5f58
markup.changed	#ff7b30
markup.inserted	#c3dd1a	—
markup.quote	#c3dd1a	—
markup.list	#f0bd20	—
markup.bold, markup.italic	#ff6bad	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#4fdcd0
markup.heading	#63bdff	bold
markup.heading.setext	#63bdff

VS Code preview

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

Alien Blood Contrast — Alien Blood Contrast High Green

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.background#0f1610
activityBar.border#37793f
activityBar.dropBorder#c2d8ce
activityBar.foreground#4fd93c
activityBar.inactiveForeground#37793f
activityBarBadge.background#2f7e25
activityBarBadge.foreground#fff
badge.background#2f7e25
button.background#0f1610
button.border#37793f
button.foreground#c2d8ce
button.secondaryBackground#000e07
button.secondaryForeground#c2d8ce
debugConsole.errorForeground#f0554e
debugConsole.infoForeground#4fd93c
debugConsole.sourceForeground#c2d8ce
debugConsole.warningForeground#c3db3a
debugIcon.breakpointCurrentStackframeForeground#ffa62b
debugIcon.breakpointDisabledForeground#37793f
debugIcon.breakpointForeground#18e000
debugIcon.breakpointStackframeForeground#00e0c4
debugIcon.continueForeground#00aae0
debugIcon.disconnectForeground#00aae0
debugIcon.pauseForeground#00aae0
debugIcon.restartForeground#4fd93c
debugIcon.startForeground#4fd93c
debugIcon.stepBackForeground#00aae0
debugIcon.stepIntoForeground#00aae0
debugIcon.stepOutForeground#00aae0
debugIcon.stepOverForeground#00aae0
debugIcon.stopForeground#f0554e
debugTokenExpression.boolean#18e000
debugTokenExpression.error#f0554e
debugTokenExpression.name#4fcfc2
debugTokenExpression.number#00e0c4
debugTokenExpression.string#c2d8ce
debugToolBar.background#000e07
debugToolBar.border#0f1610
debugView.stateLabelBackground#112616
debugView.stateLabelForeground#18e000
debugView.valueChangedHighlight#bde00080
diffEditor.diagonalFill#c2d8ce50
diffEditor.insertedTextBackground#18e00010
diffEditor.removedTextBackground#7f2b2735
dropdown.background#0f1610
editor.background#0f1610
editor.findMatchBackground#be0c0350
editor.findMatchHighlightBackground#18e00020
editor.focusedStackFrameHighlightBackground#47587f20
editor.foreground#d3dede
editor.lineHighlightBackground#1d412520
editor.lineHighlightBorder#ffffff00
editor.selectionBackground#1d412577
editor.snippetFinalTabstopHighlightBackground#1d412544
editor.snippetTabstopHighlightBackground#1d412544
editor.stackFrameHighlightBackground#e0d10013
editor.wordHighlightBackground#3c481260
editor.wordHighlightStrongBackground#647d7550
editorBracketHighlight.foreground1#18e000
editorBracketHighlight.foreground2#ffa62b
editorBracketHighlight.foreground3#bde000
editorBracketHighlight.foreground4#73fa91
editorBracketHighlight.foreground5#00e0c4
editorCursor.background#0f1610
editorCursor.foreground#73fa91
editorError.foreground#f0554e
editorGroup.border#37793f
editorGroupHeader.tabsBackground#000e07
editorLineNumber.activeForeground#e2f0e8
editorLineNumber.foreground#6cae7a
editorOverviewRuler.addedForeground#ffa62b
editorOverviewRuler.deletedForeground#6e8526
editorOverviewRuler.errorForeground#f0554e
editorOverviewRuler.infoForeground#c2d8ce
editorOverviewRuler.modifiedForeground#73fa9180
editorOverviewRuler.warningForeground#c3db3a
editorWarning.foreground#c3db3a
editorWidget.background#000e07
editorWidget.border#37793f
editorWidget.foreground#c2d8ce
errorForeground#f0554e
focusBorder#37793f
gitDecoration.conflictingResourceForeground#f0554e
gitDecoration.modifiedResourceForeground#c3db3a
gitDecoration.untrackedResourceForeground#4fd93c
icon.foreground#c2d8ce
input.background#0f1610
input.foreground#c2d8ce
list.activeSelectionBackground#0f1610
list.activeSelectionForeground#c2d8ce
list.errorForeground#f0554e
list.focusBackground#11261698
list.focusHighlightForeground#4fd93c
list.focusOutline#37793f
list.highlightForeground#4fd93c
list.hoverBackground#0f1610
list.inactiveSelectionBackground#11261698
list.warningForeground#c3db3a
menu.background#000e07
menu.foreground#c2d8ce
menu.separatorBackground#0f1610
minimap.errorHighlight#f0554e
minimap.findMatchHighlight#18e00060
minimap.selectionHighlight#37793f
minimap.selectionOccurrenceHighlight#bde00070
minimap.warningHighlight#c3db3a
minimapGutter.addedBackground#e08009
minimapGutter.deletedBackground#3c4812
minimapGutter.modifiedBackground#73fa9190
notificationLink.foreground#4fd93c
notificationsErrorIcon.foreground#f0554e
notificationsInfoIcon.foreground#4fbadd
notificationsWarningIcon.foreground#c3db3a
notificationToast.border#37793f
panel.background#000e07
panel.border#37793f
panelSection.border#37793f
panelSectionHeader.background#0f1610
panelSectionHeader.foreground#c2d8ce
panelTitle.activeBorder#37793f
panelTitle.activeForeground#c2d8ce
peekView.border#4fd93c
peekViewEditor.background#000e07
peekViewEditor.matchHighlightBackground#1d4125
peekViewResult.background#000e07
peekViewResult.fileForeground#4fd93c
peekViewResult.lineForeground#c2d8ce
peekViewResult.matchHighlightBackground#1d4125
peekViewResult.selectionBackground#0f1610
peekViewTitle.background#000e07
peekViewTitleDescription.foreground#4fd93c
peekViewTitleLabel.foreground#18e000
problemsErrorIcon.foreground#f0554e
problemsInfoIcon.foreground#4fbadd
problemsWarningIcon.foreground#c3db3a
scrollbarSlider.activeBackground#717f24bb
scrollbarSlider.background#11261698
scrollbarSlider.hoverBackground#1d4125bb
selection.background#18e00020
sideBar.background#000e07
sideBar.border#37793f
sideBar.foreground#c2d8ce
sideBarSectionHeader.background#0f1610
sideBarTitle.foreground#c2d8ce
statusBar.background#2f7e25
statusBar.border#2f7e25
statusBar.debuggingBackground#2f7e25
statusBar.debuggingBorder#2f7e25
statusBar.debuggingForeground#f2f8f5
statusBar.foreground#f2f8f5
statusBar.noFolderBackground#2f7e25
statusBar.noFolderBorder#2f7e25
statusBar.noFolderForeground#f2f8f5
statusBarItem.activeBackground#ffffff3d
statusBarItem.errorBackground#7f2b27
statusBarItem.hoverBackground#ffffff26
statusBarItem.prominentBackground#ffffff30
statusBarItem.prominentHoverBackground#ffffff45
statusBarItem.remoteBackground#2f7e25
statusBarItem.remoteForeground#f2f8f5
statusBarItem.warningBackground#bde000
tab.activeBackground#11261698
tab.activeBorder#37793f
tab.activeForeground#c2d8ce
tab.border#37793f
tab.inactiveBackground#0f1610
tab.inactiveForeground#c2d8ce
terminal.ansiBlack#112616
terminal.ansiBlue#4fbadd
terminal.ansiBrightBlack#6e8526
terminal.ansiBrightBlue#00aae0
terminal.ansiBrightCyan#00e0c4
terminal.ansiBrightGreen#c3db3a
terminal.ansiBrightMagenta#5f8dff
terminal.ansiBrightRed#ffa62b
terminal.ansiBrightWhite#f2f8f5
terminal.ansiBrightYellow#bde000
terminal.ansiCyan#4fcfc2
terminal.ansiGreen#4fd93c
terminal.ansiMagenta#8b9ae0
terminal.ansiRed#ffa62b
terminal.ansiWhite#d6e6de
terminal.ansiYellow#c3db3a
terminal.background#000e07
terminal.foreground#d6e6de
terminal.selectionBackground#1d4125
terminalCursor.foreground#73fa91
textLink.activeForeground#18e000
textLink.foreground#4fd93c
titleBar.activeBackground#0f1610
titleBar.activeForeground#c2d8ce
titleBar.border#37793f
titleBar.inactiveBackground#0f1610
widget.shadow#000e07

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d3dede	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#d3dede	—
comment	#93a8ae	italic
string	#4fdcd0	—
string.regexp	#ff5f58	—
constant.numeric	#ff6bad	—
variable.language, variable.other	#63bdff	—
keyword	#c3dd1a	—
storage	#dce6e6	bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution	#ff7b30
entity.name.function	#63bdff	—
punctuation.definition.variable	#c3dd1a	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#ff5f58	—
constant.language, meta.preprocessor	#f0bd20	—
support.function.construct, keyword.other.new	#ff7b30	—
constant.character, constant.other	#ff7b30	—
entity.other.inherited-class, punctuation.separator.namespace.ruby	#a3a8f5	—
variable.parameter	—	—
entity.name.tag	#63bdff	—
punctuation.definition.tag	#93a8ae	—
entity.other.attribute-name	#dce6e6	—
support.function	#63bdff	—
punctuation.separator.continuation	#ff5f58	—
support.constant, support.variable	—	—
support.type, support.class	#c3dd1a	—
support.type.exception	#ff7b30	—
support.other.variable	—	—
invalid	#ff5f58	—
meta.diff, meta.diff.header	#63bdff	italic
markup.deleted	#ff5f58
markup.changed	#ff7b30
markup.inserted	#c3dd1a	—
markup.quote	#c3dd1a	—
markup.list	#f0bd20	—
markup.bold, markup.italic	#ff6bad	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#4fdcd0
markup.heading	#63bdff	bold
markup.heading.setext	#63bdff

VS Code preview

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

Alien Blood Contrast — Alien Blood Contrast High Orange

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.background#0f1610
activityBar.border#37793f
activityBar.dropBorder#c2d8ce
activityBar.foreground#4fd93c
activityBar.inactiveForeground#37793f
activityBarBadge.background#2f7e25
activityBarBadge.foreground#fff
badge.background#2f7e25
button.background#0f1610
button.border#37793f
button.foreground#c2d8ce
button.secondaryBackground#000e07
button.secondaryForeground#c2d8ce
debugConsole.errorForeground#f0554e
debugConsole.infoForeground#4fd93c
debugConsole.sourceForeground#c2d8ce
debugConsole.warningForeground#c3db3a
debugIcon.breakpointCurrentStackframeForeground#ffa62b
debugIcon.breakpointDisabledForeground#37793f
debugIcon.breakpointForeground#18e000
debugIcon.breakpointStackframeForeground#00e0c4
debugIcon.continueForeground#00aae0
debugIcon.disconnectForeground#00aae0
debugIcon.pauseForeground#00aae0
debugIcon.restartForeground#4fd93c
debugIcon.startForeground#4fd93c
debugIcon.stepBackForeground#00aae0
debugIcon.stepIntoForeground#00aae0
debugIcon.stepOutForeground#00aae0
debugIcon.stepOverForeground#00aae0
debugIcon.stopForeground#f0554e
debugTokenExpression.boolean#18e000
debugTokenExpression.error#f0554e
debugTokenExpression.name#4fcfc2
debugTokenExpression.number#00e0c4
debugTokenExpression.string#c2d8ce
debugToolBar.background#000e07
debugToolBar.border#0f1610
debugView.stateLabelBackground#112616
debugView.stateLabelForeground#18e000
debugView.valueChangedHighlight#bde00080
diffEditor.diagonalFill#c2d8ce50
diffEditor.insertedTextBackground#18e00010
diffEditor.removedTextBackground#7f2b2735
dropdown.background#0f1610
editor.background#0f1610
editor.findMatchBackground#be0c0350
editor.findMatchHighlightBackground#18e00020
editor.focusedStackFrameHighlightBackground#47587f20
editor.foreground#d3dede
editor.lineHighlightBackground#1d412520
editor.lineHighlightBorder#ffffff00
editor.selectionBackground#1d412577
editor.snippetFinalTabstopHighlightBackground#1d412544
editor.snippetTabstopHighlightBackground#1d412544
editor.stackFrameHighlightBackground#e0d10013
editor.wordHighlightBackground#3c481260
editor.wordHighlightStrongBackground#647d7550
editorBracketHighlight.foreground1#18e000
editorBracketHighlight.foreground2#ffa62b
editorBracketHighlight.foreground3#bde000
editorBracketHighlight.foreground4#73fa91
editorBracketHighlight.foreground5#00e0c4
editorCursor.background#0f1610
editorCursor.foreground#73fa91
editorError.foreground#f0554e
editorGroup.border#37793f
editorGroupHeader.tabsBackground#000e07
editorLineNumber.activeForeground#e2f0e8
editorLineNumber.foreground#6cae7a
editorOverviewRuler.addedForeground#ffa62b
editorOverviewRuler.deletedForeground#6e8526
editorOverviewRuler.errorForeground#f0554e
editorOverviewRuler.infoForeground#c2d8ce
editorOverviewRuler.modifiedForeground#73fa9180
editorOverviewRuler.warningForeground#c3db3a
editorWarning.foreground#c3db3a
editorWidget.background#000e07
editorWidget.border#37793f
editorWidget.foreground#c2d8ce
errorForeground#f0554e
focusBorder#37793f
gitDecoration.conflictingResourceForeground#f0554e
gitDecoration.modifiedResourceForeground#c3db3a
gitDecoration.untrackedResourceForeground#4fd93c
icon.foreground#c2d8ce
input.background#0f1610
input.foreground#c2d8ce
list.activeSelectionBackground#0f1610
list.activeSelectionForeground#c2d8ce
list.errorForeground#f0554e
list.focusBackground#11261698
list.focusHighlightForeground#4fd93c
list.focusOutline#37793f
list.highlightForeground#4fd93c
list.hoverBackground#0f1610
list.inactiveSelectionBackground#11261698
list.warningForeground#c3db3a
menu.background#000e07
menu.foreground#c2d8ce
menu.separatorBackground#0f1610
minimap.errorHighlight#f0554e
minimap.findMatchHighlight#18e00060
minimap.selectionHighlight#37793f
minimap.selectionOccurrenceHighlight#bde00070
minimap.warningHighlight#c3db3a
minimapGutter.addedBackground#e08009
minimapGutter.deletedBackground#3c4812
minimapGutter.modifiedBackground#73fa9190
notificationLink.foreground#4fd93c
notificationsErrorIcon.foreground#f0554e
notificationsInfoIcon.foreground#4fbadd
notificationsWarningIcon.foreground#c3db3a
notificationToast.border#37793f
panel.background#000e07
panel.border#37793f
panelSection.border#37793f
panelSectionHeader.background#0f1610
panelSectionHeader.foreground#c2d8ce
panelTitle.activeBorder#37793f
panelTitle.activeForeground#c2d8ce
peekView.border#4fd93c
peekViewEditor.background#000e07
peekViewEditor.matchHighlightBackground#1d4125
peekViewResult.background#000e07
peekViewResult.fileForeground#4fd93c
peekViewResult.lineForeground#c2d8ce
peekViewResult.matchHighlightBackground#1d4125
peekViewResult.selectionBackground#0f1610
peekViewTitle.background#000e07
peekViewTitleDescription.foreground#4fd93c
peekViewTitleLabel.foreground#18e000
problemsErrorIcon.foreground#f0554e
problemsInfoIcon.foreground#4fbadd
problemsWarningIcon.foreground#c3db3a
scrollbarSlider.activeBackground#717f24bb
scrollbarSlider.background#11261698
scrollbarSlider.hoverBackground#1d4125bb
selection.background#18e00020
sideBar.background#000e07
sideBar.border#37793f
sideBar.foreground#c2d8ce
sideBarSectionHeader.background#0f1610
sideBarTitle.foreground#c2d8ce
statusBar.background#e08009
statusBar.border#e08009
statusBar.debuggingBackground#e08009
statusBar.debuggingBorder#e08009
statusBar.debuggingForeground#08120b
statusBar.foreground#08120b
statusBar.noFolderBackground#e08009
statusBar.noFolderBorder#e08009
statusBar.noFolderForeground#08120b
statusBarItem.activeBackground#0000003d
statusBarItem.errorBackground#7f2b27
statusBarItem.hoverBackground#00000026
statusBarItem.prominentBackground#00000030
statusBarItem.prominentHoverBackground#00000045
statusBarItem.remoteBackground#e08009
statusBarItem.remoteForeground#08120b
statusBarItem.warningBackground#bde000
tab.activeBackground#11261698
tab.activeBorder#37793f
tab.activeForeground#c2d8ce
tab.border#37793f
tab.inactiveBackground#0f1610
tab.inactiveForeground#c2d8ce
terminal.ansiBlack#112616
terminal.ansiBlue#4fbadd
terminal.ansiBrightBlack#6e8526
terminal.ansiBrightBlue#00aae0
terminal.ansiBrightCyan#00e0c4
terminal.ansiBrightGreen#c3db3a
terminal.ansiBrightMagenta#5f8dff
terminal.ansiBrightRed#ffa62b
terminal.ansiBrightWhite#f2f8f5
terminal.ansiBrightYellow#bde000
terminal.ansiCyan#4fcfc2
terminal.ansiGreen#4fd93c
terminal.ansiMagenta#8b9ae0
terminal.ansiRed#ffa62b
terminal.ansiWhite#d6e6de
terminal.ansiYellow#c3db3a
terminal.background#000e07
terminal.foreground#d6e6de
terminal.selectionBackground#1d4125
terminalCursor.foreground#73fa91
textLink.activeForeground#18e000
textLink.foreground#4fd93c
titleBar.activeBackground#0f1610
titleBar.activeForeground#c2d8ce
titleBar.border#37793f
titleBar.inactiveBackground#0f1610
widget.shadow#000e07

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d3dede	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#d3dede	—
comment	#93a8ae	italic
string	#4fdcd0	—
string.regexp	#ff5f58	—
constant.numeric	#ff6bad	—
variable.language, variable.other	#63bdff	—
keyword	#c3dd1a	—
storage	#dce6e6	bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution	#ff7b30
entity.name.function	#63bdff	—
punctuation.definition.variable	#c3dd1a	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#ff5f58	—
constant.language, meta.preprocessor	#f0bd20	—
support.function.construct, keyword.other.new	#ff7b30	—
constant.character, constant.other	#ff7b30	—
entity.other.inherited-class, punctuation.separator.namespace.ruby	#a3a8f5	—
variable.parameter	—	—
entity.name.tag	#63bdff	—
punctuation.definition.tag	#93a8ae	—
entity.other.attribute-name	#dce6e6	—
support.function	#63bdff	—
punctuation.separator.continuation	#ff5f58	—
support.constant, support.variable	—	—
support.type, support.class	#c3dd1a	—
support.type.exception	#ff7b30	—
support.other.variable	—	—
invalid	#ff5f58	—
meta.diff, meta.diff.header	#63bdff	italic
markup.deleted	#ff5f58
markup.changed	#ff7b30
markup.inserted	#c3dd1a	—
markup.quote	#c3dd1a	—
markup.list	#f0bd20	—
markup.bold, markup.italic	#ff6bad	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#4fdcd0
markup.heading	#63bdff	bold
markup.heading.setext	#63bdff

VS Code preview

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

Alien Blood Contrast — Alien Blood Contrast High Violet

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.background#0f1610
activityBar.border#37793f
activityBar.dropBorder#c2d8ce
activityBar.foreground#4fd93c
activityBar.inactiveForeground#37793f
activityBarBadge.background#2f7e25
activityBarBadge.foreground#fff
badge.background#2f7e25
button.background#0f1610
button.border#37793f
button.foreground#c2d8ce
button.secondaryBackground#000e07
button.secondaryForeground#c2d8ce
debugConsole.errorForeground#f0554e
debugConsole.infoForeground#4fd93c
debugConsole.sourceForeground#c2d8ce
debugConsole.warningForeground#c3db3a
debugIcon.breakpointCurrentStackframeForeground#ffa62b
debugIcon.breakpointDisabledForeground#37793f
debugIcon.breakpointForeground#18e000
debugIcon.breakpointStackframeForeground#00e0c4
debugIcon.continueForeground#00aae0
debugIcon.disconnectForeground#00aae0
debugIcon.pauseForeground#00aae0
debugIcon.restartForeground#4fd93c
debugIcon.startForeground#4fd93c
debugIcon.stepBackForeground#00aae0
debugIcon.stepIntoForeground#00aae0
debugIcon.stepOutForeground#00aae0
debugIcon.stepOverForeground#00aae0
debugIcon.stopForeground#f0554e
debugTokenExpression.boolean#18e000
debugTokenExpression.error#f0554e
debugTokenExpression.name#4fcfc2
debugTokenExpression.number#00e0c4
debugTokenExpression.string#c2d8ce
debugToolBar.background#000e07
debugToolBar.border#0f1610
debugView.stateLabelBackground#112616
debugView.stateLabelForeground#18e000
debugView.valueChangedHighlight#bde00080
diffEditor.diagonalFill#c2d8ce50
diffEditor.insertedTextBackground#18e00010
diffEditor.removedTextBackground#7f2b2735
dropdown.background#0f1610
editor.background#0f1610
editor.findMatchBackground#be0c0350
editor.findMatchHighlightBackground#18e00020
editor.focusedStackFrameHighlightBackground#47587f20
editor.foreground#d3dede
editor.lineHighlightBackground#1d412520
editor.lineHighlightBorder#ffffff00
editor.selectionBackground#1d412577
editor.snippetFinalTabstopHighlightBackground#1d412544
editor.snippetTabstopHighlightBackground#1d412544
editor.stackFrameHighlightBackground#e0d10013
editor.wordHighlightBackground#3c481260
editor.wordHighlightStrongBackground#647d7550
editorBracketHighlight.foreground1#18e000
editorBracketHighlight.foreground2#ffa62b
editorBracketHighlight.foreground3#bde000
editorBracketHighlight.foreground4#73fa91
editorBracketHighlight.foreground5#00e0c4
editorCursor.background#0f1610
editorCursor.foreground#73fa91
editorError.foreground#f0554e
editorGroup.border#37793f
editorGroupHeader.tabsBackground#000e07
editorLineNumber.activeForeground#e2f0e8
editorLineNumber.foreground#6cae7a
editorOverviewRuler.addedForeground#ffa62b
editorOverviewRuler.deletedForeground#6e8526
editorOverviewRuler.errorForeground#f0554e
editorOverviewRuler.infoForeground#c2d8ce
editorOverviewRuler.modifiedForeground#73fa9180
editorOverviewRuler.warningForeground#c3db3a
editorWarning.foreground#c3db3a
editorWidget.background#000e07
editorWidget.border#37793f
editorWidget.foreground#c2d8ce
errorForeground#f0554e
focusBorder#37793f
gitDecoration.conflictingResourceForeground#f0554e
gitDecoration.modifiedResourceForeground#c3db3a
gitDecoration.untrackedResourceForeground#4fd93c
icon.foreground#c2d8ce
input.background#0f1610
input.foreground#c2d8ce
list.activeSelectionBackground#0f1610
list.activeSelectionForeground#c2d8ce
list.errorForeground#f0554e
list.focusBackground#11261698
list.focusHighlightForeground#4fd93c
list.focusOutline#37793f
list.highlightForeground#4fd93c
list.hoverBackground#0f1610
list.inactiveSelectionBackground#11261698
list.warningForeground#c3db3a
menu.background#000e07
menu.foreground#c2d8ce
menu.separatorBackground#0f1610
minimap.errorHighlight#f0554e
minimap.findMatchHighlight#18e00060
minimap.selectionHighlight#37793f
minimap.selectionOccurrenceHighlight#bde00070
minimap.warningHighlight#c3db3a
minimapGutter.addedBackground#e08009
minimapGutter.deletedBackground#3c4812
minimapGutter.modifiedBackground#73fa9190
notificationLink.foreground#4fd93c
notificationsErrorIcon.foreground#f0554e
notificationsInfoIcon.foreground#4fbadd
notificationsWarningIcon.foreground#c3db3a
notificationToast.border#37793f
panel.background#000e07
panel.border#37793f
panelSection.border#37793f
panelSectionHeader.background#0f1610
panelSectionHeader.foreground#c2d8ce
panelTitle.activeBorder#37793f
panelTitle.activeForeground#c2d8ce
peekView.border#4fd93c
peekViewEditor.background#000e07
peekViewEditor.matchHighlightBackground#1d4125
peekViewResult.background#000e07
peekViewResult.fileForeground#4fd93c
peekViewResult.lineForeground#c2d8ce
peekViewResult.matchHighlightBackground#1d4125
peekViewResult.selectionBackground#0f1610
peekViewTitle.background#000e07
peekViewTitleDescription.foreground#4fd93c
peekViewTitleLabel.foreground#18e000
problemsErrorIcon.foreground#f0554e
problemsInfoIcon.foreground#4fbadd
problemsWarningIcon.foreground#c3db3a
scrollbarSlider.activeBackground#717f24bb
scrollbarSlider.background#11261698
scrollbarSlider.hoverBackground#1d4125bb
selection.background#18e00020
sideBar.background#000e07
sideBar.border#37793f
sideBar.foreground#c2d8ce
sideBarSectionHeader.background#0f1610
sideBarTitle.foreground#c2d8ce
statusBar.background#47587f
statusBar.border#47587f
statusBar.debuggingBackground#47587f
statusBar.debuggingBorder#47587f
statusBar.debuggingForeground#f2f8f5
statusBar.foreground#f2f8f5
statusBar.noFolderBackground#47587f
statusBar.noFolderBorder#47587f
statusBar.noFolderForeground#f2f8f5
statusBarItem.activeBackground#ffffff3d
statusBarItem.errorBackground#7f2b27
statusBarItem.hoverBackground#ffffff26
statusBarItem.prominentBackground#ffffff30
statusBarItem.prominentHoverBackground#ffffff45
statusBarItem.remoteBackground#47587f
statusBarItem.remoteForeground#f2f8f5
statusBarItem.warningBackground#bde000
tab.activeBackground#11261698
tab.activeBorder#37793f
tab.activeForeground#c2d8ce
tab.border#37793f
tab.inactiveBackground#0f1610
tab.inactiveForeground#c2d8ce
terminal.ansiBlack#112616
terminal.ansiBlue#4fbadd
terminal.ansiBrightBlack#6e8526
terminal.ansiBrightBlue#00aae0
terminal.ansiBrightCyan#00e0c4
terminal.ansiBrightGreen#c3db3a
terminal.ansiBrightMagenta#5f8dff
terminal.ansiBrightRed#ffa62b
terminal.ansiBrightWhite#f2f8f5
terminal.ansiBrightYellow#bde000
terminal.ansiCyan#4fcfc2
terminal.ansiGreen#4fd93c
terminal.ansiMagenta#8b9ae0
terminal.ansiRed#ffa62b
terminal.ansiWhite#d6e6de
terminal.ansiYellow#c3db3a
terminal.background#000e07
terminal.foreground#d6e6de
terminal.selectionBackground#1d4125
terminalCursor.foreground#73fa91
textLink.activeForeground#18e000
textLink.foreground#4fd93c
titleBar.activeBackground#0f1610
titleBar.activeForeground#c2d8ce
titleBar.border#37793f
titleBar.inactiveBackground#0f1610
widget.shadow#000e07

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d3dede	—
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python	#d3dede	—
comment	#93a8ae	italic
string	#4fdcd0	—
string.regexp	#ff5f58	—
constant.numeric	#ff6bad	—
variable.language, variable.other	#63bdff	—
keyword	#c3dd1a	—
storage	#dce6e6	bold
entity.name.class, entity.name.type, entity.name.namespace, entity.name.scope-resolution	#ff7b30
entity.name.function	#63bdff	—
punctuation.definition.variable	#c3dd1a	—
punctuation.section.embedded.begin, punctuation.section.embedded.end	#ff5f58	—
constant.language, meta.preprocessor	#f0bd20	—
support.function.construct, keyword.other.new	#ff7b30	—
constant.character, constant.other	#ff7b30	—
entity.other.inherited-class, punctuation.separator.namespace.ruby	#a3a8f5	—
variable.parameter	—	—
entity.name.tag	#63bdff	—
punctuation.definition.tag	#93a8ae	—
entity.other.attribute-name	#dce6e6	—
support.function	#63bdff	—
punctuation.separator.continuation	#ff5f58	—
support.constant, support.variable	—	—
support.type, support.class	#c3dd1a	—
support.type.exception	#ff7b30	—
support.other.variable	—	—
invalid	#ff5f58	—
meta.diff, meta.diff.header	#63bdff	italic
markup.deleted	#ff5f58
markup.changed	#ff7b30
markup.inserted	#c3dd1a	—
markup.quote	#c3dd1a	—
markup.list	#f0bd20	—
markup.bold, markup.italic	#ff6bad	—
markup.bold	—	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inline.raw	#4fdcd0
markup.heading	#63bdff	bold
markup.heading.setext	#63bdff