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 Legends Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#049ff7
activityBar.background#2b3625
activityBar.border#3d7b8200
activityBar.foreground#049ff7
activityBar.inactiveForeground#c2dbd1
activityBarBadge.background#049ff7
activityBarBadge.foreground#06161e
activityBarTop.activeBorder#049ff700
activityBarTop.foreground#049ff7
activityBarTop.inactiveForeground#c2dbd1
badge.background#049ff733
badge.foreground#049ff7
button.background#049ff7
button.border#06161e1a
button.foreground#06161e
button.hoverBackground#0096ed
button.secondaryBackground#c2dbd133
button.secondaryForeground#d6ece0
button.secondaryHoverBackground#c2dbd180
button.separator#06161e4d
chat.checkpointSeparator#68817c99
chat.editedFileForeground#049ff7
chat.requestBackground#2b3625
chat.requestBorder#049ff738
chat.requestBubbleBackground#049ff724
chat.requestBubbleHoverBackground#049ff738
chat.slashCommandBackground#41bfe233
chat.slashCommandForeground#41bfe2
commandCenter.activeBackground#049ff738
commandCenter.activeBorder#049ff700
commandCenter.activeForeground#c2dbd1
commandCenter.background#1e2823
commandCenter.border#3d7b8200
commandCenter.foreground#c2dbd1
commandCenter.inactiveBorder#3d7b8200
debugConsoleInputIcon.foreground#049ff7
debugExceptionWidget.background#253433
debugExceptionWidget.border#3d7b8200
debugIcon.breakpointDisabledForeground#b9745880
debugIcon.breakpointForeground#b97458
debugToolBar.background#253433
descriptionForeground#c2dbd1
diffEditor.diagonalFill#3d7b8200
diffEditor.insertedTextBackground#55b68c1f
diffEditor.removedTextBackground#b65a541f
disabledForeground#d6ece080
dropdown.background#253433
dropdown.border#3d7b8200
dropdown.foreground#c2dbd1
editor.background#1e2823
editor.findMatchBackground#2a4a55
editor.findMatchHighlightBackground#2a4a558c
editor.foreground#d6ece0
editor.inactiveSelectionBackground#049ff724
editor.lineHighlightBackground#049ff72e
editor.rangeHighlightBackground#2a4a5533
editor.selectionBackground#049ff738
editor.selectionHighlightBackground#55b68c26
editor.selectionHighlightBorder#55b68c00
editor.snippetTabstopHighlightBackground#55b68c33
editor.wordHighlightBackground#049ff714
editor.wordHighlightBorder#049ff780
editor.wordHighlightStrongBackground#55b68c14
editor.wordHighlightStrongBorder#55b68c80
editorBracketHighlight.foreground1#3d7b82bf
editorBracketHighlight.foreground2#049ff7b3
editorBracketHighlight.foreground3#55b68cbf
editorBracketHighlight.foreground4#b97458bf
editorBracketHighlight.foreground5#41bfe2bf
editorBracketHighlight.foreground6#9e3635b3
editorBracketMatch.background#c2dbd14d
editorBracketMatch.border#c2dbd14d
editorCodeLens.foreground#68817c99
editorCursor.foreground#049ff7
editorError.foreground#d95757
editorGroup.background#253433
editorGroup.border#253433
editorGroupHeader.border#3d7b8200
editorGroupHeader.noTabsBackground#2b3625
editorGroupHeader.tabsBackground#2b3625
editorGroupHeader.tabsBorder#3d7b8200
editorGutter.addedBackground#55b68c
editorGutter.deletedBackground#b65a54
editorGutter.modifiedBackground#049ff7
editorHoverWidget.background#253433
editorHoverWidget.border#3d7b8200
editorIndentGuide.activeBackground#3d7b8252
editorIndentGuide.activeBackground1#3d7b82bf
editorIndentGuide.activeBackground2#049ff7b3
editorIndentGuide.activeBackground3#55b68cbf
editorIndentGuide.activeBackground4#b97458bf
editorIndentGuide.activeBackground5#41bfe2bf
editorIndentGuide.activeBackground6#9e3635b3
editorIndentGuide.background#3d7b8229
editorIndentGuide.background1#3d7b8247
editorIndentGuide.background2#049ff740
editorIndentGuide.background3#55b68c40
editorIndentGuide.background4#b9745840
editorIndentGuide.background5#41bfe238
editorIndentGuide.background6#9e363538
editorInlayHint.foreground#d6ece080
editorLineNumber.activeForeground#c2dbd1e6
editorLineNumber.foreground#c2dbd18c
editorLink.activeForeground#049ff7
editorMarkerNavigation.background#253433
editorOverviewRuler.addedForeground#55b68c
editorOverviewRuler.border#3d7b8200
editorOverviewRuler.bracketMatchForeground#c2dbd1b3
editorOverviewRuler.deletedForeground#b65a54
editorOverviewRuler.errorForeground#d95757
editorOverviewRuler.findMatchForeground#2a4a55
editorOverviewRuler.modifiedForeground#049ff7
editorOverviewRuler.warningForeground#d2b06e
editorOverviewRuler.wordHighlightForeground#049ff766
editorOverviewRuler.wordHighlightStrongForeground#55b68c66
editorRuler.foreground#3d7b8229
editorStickyScroll.border#3d7b8200
editorStickyScroll.shadow#3d7b8266
editorStickyScrollHover.background#049ff724
editorSuggestWidget.background#253433
editorSuggestWidget.border#3d7b8200
editorSuggestWidget.highlightForeground#049ff7
editorSuggestWidget.selectedBackground#049ff738
editorWarning.foreground#d2b06e
editorWhitespace.foreground#c2dbd18c
editorWidget.background#253433
editorWidget.border#3d7b8200
editorWidget.resizeBorder#25343300
errorForeground#d95757
extensionButton.prominentBackground#049ff7
extensionButton.prominentForeground#06161e
extensionButton.prominentHoverBackground#009af2
focusBorder#3d7b8200
foreground#c2dbd1
gitDecoration.conflictingResourceForeground#d2b06e
gitDecoration.deletedResourceForeground#b65a54
gitDecoration.ignoredResourceForeground#c2dbd180
gitDecoration.modifiedResourceForeground#049ff7
gitDecoration.submoduleResourceForeground#6d9f96
gitDecoration.untrackedResourceForeground#55b68c
icon.foreground#c2dbd1
inlineChat.background#253433
inlineChat.border#3d7b8200
inlineChat.foreground#d6ece0
inlineChat.shadow#3d7b8266
inlineChatDiff.inserted#55b68c33
inlineChatDiff.removed#b65a5433
inlineChatInput.background#1e2823
inlineChatInput.border#3d7b8200
inlineChatInput.focusBorder#049ff7b3
inlineChatInput.placeholderForeground#c2dbd180
inlineEdit.gutterIndicator.background#3d7b8200
inlineEdit.gutterIndicator.primaryBackground#049ff71a
inlineEdit.gutterIndicator.primaryBorder#049ff7
inlineEdit.gutterIndicator.primaryForeground#049ff7
inlineEdit.gutterIndicator.secondaryBackground#c2dbd11a
inlineEdit.gutterIndicator.secondaryBorder#c2dbd180
inlineEdit.gutterIndicator.secondaryForeground#c2dbd1
inlineEdit.gutterIndicator.successfulBackground#55b68c1a
inlineEdit.gutterIndicator.successfulBorder#55b68c
inlineEdit.gutterIndicator.successfulForeground#55b68c
inlineEdit.modifiedBackground#55b68c1a
inlineEdit.modifiedBorder#55b68c80
inlineEdit.modifiedChangedLineBackground#55b68c26
inlineEdit.modifiedChangedTextBackground#55b68c40
inlineEdit.originalBackground#b65a541a
inlineEdit.originalBorder#b65a5480
inlineEdit.originalChangedLineBackground#b65a5426
inlineEdit.originalChangedTextBackground#b65a5440
input.background#1e2823
input.border#c2dbd133
input.foreground#d6ece0
input.placeholderForeground#c2dbd180
inputOption.activeBackground#049ff71a
inputOption.activeBorder#049ff733
inputOption.activeForeground#049ff7
inputOption.hoverBackground#c2dbd133
inputValidation.errorBackground#1e2823
inputValidation.errorBorder#d95757
inputValidation.infoBackground#2b3625
inputValidation.infoBorder#41bfe2
inputValidation.warningBackground#2b3625
inputValidation.warningBorder#d2b06e
keybindingLabel.background#c2dbd11a
keybindingLabel.border#d6ece01a
keybindingLabel.bottomBorder#d6ece01a
keybindingLabel.foreground#d6ece0
list.activeSelectionBackground#049ff738
list.activeSelectionForeground#d6ece0
list.deemphasizedForeground#d95757
list.errorForeground#d95757
list.filterMatchBackground#1d3e488c
list.filterMatchBorder#2a4a558c
list.focusBackground#049ff738
list.focusForeground#d6ece0
list.focusOutline#049ff738
list.highlightForeground#049ff7
list.hoverBackground#049ff738
list.inactiveSelectionBackground#049ff724
list.inactiveSelectionForeground#c2dbd1
list.invalidItemForeground#c2dbd14d
listFilterWidget.background#253433
listFilterWidget.noMatchesOutline#d95757
listFilterWidget.outline#049ff7
menu.border#3d7b8200
minimap.background#2b3625
minimap.errorHighlight#d95757
minimap.findMatchHighlight#2a4a55
minimap.selectionHighlight#049ff738
minimapGutter.addedBackground#55b68c
minimapGutter.deletedBackground#b65a54
minimapGutter.modifiedBackground#049ff7
multiDiffEditor.background#2b3625
multiDiffEditor.border#3d7b8200
multiDiffEditor.headerBackground#253433
panel.background#253433
panel.border#3d7b8200
panelStickyScroll.border#3d7b8200
panelStickyScroll.shadow#3d7b8266
panelTitle.activeBorder#049ff700
panelTitle.activeForeground#049ff7
panelTitle.inactiveForeground#c2dbd1
peekView.border#049ff738
peekViewEditor.background#253433
peekViewEditor.matchHighlightBackground#2a4a558c
peekViewEditor.matchHighlightBorder#1d3e488c
peekViewResult.background#253433
peekViewResult.fileForeground#d6ece0
peekViewResult.lineForeground#c2dbd1
peekViewResult.matchHighlightBackground#2a4a558c
peekViewResult.selectionBackground#049ff738
peekViewTitle.background#049ff738
peekViewTitleDescription.foreground#c2dbd1
peekViewTitleLabel.foreground#d6ece0
pickerGroup.border#3d7b8200
pickerGroup.foreground#c2dbd180
profileBadge.background#049ff7
profileBadge.foreground#06161e
progressBar.background#049ff7
sash.background#253433
sash.hoverBackground#049ff7
scrollbar.shadow#253433
scrollbarSlider.activeBackground#c2dbd1b3
scrollbarSlider.background#c2dbd166
scrollbarSlider.hoverBackground#c2dbd199
selection.background#049ff738
settings.headerForeground#d6ece0
settings.modifiedItemIndicator#049ff7
sideBar.background#2b3625
sideBar.border#3d7b8200
sideBarSectionHeader.background#2b3625
sideBarSectionHeader.border#3d7b8200
sideBarSectionHeader.foreground#c2dbd1
sideBarStickyScroll.border#3d7b8200
sideBarStickyScroll.shadow#3d7b8266
sideBarTitle.foreground#c2dbd1
simpleFindWidget.sashBorder#25343300
statusBar.background#4c2d25
statusBar.border#3d7b8200
statusBar.debuggingBackground#b97458
statusBar.debuggingForeground#1e2823
statusBar.focusBorder#00000000
statusBar.foreground#8eb1b6
statusBarItem.activeBackground#c2dbd133
statusBarItem.hoverBackground#c2dbd133
statusBarItem.prominentBackground#3d7b8200
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#049ff7
statusBarItem.remoteForeground#06161e
symbolIcon.arrayForeground#9fc5cb
symbolIcon.booleanForeground#6d9f96
symbolIcon.classForeground#9fc5cb
symbolIcon.colorForeground#9e3635
symbolIcon.constantForeground#6d9f96
symbolIcon.constructorForeground#87a9a0
symbolIcon.enumeratorForeground#9fc5cb
symbolIcon.enumeratorMemberForeground#6d9f96
symbolIcon.eventForeground#9e3635
symbolIcon.fieldForeground#b97458
symbolIcon.fileForeground#c2dbd1
symbolIcon.folderForeground#c2dbd1
symbolIcon.functionForeground#87a9a0
symbolIcon.interfaceForeground#9fc5cb
symbolIcon.keyForeground#41bfe2
symbolIcon.keywordForeground#049ff7
symbolIcon.methodForeground#87a9a0
symbolIcon.moduleForeground#a6d28a
symbolIcon.namespaceForeground#a6d28a
symbolIcon.nullForeground#6d9f96
symbolIcon.numberForeground#6d9f96
symbolIcon.objectForeground#9fc5cb
symbolIcon.operatorForeground#b97458
symbolIcon.packageForeground#a6d28a
symbolIcon.propertyForeground#b97458
symbolIcon.referenceForeground#9fc5cb
symbolIcon.snippetForeground#9e3635
symbolIcon.stringForeground#a6d28a
symbolIcon.structForeground#9fc5cb
symbolIcon.textForeground#d6ece0
symbolIcon.typeParameterForeground#9fc5cb
symbolIcon.unitForeground#6d9f96
symbolIcon.variableForeground#d6ece0
tab.activeBackground#1e2823
tab.activeBorder#1e2823
tab.activeForeground#d6ece0
tab.border#3d7b8200
tab.inactiveBackground#2b3625
tab.inactiveForeground#c2dbd1
tab.unfocusedActiveBorder#1e2823
tab.unfocusedActiveForeground#c2dbd1
tab.unfocusedInactiveForeground#c2dbd1
terminal.ansiBlack#0f1412
terminal.ansiBlue#049ff7
terminal.ansiBrightBlack#3d7b82
terminal.ansiBrightBlue#41bfe2
terminal.ansiBrightCyan#8cd9eb
terminal.ansiBrightGreen#72c7a1
terminal.ansiBrightMagenta#b24a45
terminal.ansiBrightRed#c8736b
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e0c286
terminal.ansiCyan#41bfe2
terminal.ansiGreen#55b68c
terminal.ansiMagenta#9e3635
terminal.ansiRed#b65a54
terminal.ansiWhite#c2dbd1
terminal.ansiYellow#d2b06e
terminal.background#202c2c
terminal.foreground#d6ece0
terminalCommandGuide.foreground#c2dbd14d
terminalCursor.foreground#049ff7
terminalStickyScroll.border#3d7b8200
terminalStickyScroll.shadow#3d7b8266
terminalStickyScrollHover.background#049ff724
textBlockQuote.background#253433
textLink.activeForeground#049ff7
textLink.foreground#008fe5
textPreformat.foreground#d6ece0
titleBar.activeBackground#102430
titleBar.activeForeground#bddadf
titleBar.border#3d7b8200
titleBar.inactiveBackground#081d28
titleBar.inactiveForeground#bddadfd9
toolbar.hoverBackground#c2dbd14d
tree.indentGuidesStroke#3d7b8252
tree.tableColumnsBorder#0000ff
walkThrough.embeddedEditorBackground#253433
welcomePage.buttonBackground#049ff766
welcomePage.progress.background#049ff72e
welcomePage.tileBackground#2b3625
welcomePage.tileShadow#3d7b8266
widget.border#3d7b8200
widget.shadow#3d7b8266

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d6ece0	—
comment	#68817c99	italic
string, constant.other.symbol	#a6d28a	—
string.regexp, constant.character, constant.other	#d2b06e	—
constant.numeric	#6d9f96	—
constant.language	#6d9f96	—
variable, variable.parameter.function-call	#d6ece0	—
variable.member	#b97458	—
variable.language	#41bfe2	italic
storage	#049ff7	—
keyword	#049ff7	—
keyword.operator	#b97458	—
punctuation.separator, punctuation.terminator	#d6ece0b3	—
punctuation.section	#d6ece0	—
punctuation.accessor	#b97458	—
punctuation.definition.template-expression	#049ff7	—
punctuation.section.embedded	#049ff7	—
meta.embedded	#d6ece0	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#9fc5cb	—
entity.other.inherited-class	#41bfe2	—
storage.type.function	#049ff7	—
source.java storage.type.primitive	#41bfe2	—
entity.name.function	#87a9a0	—
variable.parameter, meta.parameter	#6d9f96	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#87a9a0	—
support.function, support.macro	#b97458	—
entity.name.import, entity.name.package	#a6d28a	—
entity.name	#9fc5cb	—
entity.name.tag, meta.tag.sgml	#41bfe2	—
support.class.component	#9fc5cb	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#41bfe280	—
entity.other.attribute-name	#87a9a0	—
entity.other.attribute-name.pseudo-class	#d2b06e	—
support.constant	#b97458	italic
support.type, support.class, source.go storage.type	#41bfe2	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#9e3635	—
invalid	#d95757	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#87a9a0	—
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	#9fc5cb	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#68817c99	—
support.type.property-name	#41bfe2	normal
constant.numeric.line-number.find-in-files - match	#68817c99	—
constant.numeric.line-number.match	#049ff7	—
entity.name.filename.find-in-files	#a6d28a	—
message.error	#d95757	—
markup.heading, markup.heading entity.name	#a6d28a	bold
markup.underline.link, string.other.link	#41bfe2	—
markup.italic, emphasis	#b97458	italic
markup.bold	#b97458	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#68817c99	bold
markup.quote	#d2b06e	italic
markup.list punctuation.definition.list.begin	#87a9a0	—
markup.inserted	#55b68c	—
markup.changed	#049ff7	—
markup.deleted	#b65a54	—
markup.strike	#9e3635	—
markup.strong	—	bold
markup.table	#41bfe2	—
text.html.markdown markup.inline.raw	#b97458	—
text.html.markdown meta.dummy.line-break	#68817c99	—
punctuation.definition.markdown	#68817c99	—

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

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}!`;
}