Carbon Code Theme

Name: Carbon Code Theme
Author: sazardev

Publisher: sazardevThemes in package: 10

Clean, minimal VS Code theme for focused coding. Professional variants with indigo, emerald, crimson, rose, and amber color schemes.

Open in VS Code GitHub

Color themes

VS Code preview

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

Carbon Code Theme — Carbon Code Dark

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.activeBackground#00000000
activityBar.activeBorder#6366f1
activityBar.activeFocusBorder#00000000
activityBar.background#08080c
activityBar.border#00000000
activityBar.dropBorder#00000000
activityBar.foreground#d0d0d0
activityBar.inactiveForeground#606060
activityBarBadge.background#6366f1
activityBarBadge.foreground#ffffff
breadcrumb.activeSelectionForeground#6366f1
breadcrumb.background#0a0a0a
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#cccccc
button.background#6366f1
button.foreground#000000
button.hoverBackground#33ff99
contrastActiveBorder#00000000
contrastBorder#333333
diffEditor.insertedLineBackground#6366f111
diffEditor.insertedTextBackground#6366f122
diffEditor.removedLineBackground#ff005511
diffEditor.removedTextBackground#ff005522
editor.background#0f0f13
editor.findMatchBackground#0ea5e944
editor.findMatchHighlightBackground#0ea5e922
editor.foreground#e6e6e6
editor.lineHighlightBackground#00000000
editor.rangeHighlightBackground#6366f111
editor.selectionBackground#6366f133
editor.selectionHighlightBackground#6366f122
editor.wordHighlightBackground#6366f115
editor.wordHighlightStrongBackground#6366f125
editorCursor.foreground#6366f1
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#08080a
editorGroupHeader.tabsBorder#00000000
editorHoverWidget.background#0a0a0a
editorHoverWidget.border#333333
editorIndentGuide.activeBackground1#6366f1
editorIndentGuide.background1#1c1c1c
editorLineNumber.activeForeground#6366f1
editorLineNumber.foreground#454545
editorRuler.foreground#1c1c1c
editorWhitespace.foreground#2a2a2a
editorWidget.background#0a0a0a
editorWidget.border#333333
focusBorder#00000000
gitDecoration.addedResourceForeground#6366f1
gitDecoration.conflictingResourceForeground#ff00dd
gitDecoration.deletedResourceForeground#ff0055
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#ffdd00
gitDecoration.untrackedResourceForeground#0088ff
input.background#0a0a0a
input.border#333333
input.foreground#ffffff
input.placeholderForeground#666666
inputOption.activeBorder#6366f1
inputValidation.errorBackground#ff0055
inputValidation.errorBorder#ff0055
list.activeSelectionBackground#6366f111
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusAndSelectionOutline#00000000
list.focusBackground#1a1a1a
list.focusForeground#ffffff
list.focusHighlightForeground#6366f1
list.focusOutline#00000000
list.hoverBackground#6366f115
list.hoverForeground#ffffff
list.inactiveSelectionBackground#6366f111
list.inactiveSelectionForeground#cccccc
list.inactiveSelectionIconForeground#cccccc
menu.background#000000
menu.border#333333
menu.foreground#ffffff
menu.selectionBackground#1a1a1a
menu.selectionForeground#ffffff
minimap.background#000000
minimap.errorHighlight#ff0055
minimap.findMatchHighlight#0088ff44
minimap.selectionHighlight#6366f144
minimap.warningHighlight#ffdd00
notificationCenter.border#333333
notificationCenterHeader.background#0a0a0a
notifications.background#0a0a0a
notifications.border#333333
notifications.foreground#ffffff
notificationToast.border#333333
panel.background#050507
panel.border#1a1a1a
panelTitle.activeBorder#6366f1
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#666666
peekView.border#6366f1
peekViewEditor.background#0a0a0a
peekViewResult.background#050505
peekViewTitle.background#000000
progressBar.background#6366f1
scrollbar.shadow#000000
scrollbarSlider.activeBackground#555555
scrollbarSlider.background#333333
scrollbarSlider.hoverBackground#444444
sideBar.background#0a0a0c
sideBar.border#00000000
sideBar.foreground#b8b8b8
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#d0d0d0
sideBarTitle.foreground#d0d0d0
statusBar.background#08080a
statusBar.border#6366f133
statusBar.debuggingBackground#c85450
statusBar.debuggingForeground#ffffff
statusBar.foreground#b8b8b8
statusBar.noFolderBackground#080808
tab.activeBackground#00000000
tab.activeBorder#00000000
tab.activeBorderTop#6366f1
tab.activeForeground#d0d0d0
tab.border#00000000
tab.focusBorder#00000000
tab.hoverBackground#0f0f0f22
tab.hoverBorder#00000000
tab.hoverForeground#b8b8b8
tab.inactiveBackground#00000000
tab.inactiveForeground#707070
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#a0a0a0
tab.unfocusedInactiveForeground#606060
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#3399ff
terminal.ansiBrightCyan#33ffee
terminal.ansiBrightGreen#33ffaa
terminal.ansiBrightMagenta#ff33ee
terminal.ansiBrightRed#ff3377
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffee33
terminal.ansiCyan#00ffdd
terminal.ansiGreen#6366f1
terminal.ansiMagenta#ff00dd
terminal.ansiRed#ff0055
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffdd00
terminal.background#000002
terminal.foreground#f5f5f5
titleBar.activeBackground#08080a
titleBar.activeForeground#d0d0d0
titleBar.border#00000000
titleBar.inactiveBackground#08080a
titleBar.inactiveForeground#606060
tree.inactiveIndentGuidesStroke#6366f133
tree.indentGuidesStroke#6366f133
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4a4a4a	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.special-method, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.go	#66ccff
string, string.quoted, string.template, punctuation.definition.string	#99ddaa	—
constant.numeric, constant.language, constant.character, constant.escape	#c4b078	—
entity.name.function, meta.function-call, variable.function, support.function, entity.name.method	#6366f1
entity.name.class, entity.name.type, support.type, support.class, entity.name.interface	#7cb3b3	—
variable, variable.parameter, variable.other, variable.language.this, variable.language.super	#e8e8e8	—
variable.object.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.field.declaration.go, variable.field.go	#a8d0ff	—
entity.name.tag, punctuation.definition.tag	#7aa3c4	—
entity.other.attribute-name, entity.other.attribute-name.html	#c4b078	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison.go, punctuation.separator.key-value	#aaffaa	—
punctuation, punctuation.separator, punctuation.terminator	#707070	—
constant, constant.other, support.constant	#b078a8	—
string.regexp, constant.character.escape	#6366f1	—
entity.name.import, entity.name.module, support.module	#6b9bd1	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#a87cb3	—
constant.character.escape, constant.character.entity	#6366f1	—
meta.template.expression, punctuation.definition.template-expression	#6366f1	—
entity.name.package.go, variable.other.field.go, entity.name.type.struct.go, meta.struct.go variable.other.go	#88ddff	—
meta.function.receiver.go variable.parameter.go, variable.parameter.receiver.go	#ffaa55	—
entity.name.type.interface.go, support.type.go	#dd88ff	—
support.type.property-name.css	#7cb3b3	—
support.constant.property-value.css, meta.property-value.css	#c4b078	—
markup.heading, entity.name.section.markdown	#6366f1	bold
markup.bold	#ffffff	bold
variable.language.go, constant.language.go	#ffcc77	—
keyword.operator.address.go, keyword.operator.channel.go	#6366f1	bold
markup.italic	#d5d5d5	italic
markup.inline.raw, markup.fenced_code	#8ba888	—
support.type.property-name.json	#7cb3b3	—
invalid, invalid.illegal	#ff4757	bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart	#7cb3b3	—
storage.type.primitive.dart, storage.type.built-in.dart	#66ccff	—
entity.name.function.dart, support.function.dart	#6366f1	—
variable.other.dart, variable.parameter.dart, variable.declaration.dart, meta.definition.variable.dart	#e8e8e8	—
variable.other.property.dart, meta.field.declaration.dart	#a8d0ff	—
keyword.control.dart, keyword.declaration.dart, storage.type.annotation.dart	#66ccff	—
support.class.flutter, support.type.flutter, meta.function-call.dart entity.name.function.dart	#dd88ff	—
string.interpolated.dart, punctuation.definition.interpolation.dart, meta.template.expression.dart	#6366f1	—
storage.type.annotation.dart, meta.declaration.annotation.dart	#a87cb3	—
entity.name.constructor, meta.constructor.dart	#7cb3b3	—
entity.name.type.rust, storage.type.rust, storage.class.std.rust	#7cb3b3	—
meta.macro.rust, entity.name.function.macro.rust	#a87cb3	—
entity.name.type.swift, support.type.swift	#7cb3b3	—
variable.language.php, variable.other.global.php	#dd88ff	—
constant.other.symbol.ruby	#c4b078	—
entity.name.type.class.cs, storage.type.cs	#7cb3b3	—
entity.name.tag.cs, meta.attribute.cs	#a87cb3	—
meta.decorator.ts, meta.decorator.tsx	#a87cb3	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx	#dd88ff	—
entity.name.tag.js.jsx, entity.name.tag.tsx	#dd88ff	—
entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html	#7aa3c4	—
entity.name.tag.yaml	#7cb3b3	—
entity.name.type.class.java, storage.type.java, storage.type.generic.java	#7cb3b3	—
entity.name.type.class.kotlin, storage.type.kotlin	#7cb3b3	—

