Craft Theme

Name: Craft Theme
Author: Qiao Changliang

Publisher: Qiao ChangliangThemes in package: 19

A Minecraft-inspired theme with bright, blocky colors, blending classic Minecraft tones with a modern VS Code UI.

Open in VS Code GitHub

Color themes

VS Code preview

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

Craft Theme — Craft Cherry Blossom 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#d16a9466
activityBar.activeBorder#d16a94
activityBar.activeFocusBorder#d16a94bf
activityBar.background#493741
activityBar.border#624b532e
activityBar.dropBorder#d16a94b3
activityBar.foreground#d16a94
activityBar.inactiveForeground#e9dde0c7
activityBarBadge.background#d16a94
activityBarBadge.foreground#241407
activityBarTop.activeBackground#d16a9466
activityBarTop.activeBorder#d16a9473
activityBarTop.background#4a3842
activityBarTop.foreground#d16a94
activityBarTop.inactiveForeground#e9dde0c7
badge.background#d16a9433
badge.foreground#d16a94
button.background#d16a94
button.border#2414071a
button.foreground#241407
button.hoverBackground#c7618b
button.secondaryBackground#e9dde033
button.secondaryForeground#f1dde3
button.secondaryHoverBackground#e9dde080
button.separator#2414074d
charts.blue#65c7ff
charts.green#70bf56
charts.orange#ff9a3d
charts.purple#c6a7ff
charts.red#ff0000
chat.checkpointSeparator#8fa6b2c7
chat.editedFileForeground#73b8ff
chat.editorBackground#2b2026
chat.requestBackground#4a3842
chat.requestBorder#d16a9466
chat.requestBubbleBackground#d16a9440
chat.requestBubbleHoverBackground#d16a9466
chat.slashCommandBackground#65c7ff33
chat.slashCommandForeground#65c7ff
commandCenter.activeBackground#d16a9466
commandCenter.activeBorder#d16a9473
commandCenter.activeForeground#f1dde3
commandCenter.background#2b2026
commandCenter.border#624b532e
commandCenter.foreground#f1dde3
commandCenter.inactiveBorder#624b532e
debugConsoleInputIcon.foreground#d16a94
debugExceptionWidget.background#362a31
debugExceptionWidget.border#624b532e
debugIcon.breakpointDisabledForeground#ffb06680
debugIcon.breakpointForeground#ffb066
debugToolBar.background#362a31
descriptionForeground#e9dde0
diffEditor.diagonalFill#624b532e
diffEditor.insertedTextBackground#70bf561f
diffEditor.removedTextBackground#f26d781f
disabledForeground#f1dde380
dropdown.background#362a31
dropdown.border#624b532e
dropdown.foreground#e9dde0
editor.background#2b2026
editor.findMatchBackground#ffd166bf
editor.findMatchHighlightBackground#ffd16661
editor.foreground#f1dde3
editor.inactiveSelectionBackground#d16a9424
editor.lineHighlightBackground#d16a9429
editor.rangeHighlightBackground#ffd16633
editor.selectionBackground#d16a9442
editor.selectionHighlightBackground#70bf5626
editor.selectionHighlightBorder#70bf5659
editor.snippetTabstopHighlightBackground#70bf5633
editor.wordHighlightBackground#73b8ff14
editor.wordHighlightBorder#73b8ff80
editor.wordHighlightStrongBackground#70bf5614
editor.wordHighlightStrongBorder#70bf5680
editorBracketHighlight.foreground1#8b5a2be6
editorBracketHighlight.foreground2#e5b94a
editorBracketHighlight.foreground3#5fb04ad9
editorBracketHighlight.foreground4#4c88d8d9
editorBracketHighlight.foreground5#6b4fa8d9
editorBracketHighlight.foreground6#b45a9cd9
editorBracketMatch.background#e9dde04d
editorBracketMatch.border#e9dde04d
editorCodeLens.foreground#8fa6b2c7
editorCursor.foreground#d16a94
editorError.foreground#d95757
editorGroup.background#362a31
editorGroup.border#362a31
editorGroupHeader.border#624b532e
editorGroupHeader.noTabsBackground#4a3842
editorGroupHeader.tabsBackground#4a3842
editorGroupHeader.tabsBorder#624b532e
editorGutter.addedBackground#70bf56
editorGutter.commentRangeForeground#624b532e
editorGutter.deletedBackground#f26d78
editorGutter.modifiedBackground#73b8ff
editorHoverWidget.background#362a31
editorHoverWidget.border#624b532e
editorIndentGuide.activeBackground#8b5a2b59
editorIndentGuide.activeBackground1#8b5a2be6
editorIndentGuide.activeBackground2#e5b94a
editorIndentGuide.activeBackground3#5fb04ad9
editorIndentGuide.activeBackground4#4c88d8d9
editorIndentGuide.activeBackground5#6b4fa8d9
editorIndentGuide.activeBackground6#b45a9cd9
editorIndentGuide.background#8b5a2b2e
editorIndentGuide.background1#8b5a2b59
editorIndentGuide.background2#e5b94a8c
editorIndentGuide.background3#5fb04a59
editorIndentGuide.background4#4c88d859
editorIndentGuide.background5#6b4fa859
editorIndentGuide.background6#b45a9c59
editorInlayHint.background#2b2026
editorInlayHint.foreground#f1dde380
editorLineNumber.activeForeground#e9dde0e6
editorLineNumber.foreground#e9dde099
editorLink.activeForeground#d16a94
editorMarkerNavigation.background#362a31
editorOverviewRuler.addedForeground#70bf56
editorOverviewRuler.border#624b532e
editorOverviewRuler.bracketMatchForeground#e9dde0b3
editorOverviewRuler.deletedForeground#f26d78
editorOverviewRuler.errorForeground#d95757
editorOverviewRuler.findMatchForeground#ffd166bf
editorOverviewRuler.modifiedForeground#73b8ff
editorOverviewRuler.warningForeground#ffd166
editorOverviewRuler.wordHighlightForeground#73b8ff66
editorOverviewRuler.wordHighlightStrongForeground#70bf5666
editorRuler.foreground#8b5a2b2e
editorStickyScroll.background#362a31
editorStickyScroll.border#624b532e
editorStickyScroll.shadow#624b5380
editorStickyScrollHover.background#d16a9440
editorSuggestWidget.background#362a31
editorSuggestWidget.border#624b532e
editorSuggestWidget.highlightForeground#d16a94
editorSuggestWidget.selectedBackground#d16a9466
editorWarning.foreground#ffd166
editorWhitespace.foreground#e9dde099
editorWidget.background#362a31
editorWidget.border#624b532e
editorWidget.resizeBorder#624b53a6
errorForeground#d95757
extensionButton.prominentBackground#d16a94
extensionButton.prominentForeground#241407
extensionButton.prominentHoverBackground#cc658f
focusBorder#624b532e
foreground#e9dde0
gitDecoration.conflictingResourceForeground#ffd166
gitDecoration.deletedResourceForeground#f26d78
gitDecoration.ignoredResourceForeground#e9dde080
gitDecoration.modifiedResourceForeground#73b8ff
gitDecoration.submoduleResourceForeground#c6a7ff
gitDecoration.untrackedResourceForeground#70bf56
icon.foreground#e9dde0
inlineChat.background#362a31
inlineChat.border#624b532e
inlineChat.foreground#f1dde3
inlineChat.shadow#624b5380
inlineChatDiff.inserted#70bf5633
inlineChatDiff.removed#f26d7833
inlineChatInput.background#2b2026
inlineChatInput.border#624b532e
inlineChatInput.focusBorder#d16a94b3
inlineChatInput.placeholderForeground#e9dde080
inlineEdit.gutterIndicator.background#362a31
inlineEdit.gutterIndicator.primaryBackground#d16a9424
inlineEdit.gutterIndicator.primaryBorder#d16a94bf
inlineEdit.gutterIndicator.primaryForeground#d16a94
inlineEdit.gutterIndicator.secondaryBackground#e9dde01f
inlineEdit.gutterIndicator.secondaryBorder#e9dde073
inlineEdit.gutterIndicator.secondaryForeground#e9dde0
inlineEdit.gutterIndicator.successfulBackground#70bf561f
inlineEdit.gutterIndicator.successfulBorder#70bf56bf
inlineEdit.gutterIndicator.successfulForeground#70bf56
inlineEdit.modifiedBackground#70bf5614
inlineEdit.modifiedBorder#70bf5699
inlineEdit.modifiedChangedLineBackground#70bf561f
inlineEdit.modifiedChangedTextBackground#70bf5633
inlineEdit.originalBackground#f26d7814
inlineEdit.originalBorder#f26d7899
inlineEdit.originalChangedLineBackground#f26d781f
inlineEdit.originalChangedTextBackground#f26d7833
input.background#2b2026
input.border#e9dde033
input.foreground#f1dde3
input.placeholderForeground#e9dde080
inputOption.activeBackground#d16a941a
inputOption.activeBorder#d16a9433
inputOption.activeForeground#d16a94
inputOption.hoverBackground#e9dde033
inputValidation.errorBackground#2b2026
inputValidation.errorBorder#d95757
inputValidation.infoBackground#4a3842
inputValidation.infoBorder#65c7ff
inputValidation.warningBackground#4a3842
inputValidation.warningBorder#ffd166
keybindingLabel.background#e9dde01a
keybindingLabel.border#f1dde31a
keybindingLabel.bottomBorder#f1dde31a
keybindingLabel.foreground#f1dde3
list.activeSelectionBackground#d16a9466
list.activeSelectionForeground#f1dde3
list.deemphasizedForeground#d95757
list.errorForeground#d95757
list.filterMatchBackground#efc25861
list.filterMatchBorder#ffd16661
list.focusBackground#d16a9466
list.focusForeground#f1dde3
list.focusOutline#d16a9466
list.highlightForeground#d16a94
list.hoverBackground#d16a9466
list.inactiveSelectionBackground#d16a9440
list.inactiveSelectionForeground#e9dde0
list.invalidItemForeground#e9dde04d
listFilterWidget.background#362a31
listFilterWidget.noMatchesOutline#d95757
listFilterWidget.outline#d16a94
menu.border#624b532e
minimap.background#4a3842
minimap.errorHighlight#d95757
minimap.findMatchHighlight#ffd166bf
minimap.selectionHighlight#d16a9442
minimapGutter.addedBackground#70bf56
minimapGutter.deletedBackground#f26d78
minimapGutter.modifiedBackground#73b8ff
multiDiffEditor.background#4a3842
multiDiffEditor.border#624b532e
multiDiffEditor.headerBackground#362a31
panel.background#362a31
panel.border#624b532e
panelStickyScroll.background#352930
panelStickyScroll.border#624b532e
panelStickyScroll.shadow#624b5380
panelTitle.activeBorder#d16a9473
panelTitle.activeForeground#d16a94
panelTitle.border#624b532e
panelTitle.inactiveForeground#e9dde0
peekView.border#d16a9466
peekViewEditor.background#362a31
peekViewEditor.matchHighlightBackground#ffd16661
peekViewEditor.matchHighlightBorder#efc25861
peekViewResult.background#362a31
peekViewResult.fileForeground#f1dde3
peekViewResult.lineForeground#e9dde0
peekViewResult.matchHighlightBackground#ffd16661
peekViewResult.selectionBackground#d16a9466
peekViewTitle.background#d16a9466
peekViewTitleDescription.foreground#e9dde0
peekViewTitleLabel.foreground#f1dde3
pickerGroup.border#624b532e
pickerGroup.foreground#e9dde080
profileBadge.background#d16a94
profileBadge.foreground#241407
progressBar.background#d16a94
sash.background#362a31
sash.hoverBackground#d16a94
scrollbar.shadow#362a31
scrollbarSlider.activeBackground#e9dde0b3
scrollbarSlider.background#e9dde066
scrollbarSlider.hoverBackground#e9dde099
selection.background#d16a9442
settings.headerForeground#f1dde3
settings.modifiedItemIndicator#73b8ff
sideBar.background#4a3842
sideBar.border#624b532e
sideBar.dropBackground#d16a9429
sideBarActivityBarTop.border#624b532e
sideBarSectionHeader.background#493741
sideBarSectionHeader.border#624b532e
sideBarSectionHeader.foreground#e9dde0
sideBarStickyScroll.background#493741
sideBarStickyScroll.border#624b532e
sideBarStickyScroll.shadow#624b5380
sideBarTitle.background#4a3842
sideBarTitle.border#624b532e
sideBarTitle.foreground#e9dde0
simpleFindWidget.sashBorder#624b5399
statusBar.background#674755
statusBar.border#81636fad
statusBar.debuggingBackground#ffb066
statusBar.debuggingForeground#2b2026
statusBar.focusBorder#81636fb3
statusBar.foreground#f1dde3
statusBarItem.activeBackground#e9dde033
statusBarItem.hoverBackground#e9dde033
statusBarItem.prominentBackground#624b532e
statusBarItem.prominentHoverBackground#e9dde029
statusBarItem.remoteBackground#d16a94
statusBarItem.remoteForeground#241407
symbolIcon.arrayForeground#65c7ff
symbolIcon.booleanForeground#c6a7ff
symbolIcon.classForeground#65c7ff
symbolIcon.colorForeground#ffb066
symbolIcon.constantForeground#c6a7ff
symbolIcon.constructorForeground#47e0b1
symbolIcon.enumeratorForeground#65c7ff
symbolIcon.enumeratorMemberForeground#c6a7ff
symbolIcon.eventForeground#ffb066
symbolIcon.fieldForeground#ff7fa3
symbolIcon.fileForeground#e9dde0
symbolIcon.folderForeground#e9dde0
symbolIcon.functionForeground#47e0b1
symbolIcon.interfaceForeground#65c7ff
symbolIcon.keyForeground#65c7ff
symbolIcon.keywordForeground#ff9a3d
symbolIcon.methodForeground#47e0b1
symbolIcon.moduleForeground#a5d85a
symbolIcon.namespaceForeground#a5d85a
symbolIcon.nullForeground#c6a7ff
symbolIcon.numberForeground#c6a7ff
symbolIcon.objectForeground#65c7ff
symbolIcon.operatorForeground#ffb066
symbolIcon.packageForeground#a5d85a
symbolIcon.propertyForeground#ff7fa3
symbolIcon.referenceForeground#65c7ff
symbolIcon.snippetForeground#ffb066
symbolIcon.stringForeground#a5d85a
symbolIcon.structForeground#65c7ff
symbolIcon.textForeground#f1dde3
symbolIcon.typeParameterForeground#65c7ff
symbolIcon.unitForeground#c6a7ff
symbolIcon.variableForeground#f1dde3
tab.activeBackground#2b2026
tab.activeBorder#2b2026
tab.activeForeground#f1dde3
tab.border#624b532e
tab.inactiveBackground#4a3842
tab.inactiveForeground#e9dde0
tab.lastPinnedBorder#624b532e
tab.unfocusedActiveBorder#2b2026
tab.unfocusedActiveForeground#e9dde0
tab.unfocusedInactiveForeground#e9dde0
terminal.ansiBlack#101418
terminal.ansiBlue#70b7ff
terminal.ansiBrightBlack#667785
terminal.ansiBrightBlue#8bc7ff
terminal.ansiBrightCyan#76f0f2
terminal.ansiBrightGreen#9af27e
terminal.ansiBrightMagenta#e2a8ff
terminal.ansiBrightRed#ff8585
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe082
terminal.ansiCyan#55dde8
terminal.ansiGreen#7fe36a
terminal.ansiMagenta#d991ff
terminal.ansiRed#ff6b6b
terminal.ansiWhite#d7dce2
terminal.ansiYellow#ffd166
terminal.background#4a3842
terminal.foreground#f1dde3
terminalChrome.background#4a3842
terminalChrome.border#624b532e
terminalCommandGuide.foreground#e9dde04d
terminalCursor.foreground#d16a94
terminalStickyScroll.background#493741
terminalStickyScroll.border#624b532e
terminalStickyScroll.shadow#624b5380
terminalStickyScrollHover.background#d16a9440
testing.iconPassed#70bf56
textBlockQuote.background#362a31
textLink.activeForeground#d16a94
textLink.foreground#bf5984
textPreformat.foreground#f1dde3
titleBar.activeBackground#382c32
titleBar.activeForeground#f1dde3
titleBar.border#594b52ad
titleBar.inactiveBackground#30242a
titleBar.inactiveForeground#f1dde3d9
toolbar.hoverBackground#e9dde04d
tree.indentGuidesStroke#8b5a2b59
tree.tableColumnsBorder#0000ff
walkThrough.embeddedEditorBackground#362a31
welcomePage.buttonBackground#d16a9466
welcomePage.progress.background#d16a9429
welcomePage.tileBackground#4a3842
welcomePage.tileShadow#624b5380
widget.border#624b532e
widget.shadow#624b5380

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#f1dde3	—
comment	#8fa6b2c7	italic
string, constant.other.symbol	#a5d85a	—
string.regexp, constant.character, constant.other	#ffd166	—
constant.numeric	#c6a7ff	—
constant.language	#c6a7ff	—
variable, variable.parameter.function-call	#f1dde3	—
variable.member	#ff7fa3	—
variable.language	#65c7ff	italic
storage	#ff9a3d	—
keyword	#ff9a3d	—
keyword.operator	#ffb066	—
punctuation.separator, punctuation.terminator	#f1dde3b3	—
punctuation.section	#f1dde3	—
punctuation.accessor	#ffb066	—
punctuation.definition.template-expression	#ff9a3d	—
punctuation.section.embedded	#ff9a3d	—
meta.embedded	#f1dde3	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#65c7ff	—
entity.other.inherited-class	#65c7ff	—
storage.type.function	#ff9a3d	—
source.java storage.type.primitive	#65c7ff	—
entity.name.function	#47e0b1	—
variable.parameter, meta.parameter	#c6a7ff	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#47e0b1	—
support.function, support.macro	#ff7fa3	—
entity.name.import, entity.name.package	#a5d85a	—
entity.name	#65c7ff	—
entity.name.tag, meta.tag.sgml	#65c7ff	—
support.class.component	#65c7ff	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#65c7ff80	—
entity.other.attribute-name	#47e0b1	—
entity.other.attribute-name.pseudo-class	#ffd166	—
support.constant	#ffb066	italic
support.type, support.class, source.go storage.type	#65c7ff	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#ffb066	—
invalid	#d95757	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#47e0b1	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#65c7ff	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#8fa6b2c7	—
support.type.property-name	#65c7ff	normal
constant.numeric.line-number.find-in-files - match	#8fa6b2c7	—
constant.numeric.line-number.match	#ff9a3d	—
entity.name.filename.find-in-files	#a5d85a	—
message.error	#d95757	—
markup.heading, markup.heading entity.name	#a5d85a	bold
markup.underline.link, string.other.link	#65c7ff	—
markup.italic, emphasis	#ff7fa3	italic
markup.bold	#ff7fa3	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#8fa6b2c7	bold
markup.quote	#ffd166	italic
markup.list punctuation.definition.list.begin	#47e0b1	—
markup.inserted	#70bf56	—
markup.changed	#73b8ff	—
markup.deleted	#f26d78	—
markup.strike	#ffb066	—
markup.strong	—	bold
markup.table	#65c7ff	—
text.html.markdown markup.inline.raw	#ffb066	—
text.html.markdown meta.dummy.line-break	#8fa6b2c7	—
punctuation.definition.markdown	#8fa6b2c7	—