VS Code preview

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

Carbon Code Theme — Carbon Code Emerald Dark

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.activeBackground#00000000
activityBar.activeBorder#00ff88
activityBar.activeFocusBorder#00000000
activityBar.background#080a08
activityBar.border#00000000
activityBar.dropBorder#00000000
activityBar.foreground#d0d0d0
activityBar.inactiveForeground#606060
activityBarBadge.background#00ff88
activityBarBadge.foreground#ffffff
breadcrumb.activeSelectionForeground#00ff88
breadcrumb.background#0a0a0a
breadcrumb.focusForeground#ffffff
breadcrumb.foreground#cccccc
button.background#00ff88
button.foreground#000000
button.hoverBackground#33ff99
contrastActiveBorder#00000000
contrastBorder#333333
diffEditor.insertedLineBackground#00ff8811
diffEditor.insertedTextBackground#00ff8822
diffEditor.removedLineBackground#ff005511
diffEditor.removedTextBackground#ff005522
editor.background#0e110e
editor.findMatchBackground#0ea5e944
editor.findMatchHighlightBackground#0ea5e922
editor.foreground#e6e6e6
editor.lineHighlightBackground#00000000
editor.rangeHighlightBackground#00ff8811
editor.selectionBackground#00ff8833
editor.selectionHighlightBackground#00ff8822
editor.wordHighlightBackground#00ff8815
editor.wordHighlightStrongBackground#00ff8825
editorCursor.foreground#00ff88
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#08090a
editorGroupHeader.tabsBorder#00000000
editorHoverWidget.background#0a0a0a
editorHoverWidget.border#333333
editorIndentGuide.activeBackground1#00ff88
editorIndentGuide.background1#1c1c1c
editorLineNumber.activeForeground#00ff88
editorLineNumber.foreground#454545
editorRuler.foreground#1c1c1c
editorWhitespace.foreground#2a2a2a
editorWidget.background#0a0a0a
editorWidget.border#333333
focusBorder#00000000
gitDecoration.addedResourceForeground#00ff88
gitDecoration.conflictingResourceForeground#ff00dd
gitDecoration.deletedResourceForeground#ff0055
gitDecoration.ignoredResourceForeground#666666
gitDecoration.modifiedResourceForeground#ffdd00
gitDecoration.untrackedResourceForeground#0088ff
input.background#0a0a0a
input.border#333333
input.foreground#ffffff
input.placeholderForeground#666666
inputOption.activeBorder#00ff88
inputValidation.errorBackground#ff0055
inputValidation.errorBorder#ff0055
list.activeSelectionBackground#00ff8811
list.activeSelectionForeground#ffffff
list.activeSelectionIconForeground#ffffff
list.focusAndSelectionOutline#00000000
list.focusBackground#1a1a1a
list.focusForeground#ffffff
list.focusHighlightForeground#00ff88
list.focusOutline#00000000
list.hoverBackground#00ff8815
list.hoverForeground#ffffff
list.inactiveSelectionBackground#00ff8811
list.inactiveSelectionForeground#cccccc
list.inactiveSelectionIconForeground#cccccc
menu.background#000000
menu.border#333333
menu.foreground#ffffff
menu.selectionBackground#1a1a1a
menu.selectionForeground#ffffff
minimap.background#000000
minimap.errorHighlight#ff0055
minimap.findMatchHighlight#0088ff44
minimap.selectionHighlight#00ff8844
minimap.warningHighlight#ffdd00
notificationCenter.border#333333
notificationCenterHeader.background#0a0a0a
notifications.background#0a0a0a
notifications.border#333333
notifications.foreground#ffffff
notificationToast.border#333333
panel.background#050505
panel.border#1a1a1a
panelTitle.activeBorder#00ff88
panelTitle.activeForeground#ffffff
panelTitle.inactiveForeground#666666
peekView.border#00ff88
peekViewEditor.background#0a0a0a
peekViewResult.background#050505
peekViewTitle.background#000000
progressBar.background#00ff88
scrollbar.shadow#000000
scrollbarSlider.activeBackground#555555
scrollbarSlider.background#333333
scrollbarSlider.hoverBackground#444444
sideBar.background#080b08
sideBar.border#00000000
sideBar.foreground#b8b8b8
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#d0d0d0
sideBarTitle.foreground#d0d0d0
statusBar.background#08090a
statusBar.border#00ff8833
statusBar.debuggingBackground#c85450
statusBar.debuggingForeground#ffffff
statusBar.foreground#b8b8b8
statusBar.noFolderBackground#08090a
tab.activeBackground#00000000
tab.activeBorder#00000000
tab.activeBorderTop#00ff88
tab.activeForeground#d0d0d0
tab.border#00000000
tab.focusBorder#00000000
tab.hoverBackground#0f0f0f22
tab.hoverBorder#00000000
tab.hoverForeground#b8b8b8
tab.inactiveBackground#00000000
tab.inactiveForeground#707070
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#a0a0a0
tab.unfocusedInactiveForeground#606060
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#333333
terminal.ansiBrightBlue#3399ff
terminal.ansiBrightCyan#33ffee
terminal.ansiBrightGreen#33ffaa
terminal.ansiBrightMagenta#ff33ee
terminal.ansiBrightRed#ff3377
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffee33
terminal.ansiCyan#00ffdd
terminal.ansiGreen#00ff88
terminal.ansiMagenta#ff00dd
terminal.ansiRed#ff0055
terminal.ansiWhite#ffffff
terminal.ansiYellow#ffdd00
terminal.background#000000
terminal.foreground#f5f5f5
titleBar.activeBackground#08090a
titleBar.activeForeground#d0d0d0
titleBar.border#00000000
titleBar.inactiveBackground#08090a
titleBar.inactiveForeground#606060
tree.inactiveIndentGuidesStroke#00ff8833
tree.indentGuidesStroke#00ff8833
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#4a4a4a	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.special-method, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.go	#66ccff
string, string.quoted, string.template, punctuation.definition.string	#99ddaa	—
constant.numeric, constant.language, constant.character, constant.escape	#c4b078	—
entity.name.function, meta.function-call, variable.function, support.function, entity.name.method	#00ff88
entity.name.class, entity.name.type, support.type, support.class, entity.name.interface	#7cb3b3	—
variable, variable.parameter, variable.other, variable.language.this, variable.language.super	#e8e8e8	—
variable.object.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.field.declaration.go, variable.field.go	#a8d0ff	—
entity.name.tag, punctuation.definition.tag	#7aa3c4	—
entity.other.attribute-name, entity.other.attribute-name.html	#c4b078	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison.go, punctuation.separator.key-value	#aaffaa	—
punctuation, punctuation.separator, punctuation.terminator	#707070	—
constant, constant.other, support.constant	#b078a8	—
string.regexp, constant.character.escape	#00ff88	—
entity.name.import, entity.name.module, support.module	#6b9bd1	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#a87cb3	—
constant.character.escape, constant.character.entity	#00ff88	—
meta.template.expression, punctuation.definition.template-expression	#00ff88	—
entity.name.package.go, variable.other.field.go, entity.name.type.struct.go, meta.struct.go variable.other.go	#88ddff	—
meta.function.receiver.go variable.parameter.go, variable.parameter.receiver.go	#ffaa55	—
entity.name.type.interface.go, support.type.go	#dd88ff	—
support.type.property-name.css	#7cb3b3	—
support.constant.property-value.css, meta.property-value.css	#c4b078	—
markup.heading, entity.name.section.markdown	#00ff88	bold
markup.bold	#ffffff	bold
variable.language.go, constant.language.go	#ffcc77	—
keyword.operator.address.go, keyword.operator.channel.go	#00ff88	bold
markup.italic	#d5d5d5	italic
markup.inline.raw, markup.fenced_code	#8ba888	—
support.type.property-name.json	#7cb3b3	—
invalid, invalid.illegal	#ff4757	bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart	#7cb3b3	—
storage.type.primitive.dart, storage.type.built-in.dart	#66ccff	—
entity.name.function.dart, support.function.dart	#6366f1	—
variable.other.dart, variable.parameter.dart, variable.declaration.dart, meta.definition.variable.dart	#e8e8e8	—
variable.other.property.dart, meta.field.declaration.dart	#a8d0ff	—
keyword.control.dart, keyword.declaration.dart, storage.type.annotation.dart	#66ccff	—
support.class.flutter, support.type.flutter, meta.function-call.dart entity.name.function.dart	#dd88ff	—
string.interpolated.dart, punctuation.definition.interpolation.dart, meta.template.expression.dart	#6366f1	—
storage.type.annotation.dart, meta.declaration.annotation.dart	#a87cb3	—
entity.name.constructor, meta.constructor.dart	#7cb3b3	—
entity.name.type.rust, storage.type.rust, storage.class.std.rust	#7cb3b3	—
meta.macro.rust, entity.name.function.macro.rust	#a87cb3	—
entity.name.type.swift, support.type.swift	#7cb3b3	—
variable.language.php, variable.other.global.php	#dd88ff	—
constant.other.symbol.ruby	#c4b078	—
entity.name.type.class.cs, storage.type.cs	#7cb3b3	—
entity.name.tag.cs, meta.attribute.cs	#a87cb3	—
meta.decorator.ts, meta.decorator.tsx	#a87cb3	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx	#dd88ff	—
entity.name.tag.js.jsx, entity.name.tag.tsx	#dd88ff	—
entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html	#7aa3c4	—
entity.name.tag.yaml	#7cb3b3	—
entity.name.type.class.java, storage.type.java, storage.type.generic.java	#7cb3b3	—
entity.name.type.class.kotlin, storage.type.kotlin	#7cb3b3	—