VS Code preview

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

Craft Theme — Craft Cherry Blossom 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#c05c7a38
activityBar.activeBorder#c05c7a
activityBar.activeFocusBorder#c05c7abf
activityBar.background#f1dee1
activityBar.border#a88f951f
activityBar.dropBorder#c05c7ab3
activityBar.foreground#c05c7a
activityBar.inactiveForeground#67555ac7
activityBarBadge.background#c05c7a
activityBarBadge.foreground#ffffff
activityBarTop.activeBackground#c05c7a38
activityBarTop.activeBorder#c05c7a73
activityBarTop.background#f2dfe2
activityBarTop.foreground#c05c7a
activityBarTop.inactiveForeground#67555ac7
badge.background#c05c7a33
badge.foreground#c05c7a
button.background#c05c7a
button.border#ffffff1a
button.foreground#ffffff
button.hoverBackground#b65371
button.secondaryBackground#67555a33
button.secondaryForeground#5f5655
button.secondaryHoverBackground#67555a80
button.separator#ffffff4d
charts.blue#0079d6
charts.green#4fa84b
charts.orange#d85b00
charts.purple#7e63c8
charts.red#ff5a5a
chat.checkpointSeparator#68798cb3
chat.editedFileForeground#3b79c1
chat.editorBackground#fbf3f1
chat.requestBackground#f2dfe2
chat.requestBorder#c05c7a38
chat.requestBubbleBackground#c05c7a24
chat.requestBubbleHoverBackground#c05c7a38
chat.slashCommandBackground#0079d633
chat.slashCommandForeground#0079d6
commandCenter.activeBackground#c05c7a38
commandCenter.activeBorder#c05c7a73
commandCenter.activeForeground#5f5655
commandCenter.background#fbf3f1
commandCenter.border#a88f951f
commandCenter.foreground#5f5655
commandCenter.inactiveBorder#a88f951f
debugConsoleInputIcon.foreground#c05c7a
debugExceptionWidget.background#e9cdd4
debugExceptionWidget.border#a88f951f
debugIcon.breakpointDisabledForeground#c96a2b80
debugIcon.breakpointForeground#c96a2b
debugToolBar.background#e9cdd4
descriptionForeground#67555a
diffEditor.diagonalFill#a88f951f
diffEditor.insertedTextBackground#4fa84b1f
diffEditor.removedTextBackground#b9473f1f
disabledForeground#5f565580
dropdown.background#e9cdd4
dropdown.border#a88f951f
dropdown.foreground#67555a
editor.background#fbf3f1
editor.findMatchBackground#b87500e6
editor.findMatchHighlightBackground#b8750080
editor.foreground#5f5655
editor.inactiveSelectionBackground#c05c7a1f
editor.lineHighlightBackground#c05c7a1f
editor.rangeHighlightBackground#b8750033
editor.selectionBackground#c05c7a38
editor.selectionHighlightBackground#4fa84b26
editor.selectionHighlightBorder#4fa84b59
editor.snippetTabstopHighlightBackground#4fa84b33
editor.wordHighlightBackground#3b79c114
editor.wordHighlightBorder#3b79c180
editor.wordHighlightStrongBackground#4fa84b14
editor.wordHighlightStrongBorder#4fa84b80
editorBracketHighlight.foreground1#8b5a2be6
editorBracketHighlight.foreground2#e5b94a
editorBracketHighlight.foreground3#5fb04ad9
editorBracketHighlight.foreground4#4c88d8d9
editorBracketHighlight.foreground5#6b4fa8d9
editorBracketHighlight.foreground6#b45a9cd9
editorBracketMatch.background#67555a4d
editorBracketMatch.border#67555a4d
editorCodeLens.foreground#68798cb3
editorCursor.foreground#c05c7a
editorError.foreground#b9473f
editorGroup.background#e9cdd4
editorGroup.border#e9cdd4
editorGroupHeader.border#a88f951f
editorGroupHeader.noTabsBackground#f2dfe2
editorGroupHeader.tabsBackground#f2dfe2
editorGroupHeader.tabsBorder#a88f951f
editorGutter.addedBackground#4fa84b
editorGutter.commentRangeForeground#a88f951f
editorGutter.deletedBackground#b9473f
editorGutter.modifiedBackground#3b79c1
editorHoverWidget.background#e9cdd4
editorHoverWidget.border#a88f951f
editorIndentGuide.activeBackground#8b5a2b59
editorIndentGuide.activeBackground1#8b5a2be6
editorIndentGuide.activeBackground2#e5b94a
editorIndentGuide.activeBackground3#5fb04ad9
editorIndentGuide.activeBackground4#4c88d8d9
editorIndentGuide.activeBackground5#6b4fa8d9
editorIndentGuide.activeBackground6#b45a9cd9
editorIndentGuide.background#8b5a2b2e
editorIndentGuide.background1#8b5a2b59
editorIndentGuide.background2#e5b94a8c
editorIndentGuide.background3#5fb04a59
editorIndentGuide.background4#4c88d859
editorIndentGuide.background5#6b4fa859
editorIndentGuide.background6#b45a9c59
editorInlayHint.background#fbf3f1
editorInlayHint.foreground#5f565580
editorLineNumber.activeForeground#67555ab3
editorLineNumber.foreground#67555a66
editorLink.activeForeground#c05c7a
editorMarkerNavigation.background#e9cdd4
editorOverviewRuler.addedForeground#4fa84b
editorOverviewRuler.border#a88f951f
editorOverviewRuler.bracketMatchForeground#67555ab3
editorOverviewRuler.deletedForeground#b9473f
editorOverviewRuler.errorForeground#b9473f
editorOverviewRuler.findMatchForeground#b87500e6
editorOverviewRuler.modifiedForeground#3b79c1
editorOverviewRuler.warningForeground#b87500
editorOverviewRuler.wordHighlightForeground#3b79c166
editorOverviewRuler.wordHighlightStrongForeground#4fa84b66
editorRuler.foreground#8b5a2b2e
editorStickyScroll.background#e9cdd4
editorStickyScroll.border#a88f951f
editorStickyScroll.shadow#a88f9533
editorStickyScrollHover.background#c05c7a24
editorSuggestWidget.background#e9cdd4
editorSuggestWidget.border#a88f951f
editorSuggestWidget.highlightForeground#c05c7a
editorSuggestWidget.selectedBackground#c05c7a38
editorWarning.foreground#b87500
editorWhitespace.foreground#67555a66
editorWidget.background#e9cdd4
editorWidget.border#a88f951f
editorWidget.resizeBorder#a88f95a6
errorForeground#b9473f
extensionButton.prominentBackground#c05c7a
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#bb5775
focusBorder#a88f951f
foreground#67555a
gitDecoration.conflictingResourceForeground#b87500
gitDecoration.deletedResourceForeground#b9473f
gitDecoration.ignoredResourceForeground#67555a80
gitDecoration.modifiedResourceForeground#3b79c1
gitDecoration.submoduleResourceForeground#7e63c8
gitDecoration.untrackedResourceForeground#4fa84b
icon.foreground#67555a
inlineChat.background#e9cdd4
inlineChat.border#a88f951f
inlineChat.foreground#5f5655
inlineChat.shadow#a88f9533
inlineChatDiff.inserted#4fa84b33
inlineChatDiff.removed#b9473f33
inlineChatInput.background#fbf3f1
inlineChatInput.border#a88f951f
inlineChatInput.focusBorder#c05c7ab3
inlineChatInput.placeholderForeground#67555a80
inlineEdit.gutterIndicator.background#e9cdd4
inlineEdit.gutterIndicator.primaryBackground#c05c7a24
inlineEdit.gutterIndicator.primaryBorder#c05c7abf
inlineEdit.gutterIndicator.primaryForeground#c05c7a
inlineEdit.gutterIndicator.secondaryBackground#67555a1f
inlineEdit.gutterIndicator.secondaryBorder#67555a73
inlineEdit.gutterIndicator.secondaryForeground#67555a
inlineEdit.gutterIndicator.successfulBackground#4fa84b1f
inlineEdit.gutterIndicator.successfulBorder#4fa84bbf
inlineEdit.gutterIndicator.successfulForeground#4fa84b
inlineEdit.modifiedBackground#4fa84b14
inlineEdit.modifiedBorder#4fa84b99
inlineEdit.modifiedChangedLineBackground#4fa84b1f
inlineEdit.modifiedChangedTextBackground#4fa84b33
inlineEdit.originalBackground#b9473f14
inlineEdit.originalBorder#b9473f99
inlineEdit.originalChangedLineBackground#b9473f1f
inlineEdit.originalChangedTextBackground#b9473f33
input.background#fbf3f1
input.border#67555a33
input.foreground#5f5655
input.placeholderForeground#67555a80
inputOption.activeBackground#c05c7a1a
inputOption.activeBorder#c05c7a33
inputOption.activeForeground#c05c7a
inputOption.hoverBackground#67555a33
inputValidation.errorBackground#fbf3f1
inputValidation.errorBorder#b9473f
inputValidation.infoBackground#f2dfe2
inputValidation.infoBorder#0079d6
inputValidation.warningBackground#f2dfe2
inputValidation.warningBorder#b87500
keybindingLabel.background#67555a1a
keybindingLabel.border#5f56551a
keybindingLabel.bottomBorder#5f56551a
keybindingLabel.foreground#5f5655
list.activeSelectionBackground#c05c7a38
list.activeSelectionForeground#5f5655
list.deemphasizedForeground#b9473f
list.errorForeground#b9473f
list.filterMatchBackground#a8680080
list.filterMatchBorder#b8750080
list.focusBackground#c05c7a38
list.focusForeground#5f5655
list.focusOutline#c05c7a38
list.highlightForeground#c05c7a
list.hoverBackground#c05c7a38
list.inactiveSelectionBackground#c05c7a24
list.inactiveSelectionForeground#67555a
list.invalidItemForeground#67555a4d
listFilterWidget.background#e9cdd4
listFilterWidget.noMatchesOutline#b9473f
listFilterWidget.outline#c05c7a
menu.border#a88f951f
minimap.background#f2dfe2
minimap.errorHighlight#b9473f
minimap.findMatchHighlight#b87500e6
minimap.selectionHighlight#c05c7a38
minimapGutter.addedBackground#4fa84b
minimapGutter.deletedBackground#b9473f
minimapGutter.modifiedBackground#3b79c1
multiDiffEditor.background#f2dfe2
multiDiffEditor.border#a88f951f
multiDiffEditor.headerBackground#e9cdd4
panel.background#e9cdd4
panel.border#a88f951f
panelStickyScroll.background#e8ccd3
panelStickyScroll.border#a88f951f
panelStickyScroll.shadow#a88f9533
panelTitle.activeBorder#c05c7a73
panelTitle.activeForeground#c05c7a
panelTitle.border#a88f951f
panelTitle.inactiveForeground#67555a
peekView.border#c05c7a38
peekViewEditor.background#e9cdd4
peekViewEditor.matchHighlightBackground#b8750080
peekViewEditor.matchHighlightBorder#a8680080
peekViewResult.background#e9cdd4
peekViewResult.fileForeground#5f5655
peekViewResult.lineForeground#67555a
peekViewResult.matchHighlightBackground#b8750080
peekViewResult.selectionBackground#c05c7a38
peekViewTitle.background#c05c7a38
peekViewTitleDescription.foreground#67555a
peekViewTitleLabel.foreground#5f5655
pickerGroup.border#a88f951f
pickerGroup.foreground#67555a80
profileBadge.background#c05c7a
profileBadge.foreground#ffffff
progressBar.background#c05c7a
sash.background#e9cdd4
sash.hoverBackground#c05c7a
scrollbar.shadow#e9cdd4
scrollbarSlider.activeBackground#67555ab3
scrollbarSlider.background#67555a66
scrollbarSlider.hoverBackground#67555a99
selection.background#c05c7a38
settings.headerForeground#5f5655
settings.modifiedItemIndicator#3b79c1
sideBar.background#f2dfe2
sideBar.border#a88f951f
sideBar.dropBackground#c05c7a29
sideBarActivityBarTop.border#a88f951f
sideBarSectionHeader.background#f1dee1
sideBarSectionHeader.border#a88f951f
sideBarSectionHeader.foreground#67555a
sideBarStickyScroll.background#f1dee1
sideBarStickyScroll.border#a88f951f
sideBarStickyScroll.shadow#a88f9533
sideBarTitle.background#f2dfe2
sideBarTitle.border#a88f951f
sideBarTitle.foreground#67555a
simpleFindWidget.sashBorder#a88f9599
statusBar.background#81625e
statusBar.border#987c788f
statusBar.debuggingBackground#c96a2b
statusBar.debuggingForeground#fbf3f1
statusBar.focusBorder#987c78b3
statusBar.foreground#f7ebec
statusBarItem.activeBackground#67555a33
statusBarItem.hoverBackground#67555a33
statusBarItem.prominentBackground#a88f951f
statusBarItem.prominentHoverBackground#67555a29
statusBarItem.remoteBackground#c05c7a
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#0079d6
symbolIcon.booleanForeground#7e63c8
symbolIcon.classForeground#0079d6
symbolIcon.colorForeground#b9822d
symbolIcon.constantForeground#7e63c8
symbolIcon.constructorForeground#008a70
symbolIcon.enumeratorForeground#0079d6
symbolIcon.enumeratorMemberForeground#7e63c8
symbolIcon.eventForeground#b9822d
symbolIcon.fieldForeground#c94f6d
symbolIcon.fileForeground#67555a
symbolIcon.folderForeground#67555a
symbolIcon.functionForeground#008a70
symbolIcon.interfaceForeground#0079d6
symbolIcon.keyForeground#0079d6
symbolIcon.keywordForeground#d85b00
symbolIcon.methodForeground#008a70
symbolIcon.moduleForeground#5c8f00
symbolIcon.namespaceForeground#5c8f00
symbolIcon.nullForeground#7e63c8
symbolIcon.numberForeground#7e63c8
symbolIcon.objectForeground#0079d6
symbolIcon.operatorForeground#c96a2b
symbolIcon.packageForeground#5c8f00
symbolIcon.propertyForeground#c94f6d
symbolIcon.referenceForeground#0079d6
symbolIcon.snippetForeground#b9822d
symbolIcon.stringForeground#5c8f00
symbolIcon.structForeground#0079d6
symbolIcon.textForeground#5f5655
symbolIcon.typeParameterForeground#0079d6
symbolIcon.unitForeground#7e63c8
symbolIcon.variableForeground#5f5655
tab.activeBackground#fbf3f1
tab.activeBorder#fbf3f1
tab.activeForeground#5f5655
tab.border#a88f951f
tab.inactiveBackground#f2dfe2
tab.inactiveForeground#67555a
tab.lastPinnedBorder#a88f951f
tab.unfocusedActiveBorder#fbf3f1
tab.unfocusedActiveForeground#67555a
tab.unfocusedInactiveForeground#67555a
terminal.ansiBlack#1d1d21
terminal.ansiBlue#2368c4
terminal.ansiBrightBlack#5a6268
terminal.ansiBrightBlue#1e74d8
terminal.ansiBrightCyan#008c96
terminal.ansiBrightGreen#1f9f36
terminal.ansiBrightMagenta#b94bd0
terminal.ansiBrightRed#e53935
terminal.ansiBrightWhite#5a5f62
terminal.ansiBrightYellow#b08000
terminal.ansiCyan#007f89
terminal.ansiGreen#2e8b2e
terminal.ansiMagenta#a83dba
terminal.ansiRed#c62828
terminal.ansiWhite#422733
terminal.ansiYellow#9a7200
terminal.background#f2dfe2
terminal.foreground#422733
terminalChrome.background#f2dfe2
terminalChrome.border#a88f951f
terminalCommandGuide.foreground#67555a4d
terminalCursor.foreground#c05c7a
terminalStickyScroll.background#f1dee1
terminalStickyScroll.border#a88f951f
terminalStickyScroll.shadow#a88f9533
terminalStickyScrollHover.background#c05c7a24
testing.iconPassed#4fa84b
textBlockQuote.background#e9cdd4
textLink.activeForeground#c05c7a
textLink.foreground#ae4c6a
textPreformat.foreground#5f5655
titleBar.activeBackground#f0e4e6
titleBar.activeForeground#5f5655
titleBar.border#d1c6c78f
titleBar.inactiveBackground#ece0e2
titleBar.inactiveForeground#5f5655d9
toolbar.hoverBackground#67555a4d
tree.indentGuidesStroke#8b5a2b59
tree.tableColumnsBorder#4c88d8
walkThrough.embeddedEditorBackground#e9cdd4
welcomePage.buttonBackground#c05c7a66
welcomePage.progress.background#c05c7a1f
welcomePage.tileBackground#f2dfe2
welcomePage.tileShadow#a88f9533
widget.border#a88f951f
widget.shadow#a88f9533

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#5f5655	—
comment	#68798cb3	italic
string, constant.other.symbol	#5c8f00	—
string.regexp, constant.character, constant.other	#b87500	—
constant.numeric	#7e63c8	—
constant.language	#7e63c8	—
variable, variable.parameter.function-call	#5f5655	—
variable.member	#c94f6d	—
variable.language	#0079d6	italic
storage	#d85b00	—
keyword	#d85b00	—
keyword.operator	#c96a2b	—
punctuation.separator, punctuation.terminator	#5f5655b3	—
punctuation.section	#5f5655	—
punctuation.accessor	#c96a2b	—
punctuation.definition.template-expression	#d85b00	—
punctuation.section.embedded	#d85b00	—
meta.embedded	#5f5655	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#0079d6	—
entity.other.inherited-class	#0079d6	—
storage.type.function	#d85b00	—
source.java storage.type.primitive	#0079d6	—
entity.name.function	#008a70	—
variable.parameter, meta.parameter	#7e63c8	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#008a70	—
support.function, support.macro	#c94f6d	—
entity.name.import, entity.name.package	#5c8f00	—
entity.name	#0079d6	—
entity.name.tag, meta.tag.sgml	#0079d6	—
support.class.component	#0079d6	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#0079d680	—
entity.other.attribute-name	#008a70	—
entity.other.attribute-name.pseudo-class	#b87500	—
support.constant	#c96a2b	italic
support.type, support.class, source.go storage.type	#0079d6	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#b9822d	—
invalid	#b9473f	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#008a70	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#0079d6	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#68798cb3	—
support.type.property-name	#0079d6	normal
constant.numeric.line-number.find-in-files - match	#68798cb3	—
constant.numeric.line-number.match	#d85b00	—
entity.name.filename.find-in-files	#5c8f00	—
message.error	#b9473f	—
markup.heading, markup.heading entity.name	#5c8f00	bold
markup.underline.link, string.other.link	#0079d6	—
markup.italic, emphasis	#c94f6d	italic
markup.bold	#c94f6d	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#68798cb3	bold
markup.quote	#b87500	italic
markup.list punctuation.definition.list.begin	#008a70	—
markup.inserted	#4fa84b	—
markup.changed	#3b79c1	—
markup.deleted	#b9473f	—
markup.strike	#b9822d	—
markup.strong	—	bold
markup.table	#0079d6	—
text.html.markdown markup.inline.raw	#c96a2b	—
text.html.markdown meta.dummy.line-break	#68798cb3	—
punctuation.definition.markdown	#68798cb3	—