VS Code preview

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

Carbon Code Theme — Carbon Code Emerald Light

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.activeBackground#00000000
activityBar.activeBorder#00ff88
activityBar.activeFocusBorder#00000000
activityBar.background#f6faf8
activityBar.border#00000000
activityBar.dropBorder#00000000
activityBar.foreground#1a1a1a
activityBar.inactiveForeground#777777
activityBarBadge.background#00ff88
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#00ff88
breadcrumb.background#f0f0f0
breadcrumb.focusForeground#000000
breadcrumb.foreground#333333
button.background#00ff88
button.foreground#000000
button.hoverBackground#00dd77
contrastActiveBorder#00000000
contrastBorder#bbbbbb
diffEditor.insertedLineBackground#00ff8822
diffEditor.insertedTextBackground#00ff8833
diffEditor.removedLineBackground#ff005522
diffEditor.removedTextBackground#ff005533
editor.background#fafefc
editor.findMatchBackground#0088ff55
editor.findMatchHighlightBackground#0088ff33
editor.foreground#0a0a0a
editor.lineHighlightBackground#00000000
editor.rangeHighlightBackground#00ff8822
editor.selectionBackground#00ff8844
editor.selectionHighlightBackground#00ff8833
editor.wordHighlightBackground#00ff8822
editor.wordHighlightStrongBackground#00ff8833
editorCursor.foreground#00ff88
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#f8f8f8
editorGroupHeader.tabsBorder#00000000
editorHoverWidget.background#f0f0f0
editorHoverWidget.border#bbbbbb
editorIndentGuide.activeBackground1#00ff88
editorIndentGuide.background1#dddddd
editorLineNumber.activeForeground#00ff88
editorLineNumber.foreground#999999
editorRuler.foreground#dddddd
editorWhitespace.foreground#cccccc
editorWidget.background#f0f0f0
editorWidget.border#bbbbbb
focusBorder#00000000
gitDecoration.addedResourceForeground#00ff88
gitDecoration.conflictingResourceForeground#ff00dd
gitDecoration.deletedResourceForeground#ff0055
gitDecoration.ignoredResourceForeground#999999
gitDecoration.modifiedResourceForeground#ffaa00
gitDecoration.untrackedResourceForeground#0088ff
input.background#f0f0f0
input.border#bbbbbb
input.foreground#000000
input.placeholderForeground#777777
inputOption.activeBorder#00ff88
inputValidation.errorBackground#ff0055
inputValidation.errorBorder#d63447
list.activeSelectionBackground#00ff8822
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.focusAndSelectionOutline#00000000
list.focusBackground#00ff8833
list.focusForeground#000000
list.focusHighlightForeground#00ff88
list.focusOutline#00000000
list.hoverBackground#00ff8815
list.hoverForeground#000000
list.inactiveSelectionBackground#00ff8811
list.inactiveSelectionForeground#000000
list.inactiveSelectionIconForeground#333333
menu.background#ffffff
menu.border#cccccc
menu.foreground#000000
menu.selectionBackground#e5e5e5
menu.selectionForeground#000000
minimap.background#ffffff
minimap.errorHighlight#ff0055
minimap.findMatchHighlight#0088ff66
minimap.selectionHighlight#00ff8866
minimap.warningHighlight#ffaa00
notificationCenter.border#cccccc
notificationCenterHeader.background#f5f5f5
notifications.background#f5f5f5
notifications.border#cccccc
notifications.foreground#000000
notificationToast.border#cccccc
panel.background#fdfdfd
panel.border#cccccc
panelTitle.activeBorder#00ff88
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#777777
peekView.border#00ff88
peekViewEditor.background#f0f0f0
peekViewResult.background#fdfdfd
peekViewTitle.background#ffffff
progressBar.background#00ff88
scrollbar.shadow#ffffff
scrollbarSlider.activeBackground#aaaaaa
scrollbarSlider.background#cccccc
scrollbarSlider.hoverBackground#bbbbbb
sideBar.background#f0f6f2
sideBar.border#00000000
sideBar.foreground#333333
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#1a1a1a
sideBarTitle.foreground#1a1a1a
statusBar.background#f8f8f8
statusBar.border#00ff8855
statusBar.debuggingBackground#ff0055
statusBar.debuggingForeground#ffffff
statusBar.foreground#333333
statusBar.noFolderBackground#f8f8f8
tab.activeBackground#00000000
tab.activeBorder#00000000
tab.activeBorderTop#00ff88
tab.activeForeground#1a1a1a
tab.border#00000000
tab.focusBorder#00000000
tab.hoverBackground#eeeeee44
tab.hoverBorder#00000000
tab.hoverForeground#333333
tab.inactiveBackground#00000000
tab.inactiveForeground#777777
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#444444
tab.unfocusedInactiveForeground#888888
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3399ff
terminal.ansiBrightCyan#33ddff
terminal.ansiBrightGreen#33ff99
terminal.ansiBrightMagenta#ff33dd
terminal.ansiBrightRed#ff3377
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#ffdd33
terminal.ansiCyan#00ddff
terminal.ansiGreen#00ff88
terminal.ansiMagenta#ff00dd
terminal.ansiRed#ff0055
terminal.ansiWhite#000000
terminal.ansiYellow#ffbb00
terminal.background#ffffff
terminal.foreground#000000
titleBar.activeBackground#f8f8f8
titleBar.activeForeground#1a1a1a
titleBar.border#00000000
titleBar.inactiveBackground#f8f8f8
titleBar.inactiveForeground#777777
tree.inactiveIndentGuidesStroke#00ff8844
tree.indentGuidesStroke#00ff8844
widget.shadow#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b5b5b5	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.special-method, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.go	#0066cc
string, string.quoted, string.template, punctuation.definition.string	#009944	—
constant.numeric, constant.language, constant.character, constant.escape	#cc8800	—
entity.name.function, meta.function-call, variable.function, support.function, entity.name.method	#00ff88	bold
entity.name.class, entity.name.type, support.type, support.class, entity.name.interface	#0088aa	—
variable, variable.parameter, variable.other, variable.language.this, variable.language.super	#1a1a1a	—
variable.object.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.field.declaration.go, variable.field.go	#0077cc	—
entity.name.tag, punctuation.definition.tag	#aa5577	—
entity.other.attribute-name, entity.other.attribute-name.html	#cc8800	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison.go, punctuation.separator.key-value	#55cc55	—
punctuation, punctuation.separator, punctuation.terminator	#8f8f8f	—
constant, constant.other, support.constant	#7744aa	—
string.regexp, constant.character.escape	#00ff88	—
entity.name.import, entity.name.module, support.module	#5577cc	—
punctuation.decorator	#cc6600	—
constant.character.entity	#00ff88	—
punctuation.definition.template-expression	#00ff88	—
meta.struct.go variable.other.go	#0077cc	—
variable.parameter.receiver.go	#0088dd	—
entity.name.type.interface.go, support.type.go	#0088aa	—
support.type.property-name.css	#0066cc	—
meta.property-value.css	#cc8800	—
markup.heading, entity.name.section.markdown	#00ff88	bold
markup.bold	#000000	bold
constant.language.go	#0066cc	—
keyword.operator.address.go, keyword.operator.channel.go	#55cc55	—
markup.italic	#333333	italic
markup.inline.raw, markup.fenced_code	#00ff88	—
support.type.property-name.json	#0066cc	—
invalid, invalid.illegal	#ff0055	bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart	#7cb3b3	—
storage.type.primitive.dart, storage.type.built-in.dart	#66ccff	—
entity.name.function.dart, support.function.dart	#6366f1	—
variable.other.dart, variable.parameter.dart, variable.declaration.dart, meta.definition.variable.dart	#e8e8e8	—
variable.other.property.dart, meta.field.declaration.dart	#a8d0ff	—
keyword.control.dart, keyword.declaration.dart, storage.type.annotation.dart	#66ccff	—
support.class.flutter, support.type.flutter, meta.function-call.dart entity.name.function.dart	#dd88ff	—
string.interpolated.dart, punctuation.definition.interpolation.dart, meta.template.expression.dart	#6366f1	—
storage.type.annotation.dart, meta.declaration.annotation.dart	#a87cb3	—
entity.name.constructor, meta.constructor.dart	#7cb3b3	—
entity.name.type.rust, storage.type.rust, storage.class.std.rust	#7cb3b3	—
meta.macro.rust, entity.name.function.macro.rust	#a87cb3	—
entity.name.type.swift, support.type.swift	#7cb3b3	—
variable.language.php, variable.other.global.php	#dd88ff	—
constant.other.symbol.ruby	#c4b078	—
entity.name.type.class.cs, storage.type.cs	#7cb3b3	—
entity.name.tag.cs, meta.attribute.cs	#a87cb3	—
meta.decorator.ts, meta.decorator.tsx	#a87cb3	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx	#dd88ff	—
entity.name.tag.js.jsx, entity.name.tag.tsx	#dd88ff	—
entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html	#7aa3c4	—
entity.name.tag.yaml	#7cb3b3	—
entity.name.type.class.java, storage.type.java, storage.type.generic.java	#7cb3b3	—
entity.name.type.class.kotlin, storage.type.kotlin	#7cb3b3	—