VS Code preview

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

Craft Theme — Craft Classic 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#2aa18a66
activityBar.activeBorder#2aa18a
activityBar.activeFocusBorder#2aa18abf
activityBar.background#223120
activityBar.border#4b65502e
activityBar.dropBorder#2aa18ab3
activityBar.foreground#2aa18a
activityBar.inactiveForeground#c7d4bfc7
activityBarBadge.background#2aa18a
activityBarBadge.foreground#0d1f1a
activityBarTop.activeBackground#2aa18a66
activityBarTop.activeBorder#2aa18a73
activityBarTop.background#233221
activityBarTop.foreground#2aa18a
activityBarTop.inactiveForeground#c7d4bfc7
badge.background#2aa18a33
badge.foreground#2aa18a
button.background#2aa18a
button.border#0d1f1a1a
button.foreground#0d1f1a
button.hoverBackground#1a9781
button.secondaryBackground#c7d4bf33
button.secondaryForeground#d7e3d1
button.secondaryHoverBackground#c7d4bf80
button.separator#0d1f1a4d
charts.blue#65c7ff
charts.green#70bf56
charts.orange#ff9a3d
charts.purple#c6a7ff
charts.red#ff0000
chat.checkpointSeparator#8fa6b2c7
chat.editedFileForeground#73b8ff
chat.editorBackground#1d271c
chat.requestBackground#233221
chat.requestBorder#2aa18a66
chat.requestBubbleBackground#2aa18a40
chat.requestBubbleHoverBackground#2aa18a66
chat.slashCommandBackground#65c7ff33
chat.slashCommandForeground#65c7ff
commandCenter.activeBackground#2aa18a66
commandCenter.activeBorder#2aa18a73
commandCenter.activeForeground#d7e3d1
commandCenter.background#1d271c
commandCenter.border#4b65502e
commandCenter.foreground#d7e3d1
commandCenter.inactiveBorder#4b65502e
debugConsoleInputIcon.foreground#2aa18a
debugExceptionWidget.background#202a20
debugExceptionWidget.border#4b65502e
debugIcon.breakpointDisabledForeground#ffb06680
debugIcon.breakpointForeground#ffb066
debugToolBar.background#202a20
descriptionForeground#c7d4bf
diffEditor.diagonalFill#4b65502e
diffEditor.insertedTextBackground#70bf561f
diffEditor.removedTextBackground#f26d781f
disabledForeground#d7e3d180
dropdown.background#202a20
dropdown.border#4b65502e
dropdown.foreground#c7d4bf
editor.background#1d271c
editor.findMatchBackground#ffd166bf
editor.findMatchHighlightBackground#ffd16661
editor.foreground#d7e3d1
editor.inactiveSelectionBackground#2aa18a24
editor.lineHighlightBackground#2aa18a29
editor.rangeHighlightBackground#ffd16633
editor.selectionBackground#2aa18a42
editor.selectionHighlightBackground#70bf5626
editor.selectionHighlightBorder#70bf5659
editor.snippetTabstopHighlightBackground#70bf5633
editor.wordHighlightBackground#73b8ff14
editor.wordHighlightBorder#73b8ff80
editor.wordHighlightStrongBackground#70bf5614
editor.wordHighlightStrongBorder#70bf5680
editorBracketHighlight.foreground1#8b5a2be6
editorBracketHighlight.foreground2#e5b94a
editorBracketHighlight.foreground3#5fb04ad9
editorBracketHighlight.foreground4#4c88d8d9
editorBracketHighlight.foreground5#6b4fa8d9
editorBracketHighlight.foreground6#b45a9cd9
editorBracketMatch.background#c7d4bf4d
editorBracketMatch.border#c7d4bf4d
editorCodeLens.foreground#8fa6b2c7
editorCursor.foreground#2aa18a
editorError.foreground#d95757
editorGroup.background#202a20
editorGroup.border#202a20
editorGroupHeader.border#4b65502e
editorGroupHeader.noTabsBackground#233221
editorGroupHeader.tabsBackground#233221
editorGroupHeader.tabsBorder#4b65502e
editorGutter.addedBackground#70bf56
editorGutter.commentRangeForeground#4b65502e
editorGutter.deletedBackground#f26d78
editorGutter.modifiedBackground#73b8ff
editorHoverWidget.background#202a20
editorHoverWidget.border#4b65502e
editorIndentGuide.activeBackground#8b5a2b59
editorIndentGuide.activeBackground1#8b5a2be6
editorIndentGuide.activeBackground2#e5b94a
editorIndentGuide.activeBackground3#5fb04ad9
editorIndentGuide.activeBackground4#4c88d8d9
editorIndentGuide.activeBackground5#6b4fa8d9
editorIndentGuide.activeBackground6#b45a9cd9
editorIndentGuide.background#8b5a2b2e
editorIndentGuide.background1#8b5a2b59
editorIndentGuide.background2#e5b94a8c
editorIndentGuide.background3#5fb04a59
editorIndentGuide.background4#4c88d859
editorIndentGuide.background5#6b4fa859
editorIndentGuide.background6#b45a9c59
editorInlayHint.background#1d271c
editorInlayHint.foreground#d7e3d180
editorLineNumber.activeForeground#c7d4bfe6
editorLineNumber.foreground#c7d4bf99
editorLink.activeForeground#2aa18a
editorMarkerNavigation.background#202a20
editorOverviewRuler.addedForeground#70bf56
editorOverviewRuler.border#4b65502e
editorOverviewRuler.bracketMatchForeground#c7d4bfb3
editorOverviewRuler.deletedForeground#f26d78
editorOverviewRuler.errorForeground#d95757
editorOverviewRuler.findMatchForeground#ffd166bf
editorOverviewRuler.modifiedForeground#73b8ff
editorOverviewRuler.warningForeground#ffd166
editorOverviewRuler.wordHighlightForeground#73b8ff66
editorOverviewRuler.wordHighlightStrongForeground#70bf5666
editorRuler.foreground#8b5a2b2e
editorStickyScroll.background#202a20
editorStickyScroll.border#4b65502e
editorStickyScroll.shadow#4b655080
editorStickyScrollHover.background#2aa18a40
editorSuggestWidget.background#202a20
editorSuggestWidget.border#4b65502e
editorSuggestWidget.highlightForeground#2aa18a
editorSuggestWidget.selectedBackground#2aa18a66
editorWarning.foreground#ffd166
editorWhitespace.foreground#c7d4bf99
editorWidget.background#202a20
editorWidget.border#4b65502e
editorWidget.resizeBorder#4b6550a6
errorForeground#d95757
extensionButton.prominentBackground#2aa18a
extensionButton.prominentForeground#0d1f1a
extensionButton.prominentHoverBackground#239c85
focusBorder#4b65502e
foreground#c7d4bf
gitDecoration.conflictingResourceForeground#ffd166
gitDecoration.deletedResourceForeground#f26d78
gitDecoration.ignoredResourceForeground#c7d4bf80
gitDecoration.modifiedResourceForeground#73b8ff
gitDecoration.submoduleResourceForeground#c6a7ff
gitDecoration.untrackedResourceForeground#70bf56
icon.foreground#c7d4bf
inlineChat.background#202a20
inlineChat.border#4b65502e
inlineChat.foreground#d7e3d1
inlineChat.shadow#4b655080
inlineChatDiff.inserted#70bf5633
inlineChatDiff.removed#f26d7833
inlineChatInput.background#1d271c
inlineChatInput.border#4b65502e
inlineChatInput.focusBorder#2aa18ab3
inlineChatInput.placeholderForeground#c7d4bf80
inlineEdit.gutterIndicator.background#202a20
inlineEdit.gutterIndicator.primaryBackground#2aa18a24
inlineEdit.gutterIndicator.primaryBorder#2aa18abf
inlineEdit.gutterIndicator.primaryForeground#2aa18a
inlineEdit.gutterIndicator.secondaryBackground#c7d4bf1f
inlineEdit.gutterIndicator.secondaryBorder#c7d4bf73
inlineEdit.gutterIndicator.secondaryForeground#c7d4bf
inlineEdit.gutterIndicator.successfulBackground#70bf561f
inlineEdit.gutterIndicator.successfulBorder#70bf56bf
inlineEdit.gutterIndicator.successfulForeground#70bf56
inlineEdit.modifiedBackground#70bf5614
inlineEdit.modifiedBorder#70bf5699
inlineEdit.modifiedChangedLineBackground#70bf561f
inlineEdit.modifiedChangedTextBackground#70bf5633
inlineEdit.originalBackground#f26d7814
inlineEdit.originalBorder#f26d7899
inlineEdit.originalChangedLineBackground#f26d781f
inlineEdit.originalChangedTextBackground#f26d7833
input.background#1d271c
input.border#c7d4bf33
input.foreground#d7e3d1
input.placeholderForeground#c7d4bf80
inputOption.activeBackground#2aa18a1a
inputOption.activeBorder#2aa18a33
inputOption.activeForeground#2aa18a
inputOption.hoverBackground#c7d4bf33
inputValidation.errorBackground#1d271c
inputValidation.errorBorder#d95757
inputValidation.infoBackground#233221
inputValidation.infoBorder#65c7ff
inputValidation.warningBackground#233221
inputValidation.warningBorder#ffd166
keybindingLabel.background#c7d4bf1a
keybindingLabel.border#d7e3d11a
keybindingLabel.bottomBorder#d7e3d11a
keybindingLabel.foreground#d7e3d1
list.activeSelectionBackground#2aa18a66
list.activeSelectionForeground#d7e3d1
list.deemphasizedForeground#d95757
list.errorForeground#d95757
list.filterMatchBackground#efc25861
list.filterMatchBorder#ffd16661
list.focusBackground#2aa18a66
list.focusForeground#d7e3d1
list.focusOutline#2aa18a66
list.highlightForeground#2aa18a
list.hoverBackground#2aa18a66
list.inactiveSelectionBackground#2aa18a40
list.inactiveSelectionForeground#c7d4bf
list.invalidItemForeground#c7d4bf4d
listFilterWidget.background#202a20
listFilterWidget.noMatchesOutline#d95757
listFilterWidget.outline#2aa18a
menu.border#4b65502e
minimap.background#233221
minimap.errorHighlight#d95757
minimap.findMatchHighlight#ffd166bf
minimap.selectionHighlight#2aa18a42
minimapGutter.addedBackground#70bf56
minimapGutter.deletedBackground#f26d78
minimapGutter.modifiedBackground#73b8ff
multiDiffEditor.background#233221
multiDiffEditor.border#4b65502e
multiDiffEditor.headerBackground#202a20
panel.background#202a20
panel.border#4b65502e
panelStickyScroll.background#1f291f
panelStickyScroll.border#4b65502e
panelStickyScroll.shadow#4b655080
panelTitle.activeBorder#2aa18a73
panelTitle.activeForeground#2aa18a
panelTitle.border#4b65502e
panelTitle.inactiveForeground#c7d4bf
peekView.border#2aa18a66
peekViewEditor.background#202a20
peekViewEditor.matchHighlightBackground#ffd16661
peekViewEditor.matchHighlightBorder#efc25861
peekViewResult.background#202a20
peekViewResult.fileForeground#d7e3d1
peekViewResult.lineForeground#c7d4bf
peekViewResult.matchHighlightBackground#ffd16661
peekViewResult.selectionBackground#2aa18a66
peekViewTitle.background#2aa18a66
peekViewTitleDescription.foreground#c7d4bf
peekViewTitleLabel.foreground#d7e3d1
pickerGroup.border#4b65502e
pickerGroup.foreground#c7d4bf80
profileBadge.background#2aa18a
profileBadge.foreground#0d1f1a
progressBar.background#2aa18a
sash.background#202a20
sash.hoverBackground#2aa18a
scrollbar.shadow#202a20
scrollbarSlider.activeBackground#c7d4bfb3
scrollbarSlider.background#c7d4bf66
scrollbarSlider.hoverBackground#c7d4bf99
selection.background#2aa18a42
settings.headerForeground#d7e3d1
settings.modifiedItemIndicator#73b8ff
sideBar.background#233221
sideBar.border#4b65502e
sideBar.dropBackground#2aa18a29
sideBarActivityBarTop.border#4b65502e
sideBarSectionHeader.background#223120
sideBarSectionHeader.border#4b65502e
sideBarSectionHeader.foreground#c7d4bf
sideBarStickyScroll.background#223120
sideBarStickyScroll.border#4b65502e
sideBarStickyScroll.shadow#4b655080
sideBarTitle.background#233221
sideBarTitle.border#4b65502e
sideBarTitle.foreground#c7d4bf
simpleFindWidget.sashBorder#4b655099
statusBar.background#4c593a
statusBar.border#667356ad
statusBar.debuggingBackground#ffb066
statusBar.debuggingForeground#1d271c
statusBar.focusBorder#667356b3
statusBar.foreground#d7e3d1
statusBarItem.activeBackground#c7d4bf33
statusBarItem.hoverBackground#c7d4bf33
statusBarItem.prominentBackground#4b65502e
statusBarItem.prominentHoverBackground#c7d4bf29
statusBarItem.remoteBackground#2aa18a
statusBarItem.remoteForeground#0d1f1a
symbolIcon.arrayForeground#65c7ff
symbolIcon.booleanForeground#c6a7ff
symbolIcon.classForeground#65c7ff
symbolIcon.colorForeground#ffb066
symbolIcon.constantForeground#c6a7ff
symbolIcon.constructorForeground#47e0b1
symbolIcon.enumeratorForeground#65c7ff
symbolIcon.enumeratorMemberForeground#c6a7ff
symbolIcon.eventForeground#ffb066
symbolIcon.fieldForeground#ff7fa3
symbolIcon.fileForeground#c7d4bf
symbolIcon.folderForeground#c7d4bf
symbolIcon.functionForeground#47e0b1
symbolIcon.interfaceForeground#65c7ff
symbolIcon.keyForeground#65c7ff
symbolIcon.keywordForeground#ff9a3d
symbolIcon.methodForeground#47e0b1
symbolIcon.moduleForeground#a5d85a
symbolIcon.namespaceForeground#a5d85a
symbolIcon.nullForeground#c6a7ff
symbolIcon.numberForeground#c6a7ff
symbolIcon.objectForeground#65c7ff
symbolIcon.operatorForeground#ffb066
symbolIcon.packageForeground#a5d85a
symbolIcon.propertyForeground#ff7fa3
symbolIcon.referenceForeground#65c7ff
symbolIcon.snippetForeground#ffb066
symbolIcon.stringForeground#a5d85a
symbolIcon.structForeground#65c7ff
symbolIcon.textForeground#d7e3d1
symbolIcon.typeParameterForeground#65c7ff
symbolIcon.unitForeground#c6a7ff
symbolIcon.variableForeground#d7e3d1
tab.activeBackground#1d271c
tab.activeBorder#1d271c
tab.activeForeground#d7e3d1
tab.border#4b65502e
tab.inactiveBackground#233221
tab.inactiveForeground#c7d4bf
tab.lastPinnedBorder#4b65502e
tab.unfocusedActiveBorder#1d271c
tab.unfocusedActiveForeground#c7d4bf
tab.unfocusedInactiveForeground#c7d4bf
terminal.ansiBlack#101418
terminal.ansiBlue#70b7ff
terminal.ansiBrightBlack#667785
terminal.ansiBrightBlue#8bc7ff
terminal.ansiBrightCyan#76f0f2
terminal.ansiBrightGreen#9af27e
terminal.ansiBrightMagenta#e2a8ff
terminal.ansiBrightRed#ff8585
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ffe082
terminal.ansiCyan#55dde8
terminal.ansiGreen#7fe36a
terminal.ansiMagenta#d991ff
terminal.ansiRed#ff6b6b
terminal.ansiWhite#d7dce2
terminal.ansiYellow#ffd166
terminal.background#233221
terminal.foreground#d7e3d1
terminalChrome.background#233221
terminalChrome.border#4b65502e
terminalCommandGuide.foreground#c7d4bf4d
terminalCursor.foreground#2aa18a
terminalStickyScroll.background#223120
terminalStickyScroll.border#4b65502e
terminalStickyScroll.shadow#4b655080
terminalStickyScrollHover.background#2aa18a40
testing.iconPassed#70bf56
textBlockQuote.background#202a20
textLink.activeForeground#2aa18a
textLink.foreground#08907a
textPreformat.foreground#d7e3d1
titleBar.activeBackground#283127
titleBar.activeForeground#d7e3d1
titleBar.border#475145ad
titleBar.inactiveBackground#202920
titleBar.inactiveForeground#d7e3d1d9
toolbar.hoverBackground#c7d4bf4d
tree.indentGuidesStroke#8b5a2b59
tree.tableColumnsBorder#0000ff
walkThrough.embeddedEditorBackground#202a20
welcomePage.buttonBackground#2aa18a66
welcomePage.progress.background#2aa18a29
welcomePage.tileBackground#233221
welcomePage.tileShadow#4b655080
widget.border#4b65502e
widget.shadow#4b655080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d7e3d1	—
comment	#8fa6b2c7	italic
string, constant.other.symbol	#a5d85a	—
string.regexp, constant.character, constant.other	#ffd166	—
constant.numeric	#c6a7ff	—
constant.language	#c6a7ff	—
variable, variable.parameter.function-call	#d7e3d1	—
variable.member	#ff7fa3	—
variable.language	#65c7ff	italic
storage	#ff9a3d	—
keyword	#ff9a3d	—
keyword.operator	#ffb066	—
punctuation.separator, punctuation.terminator	#d7e3d1b3	—
punctuation.section	#d7e3d1	—
punctuation.accessor	#ffb066	—
punctuation.definition.template-expression	#ff9a3d	—
punctuation.section.embedded	#ff9a3d	—
meta.embedded	#d7e3d1	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#65c7ff	—
entity.other.inherited-class	#65c7ff	—
storage.type.function	#ff9a3d	—
source.java storage.type.primitive	#65c7ff	—
entity.name.function	#47e0b1	—
variable.parameter, meta.parameter	#c6a7ff	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#47e0b1	—
support.function, support.macro	#ff7fa3	—
entity.name.import, entity.name.package	#a5d85a	—
entity.name	#65c7ff	—
entity.name.tag, meta.tag.sgml	#65c7ff	—
support.class.component	#65c7ff	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#65c7ff80	—
entity.other.attribute-name	#47e0b1	—
entity.other.attribute-name.pseudo-class	#ffd166	—
support.constant	#ffb066	italic
support.type, support.class, source.go storage.type	#65c7ff	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#ffb066	—
invalid	#d95757	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#47e0b1	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#65c7ff	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#8fa6b2c7	—
support.type.property-name	#65c7ff	normal
constant.numeric.line-number.find-in-files - match	#8fa6b2c7	—
constant.numeric.line-number.match	#ff9a3d	—
entity.name.filename.find-in-files	#a5d85a	—
message.error	#d95757	—
markup.heading, markup.heading entity.name	#a5d85a	bold
markup.underline.link, string.other.link	#65c7ff	—
markup.italic, emphasis	#ff7fa3	italic
markup.bold	#ff7fa3	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#8fa6b2c7	bold
markup.quote	#ffd166	italic
markup.list punctuation.definition.list.begin	#47e0b1	—
markup.inserted	#70bf56	—
markup.changed	#73b8ff	—
markup.deleted	#f26d78	—
markup.strike	#ffb066	—
markup.strong	—	bold
markup.table	#65c7ff	—
text.html.markdown markup.inline.raw	#ffb066	—
text.html.markdown meta.dummy.line-break	#8fa6b2c7	—
punctuation.definition.markdown	#8fa6b2c7	—

VS Code preview

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

Craft Theme — Craft Classic 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#00876e38
activityBar.activeBorder#00876e
activityBar.activeFocusBorder#00876ebf
activityBar.background#e6ecd2
activityBar.border#8a91721a
activityBar.dropBorder#00876eb3
activityBar.foreground#00876e
activityBar.inactiveForeground#3e4a33c7
activityBarBadge.background#00876e
activityBarBadge.foreground#ffffff
activityBarTop.activeBackground#00876e38
activityBarTop.activeBorder#00876e73
activityBarTop.background#e7edd3
activityBarTop.foreground#00876e
activityBarTop.inactiveForeground#3e4a33c7
badge.background#00876e33
badge.foreground#00876e
button.background#00876e
button.border#ffffff1a
button.foreground#ffffff
button.hoverBackground#007e65
button.secondaryBackground#3e4a3333
button.secondaryForeground#4c5147
button.secondaryHoverBackground#3e4a3380
button.separator#ffffff4d
charts.blue#0079d6
charts.green#4fa84b
charts.orange#d85b00
charts.purple#7e63c8
charts.red#ff5a5a
chat.checkpointSeparator#68798cb3
chat.editedFileForeground#3b79c1
chat.editorBackground#f4f1e2
chat.requestBackground#e7edd3
chat.requestBorder#00876e38
chat.requestBubbleBackground#00876e24
chat.requestBubbleHoverBackground#00876e38
chat.slashCommandBackground#0079d633
chat.slashCommandForeground#0079d6
commandCenter.activeBackground#00876e38
commandCenter.activeBorder#00876e73
commandCenter.activeForeground#4c5147
commandCenter.background#f4f1e2
commandCenter.border#8a91721a
commandCenter.foreground#4c5147
commandCenter.inactiveBorder#8a91721a
debugConsoleInputIcon.foreground#00876e
debugExceptionWidget.background#d9e3be
debugExceptionWidget.border#8a91721a
debugIcon.breakpointDisabledForeground#c96a2b80
debugIcon.breakpointForeground#c96a2b
debugToolBar.background#d9e3be
descriptionForeground#3e4a33
diffEditor.diagonalFill#8a91721a
diffEditor.insertedTextBackground#4fa84b1f
diffEditor.removedTextBackground#b9473f1f
disabledForeground#4c514780
dropdown.background#d9e3be
dropdown.border#8a91721a
dropdown.foreground#3e4a33
editor.background#f4f1e2
editor.findMatchBackground#b87500e6
editor.findMatchHighlightBackground#b8750080
editor.foreground#4c5147
editor.inactiveSelectionBackground#00876e1f
editor.lineHighlightBackground#00876e1f
editor.rangeHighlightBackground#b8750033
editor.selectionBackground#00876e38
editor.selectionHighlightBackground#4fa84b26
editor.selectionHighlightBorder#4fa84b59
editor.snippetTabstopHighlightBackground#4fa84b33
editor.wordHighlightBackground#3b79c114
editor.wordHighlightBorder#3b79c180
editor.wordHighlightStrongBackground#4fa84b14
editor.wordHighlightStrongBorder#4fa84b80
editorBracketHighlight.foreground1#8b5a2be6
editorBracketHighlight.foreground2#e5b94a
editorBracketHighlight.foreground3#5fb04ad9
editorBracketHighlight.foreground4#4c88d8d9
editorBracketHighlight.foreground5#6b4fa8d9
editorBracketHighlight.foreground6#b45a9cd9
editorBracketMatch.background#3e4a334d
editorBracketMatch.border#3e4a334d
editorCodeLens.foreground#68798cb3
editorCursor.foreground#00876e
editorError.foreground#b9473f
editorGroup.background#d9e3be
editorGroup.border#d9e3be
editorGroupHeader.border#8a91721a
editorGroupHeader.noTabsBackground#e7edd3
editorGroupHeader.tabsBackground#e7edd3
editorGroupHeader.tabsBorder#8a91721a
editorGutter.addedBackground#4fa84b
editorGutter.commentRangeForeground#8a91721a
editorGutter.deletedBackground#b9473f
editorGutter.modifiedBackground#3b79c1
editorHoverWidget.background#d9e3be
editorHoverWidget.border#8a91721a
editorIndentGuide.activeBackground#8b5a2b59
editorIndentGuide.activeBackground1#8b5a2be6
editorIndentGuide.activeBackground2#e5b94a
editorIndentGuide.activeBackground3#5fb04ad9
editorIndentGuide.activeBackground4#4c88d8d9
editorIndentGuide.activeBackground5#6b4fa8d9
editorIndentGuide.activeBackground6#b45a9cd9
editorIndentGuide.background#8b5a2b2e
editorIndentGuide.background1#8b5a2b59
editorIndentGuide.background2#e5b94a8c
editorIndentGuide.background3#5fb04a59
editorIndentGuide.background4#4c88d859
editorIndentGuide.background5#6b4fa859
editorIndentGuide.background6#b45a9c59
editorInlayHint.background#f4f1e2
editorInlayHint.foreground#4c514780
editorLineNumber.activeForeground#3e4a33b3
editorLineNumber.foreground#3e4a3366
editorLink.activeForeground#00876e
editorMarkerNavigation.background#d9e3be
editorOverviewRuler.addedForeground#4fa84b
editorOverviewRuler.border#8a91721a
editorOverviewRuler.bracketMatchForeground#3e4a33b3
editorOverviewRuler.deletedForeground#b9473f
editorOverviewRuler.errorForeground#b9473f
editorOverviewRuler.findMatchForeground#b87500e6
editorOverviewRuler.modifiedForeground#3b79c1
editorOverviewRuler.warningForeground#b87500
editorOverviewRuler.wordHighlightForeground#3b79c166
editorOverviewRuler.wordHighlightStrongForeground#4fa84b66
editorRuler.foreground#8b5a2b2e
editorStickyScroll.background#d9e3be
editorStickyScroll.border#8a91721a
editorStickyScroll.shadow#8a917229
editorStickyScrollHover.background#00876e24
editorSuggestWidget.background#d9e3be
editorSuggestWidget.border#8a91721a
editorSuggestWidget.highlightForeground#00876e
editorSuggestWidget.selectedBackground#00876e38
editorWarning.foreground#b87500
editorWhitespace.foreground#3e4a3366
editorWidget.background#d9e3be
editorWidget.border#8a91721a
editorWidget.resizeBorder#8a9172a6
errorForeground#b9473f
extensionButton.prominentBackground#00876e
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#00826a
focusBorder#8a91721a
foreground#3e4a33
gitDecoration.conflictingResourceForeground#b87500
gitDecoration.deletedResourceForeground#b9473f
gitDecoration.ignoredResourceForeground#3e4a3380
gitDecoration.modifiedResourceForeground#3b79c1
gitDecoration.submoduleResourceForeground#7e63c8
gitDecoration.untrackedResourceForeground#4fa84b
icon.foreground#3e4a33
inlineChat.background#d9e3be
inlineChat.border#8a91721a
inlineChat.foreground#4c5147
inlineChat.shadow#8a917229
inlineChatDiff.inserted#4fa84b33
inlineChatDiff.removed#b9473f33
inlineChatInput.background#f4f1e2
inlineChatInput.border#8a91721a
inlineChatInput.focusBorder#00876eb3
inlineChatInput.placeholderForeground#3e4a3380
inlineEdit.gutterIndicator.background#d9e3be
inlineEdit.gutterIndicator.primaryBackground#00876e24
inlineEdit.gutterIndicator.primaryBorder#00876ebf
inlineEdit.gutterIndicator.primaryForeground#00876e
inlineEdit.gutterIndicator.secondaryBackground#3e4a331f
inlineEdit.gutterIndicator.secondaryBorder#3e4a3373
inlineEdit.gutterIndicator.secondaryForeground#3e4a33
inlineEdit.gutterIndicator.successfulBackground#4fa84b1f
inlineEdit.gutterIndicator.successfulBorder#4fa84bbf
inlineEdit.gutterIndicator.successfulForeground#4fa84b
inlineEdit.modifiedBackground#4fa84b14
inlineEdit.modifiedBorder#4fa84b99
inlineEdit.modifiedChangedLineBackground#4fa84b1f
inlineEdit.modifiedChangedTextBackground#4fa84b33
inlineEdit.originalBackground#b9473f14
inlineEdit.originalBorder#b9473f99
inlineEdit.originalChangedLineBackground#b9473f1f
inlineEdit.originalChangedTextBackground#b9473f33
input.background#f4f1e2
input.border#3e4a3333
input.foreground#4c5147
input.placeholderForeground#3e4a3380
inputOption.activeBackground#00876e1a
inputOption.activeBorder#00876e33
inputOption.activeForeground#00876e
inputOption.hoverBackground#3e4a3333
inputValidation.errorBackground#f4f1e2
inputValidation.errorBorder#b9473f
inputValidation.infoBackground#e7edd3
inputValidation.infoBorder#0079d6
inputValidation.warningBackground#e7edd3
inputValidation.warningBorder#b87500
keybindingLabel.background#3e4a331a
keybindingLabel.border#4c51471a
keybindingLabel.bottomBorder#4c51471a
keybindingLabel.foreground#4c5147
list.activeSelectionBackground#00876e38
list.activeSelectionForeground#4c5147
list.deemphasizedForeground#b9473f
list.errorForeground#b9473f
list.filterMatchBackground#a8680080
list.filterMatchBorder#b8750080
list.focusBackground#00876e38
list.focusForeground#4c5147
list.focusOutline#00876e38
list.highlightForeground#00876e
list.hoverBackground#00876e38
list.inactiveSelectionBackground#00876e24
list.inactiveSelectionForeground#3e4a33
list.invalidItemForeground#3e4a334d
listFilterWidget.background#d9e3be
listFilterWidget.noMatchesOutline#b9473f
listFilterWidget.outline#00876e
menu.border#8a91721a
minimap.background#e7edd3
minimap.errorHighlight#b9473f
minimap.findMatchHighlight#b87500e6
minimap.selectionHighlight#00876e38
minimapGutter.addedBackground#4fa84b
minimapGutter.deletedBackground#b9473f
minimapGutter.modifiedBackground#3b79c1
multiDiffEditor.background#e7edd3
multiDiffEditor.border#8a91721a
multiDiffEditor.headerBackground#d9e3be
panel.background#d9e3be
panel.border#8a91721a
panelStickyScroll.background#d8e2be
panelStickyScroll.border#8a91721a
panelStickyScroll.shadow#8a917229
panelTitle.activeBorder#00876e73
panelTitle.activeForeground#00876e
panelTitle.border#8a91721a
panelTitle.inactiveForeground#3e4a33
peekView.border#00876e38
peekViewEditor.background#d9e3be
peekViewEditor.matchHighlightBackground#b8750080
peekViewEditor.matchHighlightBorder#a8680080
peekViewResult.background#d9e3be
peekViewResult.fileForeground#4c5147
peekViewResult.lineForeground#3e4a33
peekViewResult.matchHighlightBackground#b8750080
peekViewResult.selectionBackground#00876e38
peekViewTitle.background#00876e38
peekViewTitleDescription.foreground#3e4a33
peekViewTitleLabel.foreground#4c5147
pickerGroup.border#8a91721a
pickerGroup.foreground#3e4a3380
profileBadge.background#00876e
profileBadge.foreground#ffffff
progressBar.background#00876e
sash.background#d9e3be
sash.hoverBackground#00876e
scrollbar.shadow#d9e3be
scrollbarSlider.activeBackground#3e4a33b3
scrollbarSlider.background#3e4a3366
scrollbarSlider.hoverBackground#3e4a3399
selection.background#00876e38
settings.headerForeground#4c5147
settings.modifiedItemIndicator#3b79c1
sideBar.background#e7edd3
sideBar.border#8a91721a
sideBar.dropBackground#00876e29
sideBarActivityBarTop.border#8a91721a
sideBarSectionHeader.background#e6ecd2
sideBarSectionHeader.border#8a91721a
sideBarSectionHeader.foreground#3e4a33
sideBarStickyScroll.background#e6ecd2
sideBarStickyScroll.border#8a91721a
sideBarStickyScroll.shadow#8a917229
sideBarTitle.background#e7edd3
sideBarTitle.border#8a91721a
sideBarTitle.foreground#3e4a33
simpleFindWidget.sashBorder#8a917299
statusBar.background#786152
statusBar.border#907c6e7a
statusBar.debuggingBackground#c96a2b
statusBar.debuggingForeground#f4f1e2
statusBar.focusBorder#907c6eb3
statusBar.foreground#f6f1e7
statusBarItem.activeBackground#3e4a3333
statusBarItem.hoverBackground#3e4a3333
statusBarItem.prominentBackground#8a91721a
statusBarItem.prominentHoverBackground#3e4a3329
statusBarItem.remoteBackground#00876e
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#0079d6
symbolIcon.booleanForeground#7e63c8
symbolIcon.classForeground#0079d6
symbolIcon.colorForeground#b9822d
symbolIcon.constantForeground#7e63c8
symbolIcon.constructorForeground#008a70
symbolIcon.enumeratorForeground#0079d6
symbolIcon.enumeratorMemberForeground#7e63c8
symbolIcon.eventForeground#b9822d
symbolIcon.fieldForeground#c94f6d
symbolIcon.fileForeground#3e4a33
symbolIcon.folderForeground#3e4a33
symbolIcon.functionForeground#008a70
symbolIcon.interfaceForeground#0079d6
symbolIcon.keyForeground#0079d6
symbolIcon.keywordForeground#d85b00
symbolIcon.methodForeground#008a70
symbolIcon.moduleForeground#5c8f00
symbolIcon.namespaceForeground#5c8f00
symbolIcon.nullForeground#7e63c8
symbolIcon.numberForeground#7e63c8
symbolIcon.objectForeground#0079d6
symbolIcon.operatorForeground#c96a2b
symbolIcon.packageForeground#5c8f00
symbolIcon.propertyForeground#c94f6d
symbolIcon.referenceForeground#0079d6
symbolIcon.snippetForeground#b9822d
symbolIcon.stringForeground#5c8f00
symbolIcon.structForeground#0079d6
symbolIcon.textForeground#4c5147
symbolIcon.typeParameterForeground#0079d6
symbolIcon.unitForeground#7e63c8
symbolIcon.variableForeground#4c5147
tab.activeBackground#f4f1e2
tab.activeBorder#f4f1e2
tab.activeForeground#4c5147
tab.border#8a91721a
tab.inactiveBackground#e7edd3
tab.inactiveForeground#3e4a33
tab.lastPinnedBorder#8a91721a
tab.unfocusedActiveBorder#f4f1e2
tab.unfocusedActiveForeground#3e4a33
tab.unfocusedInactiveForeground#3e4a33
terminal.ansiBlack#1d1d21
terminal.ansiBlue#2368c4
terminal.ansiBrightBlack#5a6268
terminal.ansiBrightBlue#1e74d8
terminal.ansiBrightCyan#008c96
terminal.ansiBrightGreen#1f9f36
terminal.ansiBrightMagenta#b94bd0
terminal.ansiBrightRed#e53935
terminal.ansiBrightWhite#5a5f62
terminal.ansiBrightYellow#b08000
terminal.ansiCyan#007f89
terminal.ansiGreen#2e8b2e
terminal.ansiMagenta#a83dba
terminal.ansiRed#c62828
terminal.ansiWhite#3a3430
terminal.ansiYellow#9a7200
terminal.background#e7edd3
terminal.foreground#3a3430
terminalChrome.background#e7edd3
terminalChrome.border#8a91721a
terminalCommandGuide.foreground#3e4a334d
terminalCursor.foreground#00876e
terminalStickyScroll.background#e6ecd2
terminalStickyScroll.border#8a91721a
terminalStickyScroll.shadow#8a917229
terminalStickyScrollHover.background#00876e24
testing.iconPassed#4fa84b
textBlockQuote.background#d9e3be
textLink.activeForeground#00876e
textLink.foreground#00775f
textPreformat.foreground#4c5147
titleBar.activeBackground#e6e8df
titleBar.activeForeground#4c5147
titleBar.border#c5c8be7a
titleBar.inactiveBackground#e2e4db
titleBar.inactiveForeground#4c5147d9
toolbar.hoverBackground#3e4a334d
tree.indentGuidesStroke#8b5a2b59
tree.tableColumnsBorder#4c88d8
walkThrough.embeddedEditorBackground#d9e3be
welcomePage.buttonBackground#00876e66
welcomePage.progress.background#00876e1f
welcomePage.tileBackground#e7edd3
welcomePage.tileShadow#8a917229
widget.border#8a91721a
widget.shadow#8a917229

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#4c5147	—
comment	#68798cb3	italic
string, constant.other.symbol	#5c8f00	—
string.regexp, constant.character, constant.other	#b87500	—
constant.numeric	#7e63c8	—
constant.language	#7e63c8	—
variable, variable.parameter.function-call	#4c5147	—
variable.member	#c94f6d	—
variable.language	#0079d6	italic
storage	#d85b00	—
keyword	#d85b00	—
keyword.operator	#c96a2b	—
punctuation.separator, punctuation.terminator	#4c5147b3	—
punctuation.section	#4c5147	—
punctuation.accessor	#c96a2b	—
punctuation.definition.template-expression	#d85b00	—
punctuation.section.embedded	#d85b00	—
meta.embedded	#4c5147	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#0079d6	—
entity.other.inherited-class	#0079d6	—
storage.type.function	#d85b00	—
source.java storage.type.primitive	#0079d6	—
entity.name.function	#008a70	—
variable.parameter, meta.parameter	#7e63c8	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#008a70	—
support.function, support.macro	#c94f6d	—
entity.name.import, entity.name.package	#5c8f00	—
entity.name	#0079d6	—
entity.name.tag, meta.tag.sgml	#0079d6	—
support.class.component	#0079d6	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#0079d680	—
entity.other.attribute-name	#008a70	—
entity.other.attribute-name.pseudo-class	#b87500	—
support.constant	#c96a2b	italic
support.type, support.class, source.go storage.type	#0079d6	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#b9822d	—
invalid	#b9473f	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#008a70	—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag	#0079d6	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#68798cb3	—
support.type.property-name	#0079d6	normal
constant.numeric.line-number.find-in-files - match	#68798cb3	—
constant.numeric.line-number.match	#d85b00	—
entity.name.filename.find-in-files	#5c8f00	—
message.error	#b9473f	—
markup.heading, markup.heading entity.name	#5c8f00	bold
markup.underline.link, string.other.link	#0079d6	—
markup.italic, emphasis	#c94f6d	italic
markup.bold	#c94f6d	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#68798cb3	bold
markup.quote	#b87500	italic
markup.list punctuation.definition.list.begin	#008a70	—
markup.inserted	#4fa84b	—
markup.changed	#3b79c1	—
markup.deleted	#b9473f	—
markup.strike	#b9822d	—
markup.strong	—	bold
markup.table	#0079d6	—
text.html.markdown markup.inline.raw	#c96a2b	—
text.html.markdown meta.dummy.line-break	#68798cb3	—
punctuation.definition.markdown	#68798cb3	—