VS Code preview

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

Carbon Code Theme — Carbon Code Light

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.activeBackground#00000000
activityBar.activeBorder#6366f1
activityBar.activeFocusBorder#00000000
activityBar.background#f6f6fd
activityBar.border#00000000
activityBar.dropBorder#00000000
activityBar.foreground#1a1a1a
activityBar.inactiveForeground#777777
activityBarBadge.background#6366f1
activityBarBadge.foreground#000000
breadcrumb.activeSelectionForeground#6366f1
breadcrumb.background#f0f0f0
breadcrumb.focusForeground#000000
breadcrumb.foreground#333333
button.background#6366f1
button.foreground#000000
button.hoverBackground#00dd77
contrastActiveBorder#00000000
contrastBorder#bbbbbb
diffEditor.insertedLineBackground#6366f122
diffEditor.insertedTextBackground#6366f133
diffEditor.removedLineBackground#ff005522
diffEditor.removedTextBackground#ff005533
editor.background#fcfcff
editor.findMatchBackground#0088ff55
editor.findMatchHighlightBackground#0088ff33
editor.foreground#0a0a0a
editor.lineHighlightBackground#00000000
editor.rangeHighlightBackground#6366f122
editor.selectionBackground#6366f144
editor.selectionHighlightBackground#6366f133
editor.wordHighlightBackground#6366f122
editor.wordHighlightStrongBackground#6366f133
editorCursor.foreground#6366f1
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#f9f9fb
editorGroupHeader.tabsBorder#00000000
editorHoverWidget.background#f0f0f0
editorHoverWidget.border#bbbbbb
editorIndentGuide.activeBackground1#6366f1
editorIndentGuide.background1#dddddd
editorLineNumber.activeForeground#6366f1
editorLineNumber.foreground#999999
editorRuler.foreground#dddddd
editorWhitespace.foreground#cccccc
editorWidget.background#f0f0f0
editorWidget.border#bbbbbb
focusBorder#00000000
gitDecoration.addedResourceForeground#6366f1
gitDecoration.conflictingResourceForeground#ff00dd
gitDecoration.deletedResourceForeground#ff0055
gitDecoration.ignoredResourceForeground#999999
gitDecoration.modifiedResourceForeground#ffaa00
gitDecoration.untrackedResourceForeground#0088ff
input.background#f0f0f0
input.border#bbbbbb
input.foreground#000000
input.placeholderForeground#777777
inputOption.activeBorder#6366f1
inputValidation.errorBackground#ff0055
inputValidation.errorBorder#d63447
list.activeSelectionBackground#6366f122
list.activeSelectionForeground#000000
list.activeSelectionIconForeground#000000
list.focusAndSelectionOutline#00000000
list.focusBackground#6366f133
list.focusForeground#000000
list.focusHighlightForeground#6366f1
list.focusOutline#00000000
list.hoverBackground#6366f115
list.hoverForeground#000000
list.inactiveSelectionBackground#6366f111
list.inactiveSelectionForeground#000000
list.inactiveSelectionIconForeground#333333
menu.background#ffffff
menu.border#cccccc
menu.foreground#000000
menu.selectionBackground#e5e5e5
menu.selectionForeground#000000
minimap.background#ffffff
minimap.errorHighlight#ff0055
minimap.findMatchHighlight#0088ff66
minimap.selectionHighlight#6366f166
minimap.warningHighlight#ffaa00
notificationCenter.border#cccccc
notificationCenterHeader.background#f5f5f5
notifications.background#f5f5f5
notifications.border#cccccc
notifications.foreground#000000
notificationToast.border#cccccc
panel.background#fefeff
panel.border#cccccc
panelTitle.activeBorder#6366f1
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#777777
peekView.border#6366f1
peekViewEditor.background#f0f0f0
peekViewResult.background#fdfdfd
peekViewTitle.background#ffffff
progressBar.background#6366f1
scrollbar.shadow#ffffff
scrollbarSlider.activeBackground#aaaaaa
scrollbarSlider.background#cccccc
scrollbarSlider.hoverBackground#bbbbbb
sideBar.background#f0f0fa
sideBar.border#00000000
sideBar.foreground#333333
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#1a1a1a
sideBarTitle.foreground#1a1a1a
statusBar.background#f9f9fb
statusBar.border#6366f155
statusBar.debuggingBackground#ff0055
statusBar.debuggingForeground#ffffff
statusBar.foreground#333333
statusBar.noFolderBackground#f9f9fb
tab.activeBackground#00000000
tab.activeBorder#00000000
tab.activeBorderTop#6366f1
tab.activeForeground#1a1a1a
tab.border#00000000
tab.focusBorder#00000000
tab.hoverBackground#eeeeee44
tab.hoverBorder#00000000
tab.hoverForeground#333333
tab.inactiveBackground#00000000
tab.inactiveForeground#777777
tab.lastPinnedBorder#00000000
tab.unfocusedActiveBorder#00000000
tab.unfocusedActiveBorderTop#00000000
tab.unfocusedActiveForeground#444444
tab.unfocusedInactiveForeground#888888
terminal.ansiBlack#000000
terminal.ansiBlue#0088ff
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3399ff
terminal.ansiBrightCyan#33ddff
terminal.ansiBrightGreen#33ff99
terminal.ansiBrightMagenta#ff33dd
terminal.ansiBrightRed#ff3377
terminal.ansiBrightWhite#000000
terminal.ansiBrightYellow#ffdd33
terminal.ansiCyan#00ddff
terminal.ansiGreen#6366f1
terminal.ansiMagenta#ff00dd
terminal.ansiRed#ff0055
terminal.ansiWhite#000000
terminal.ansiYellow#ffbb00
terminal.background#ffffff
terminal.foreground#000000
titleBar.activeBackground#f9f9fb
titleBar.activeForeground#1a1a1a
titleBar.border#00000000
titleBar.inactiveBackground#f9f9fb
titleBar.inactiveForeground#777777
tree.inactiveIndentGuidesStroke#6366f144
tree.indentGuidesStroke#6366f144
widget.shadow#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#b5b5b5	italic
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.other.special-method, keyword.control.import, keyword.control.export, keyword.control.default, keyword.control.go	#0066cc
string, string.quoted, string.template, punctuation.definition.string	#009944	—
constant.numeric, constant.language, constant.character, constant.escape	#cc8800	—
entity.name.function, meta.function-call, variable.function, support.function, entity.name.method	#6366f1	bold
entity.name.class, entity.name.type, support.type, support.class, entity.name.interface	#0088aa	—
variable, variable.parameter, variable.other, variable.language.this, variable.language.super	#1a1a1a	—
variable.object.property, meta.object-literal.key, support.variable.property, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, meta.field.declaration.go, variable.field.go	#0077cc	—
entity.name.tag, punctuation.definition.tag	#aa5577	—
entity.other.attribute-name, entity.other.attribute-name.html	#cc8800	—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison.go, punctuation.separator.key-value	#55cc55	—
punctuation, punctuation.separator, punctuation.terminator	#8f8f8f	—
constant, constant.other, support.constant	#7744aa	—
string.regexp, constant.character.escape	#6366f1	—
entity.name.import, entity.name.module, support.module	#5577cc	—
punctuation.decorator	#cc6600	—
constant.character.entity	#6366f1	—
punctuation.definition.template-expression	#6366f1	—
meta.struct.go variable.other.go	#0077cc	—
variable.parameter.receiver.go	#0088dd	—
entity.name.type.interface.go, support.type.go	#0088aa	—
support.type.property-name.css	#0066cc	—
meta.property-value.css	#cc8800	—
markup.heading, entity.name.section.markdown	#6366f1	bold
markup.bold	#000000	bold
constant.language.go	#0066cc	—
keyword.operator.address.go, keyword.operator.channel.go	#55cc55	—
markup.italic	#333333	italic
markup.inline.raw, markup.fenced_code	#6366f1	—
support.type.property-name.json	#0066cc	—
invalid, invalid.illegal	#ff0055	bold
support.class.dart, support.type.dart, entity.name.type.class.dart, entity.name.type.dart	#7cb3b3	—
storage.type.primitive.dart, storage.type.built-in.dart	#66ccff	—
entity.name.function.dart, support.function.dart	#6366f1	—
variable.other.dart, variable.parameter.dart, variable.declaration.dart, meta.definition.variable.dart	#e8e8e8	—
variable.other.property.dart, meta.field.declaration.dart	#a8d0ff	—
keyword.control.dart, keyword.declaration.dart, storage.type.annotation.dart	#66ccff	—
support.class.flutter, support.type.flutter, meta.function-call.dart entity.name.function.dart	#dd88ff	—
string.interpolated.dart, punctuation.definition.interpolation.dart, meta.template.expression.dart	#6366f1	—
storage.type.annotation.dart, meta.declaration.annotation.dart	#a87cb3	—
entity.name.constructor, meta.constructor.dart	#7cb3b3	—
entity.name.type.rust, storage.type.rust, storage.class.std.rust	#7cb3b3	—
meta.macro.rust, entity.name.function.macro.rust	#a87cb3	—
entity.name.type.swift, support.type.swift	#7cb3b3	—
variable.language.php, variable.other.global.php	#dd88ff	—
constant.other.symbol.ruby	#c4b078	—
entity.name.type.class.cs, storage.type.cs	#7cb3b3	—
entity.name.tag.cs, meta.attribute.cs	#a87cb3	—
meta.decorator.ts, meta.decorator.tsx	#a87cb3	—
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.js, support.class.component.tsx	#dd88ff	—
entity.name.tag.js.jsx, entity.name.tag.tsx	#dd88ff	—
entity.name.tag.html, entity.name.tag.inline.any.html, entity.name.tag.other.html, entity.name.tag.block.any.html	#7aa3c4	—
entity.name.tag.yaml	#7cb3b3	—
entity.name.type.class.java, storage.type.java, storage.type.generic.java	#7cb3b3	—
entity.name.type.class.kotlin, storage.type.kotlin	#7cb3b3	—