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 Dungeons UI 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#8e58bb
activityBar.background#212b3f
activityBar.border#3a4c6800
activityBar.foreground#8e58bb
activityBar.inactiveForeground#b8c7db
activityBarBadge.background#8e58bb
activityBarBadge.foreground#1a0e2e
activityBarTop.activeBorder#8e58bb00
activityBarTop.foreground#8e58bb
activityBarTop.inactiveForeground#b8c7db
badge.background#8e58bb33
badge.foreground#8e58bb
button.background#8e58bb
button.border#1a0e2e1a
button.foreground#1a0e2e
button.hoverBackground#844fb1
button.secondaryBackground#b8c7db33
button.secondaryForeground#d9e2f0
button.secondaryHoverBackground#b8c7db80
button.separator#1a0e2e4d
chat.checkpointSeparator#7588a399
chat.editedFileForeground#60b7ff
chat.requestBackground#212b3f
chat.requestBorder#8e58bb38
chat.requestBubbleBackground#8e58bb24
chat.requestBubbleHoverBackground#8e58bb38
chat.slashCommandBackground#47c4e833
chat.slashCommandForeground#47c4e8
commandCenter.activeBackground#8e58bb38
commandCenter.activeBorder#8e58bb00
commandCenter.activeForeground#b8c7db
commandCenter.background#161e2d
commandCenter.border#3a4c6800
commandCenter.foreground#b8c7db
commandCenter.inactiveBorder#3a4c6800
debugConsoleInputIcon.foreground#8e58bb
debugExceptionWidget.background#1a2233
debugExceptionWidget.border#3a4c6800
debugIcon.breakpointDisabledForeground#d8956380
debugIcon.breakpointForeground#d89563
debugToolBar.background#1a2233
descriptionForeground#b8c7db
diffEditor.diagonalFill#3a4c6800
diffEditor.insertedTextBackground#67c18b1f
diffEditor.removedTextBackground#e26a781f
disabledForeground#d9e2f080
dropdown.background#1a2233
dropdown.border#3a4c6800
dropdown.foreground#b8c7db
editor.background#161e2d
editor.findMatchBackground#3b3156
editor.findMatchHighlightBackground#3b31568c
editor.foreground#d9e2f0
editor.inactiveSelectionBackground#8e58bb24
editor.lineHighlightBackground#8e58bb29
editor.rangeHighlightBackground#3b315633
editor.selectionBackground#8e58bb3d
editor.selectionHighlightBackground#67c18b26
editor.selectionHighlightBorder#67c18b00
editor.snippetTabstopHighlightBackground#67c18b33
editor.wordHighlightBackground#60b7ff14
editor.wordHighlightBorder#60b7ff80
editor.wordHighlightStrongBackground#67c18b14
editor.wordHighlightStrongBorder#67c18b80
editorBracketHighlight.foreground1#3a4c68cc
editorBracketHighlight.foreground2#8e58bbbf
editorBracketHighlight.foreground3#67c18bc7
editorBracketHighlight.foreground4#d89563c7
editorBracketHighlight.foreground5#47c4e8c7
editorBracketHighlight.foreground6#ff6ea8bd
editorBracketMatch.background#b8c7db4d
editorBracketMatch.border#b8c7db4d
editorCodeLens.foreground#7588a399
editorCursor.foreground#8e58bb
editorError.foreground#e0616f
editorGroup.background#1a2233
editorGroup.border#1a2233
editorGroupHeader.border#3a4c6800
editorGroupHeader.noTabsBackground#212b3f
editorGroupHeader.tabsBackground#212b3f
editorGroupHeader.tabsBorder#3a4c6800
editorGutter.addedBackground#67c18b
editorGutter.deletedBackground#e26a78
editorGutter.modifiedBackground#60b7ff
editorHoverWidget.background#1a2233
editorHoverWidget.border#3a4c6800
editorIndentGuide.activeBackground#3a4c6857
editorIndentGuide.activeBackground1#3a4c68cc
editorIndentGuide.activeBackground2#8e58bbbf
editorIndentGuide.activeBackground3#67c18bc7
editorIndentGuide.activeBackground4#d89563c7
editorIndentGuide.activeBackground5#47c4e8c7
editorIndentGuide.activeBackground6#ff6ea8bd
editorIndentGuide.background#3a4c6829
editorIndentGuide.background1#3a4c6847
editorIndentGuide.background2#8e58bb40
editorIndentGuide.background3#67c18b42
editorIndentGuide.background4#d8956342
editorIndentGuide.background5#47c4e83d
editorIndentGuide.background6#ff6ea838
editorInlayHint.foreground#d9e2f080
editorLineNumber.activeForeground#b8c7dbe6
editorLineNumber.foreground#b8c7db8c
editorLink.activeForeground#8e58bb
editorMarkerNavigation.background#1a2233
editorOverviewRuler.addedForeground#67c18b
editorOverviewRuler.border#3a4c6800
editorOverviewRuler.bracketMatchForeground#b8c7dbb3
editorOverviewRuler.deletedForeground#e26a78
editorOverviewRuler.errorForeground#e0616f
editorOverviewRuler.findMatchForeground#3b3156
editorOverviewRuler.modifiedForeground#60b7ff
editorOverviewRuler.warningForeground#e6b766
editorOverviewRuler.wordHighlightForeground#60b7ff66
editorOverviewRuler.wordHighlightStrongForeground#67c18b66
editorRuler.foreground#3a4c6829
editorStickyScroll.border#3a4c6800
editorStickyScroll.shadow#3a4c686b
editorStickyScrollHover.background#8e58bb24
editorSuggestWidget.background#1a2233
editorSuggestWidget.border#3a4c6800
editorSuggestWidget.highlightForeground#8e58bb
editorSuggestWidget.selectedBackground#8e58bb38
editorWarning.foreground#e6b766
editorWhitespace.foreground#b8c7db8c
editorWidget.background#1a2233
editorWidget.border#3a4c6800
editorWidget.resizeBorder#1a223300
errorForeground#e0616f
extensionButton.prominentBackground#8e58bb
extensionButton.prominentForeground#1a0e2e
extensionButton.prominentHoverBackground#8953b6
focusBorder#3a4c6800
foreground#b8c7db
gitDecoration.conflictingResourceForeground#e6b766
gitDecoration.deletedResourceForeground#e26a78
gitDecoration.ignoredResourceForeground#b8c7db80
gitDecoration.modifiedResourceForeground#60b7ff
gitDecoration.submoduleResourceForeground#c897ff
gitDecoration.untrackedResourceForeground#67c18b
icon.foreground#b8c7db
inlineChat.background#1a2233
inlineChat.border#3a4c6800
inlineChat.foreground#d9e2f0
inlineChat.shadow#3a4c686b
inlineChatDiff.inserted#67c18b33
inlineChatDiff.removed#e26a7833
inlineChatInput.background#161e2d
inlineChatInput.border#3a4c6800
inlineChatInput.focusBorder#8e58bbb3
inlineChatInput.placeholderForeground#b8c7db80
inlineEdit.gutterIndicator.background#3a4c6800
inlineEdit.gutterIndicator.primaryBackground#8e58bb1a
inlineEdit.gutterIndicator.primaryBorder#8e58bb
inlineEdit.gutterIndicator.primaryForeground#8e58bb
inlineEdit.gutterIndicator.secondaryBackground#b8c7db1a
inlineEdit.gutterIndicator.secondaryBorder#b8c7db80
inlineEdit.gutterIndicator.secondaryForeground#b8c7db
inlineEdit.gutterIndicator.successfulBackground#67c18b1a
inlineEdit.gutterIndicator.successfulBorder#67c18b
inlineEdit.gutterIndicator.successfulForeground#67c18b
inlineEdit.modifiedBackground#67c18b1a
inlineEdit.modifiedBorder#67c18b80
inlineEdit.modifiedChangedLineBackground#67c18b26
inlineEdit.modifiedChangedTextBackground#67c18b40
inlineEdit.originalBackground#e26a781a
inlineEdit.originalBorder#e26a7880
inlineEdit.originalChangedLineBackground#e26a7826
inlineEdit.originalChangedTextBackground#e26a7840
input.background#161e2d
input.border#b8c7db33
input.foreground#d9e2f0
input.placeholderForeground#b8c7db80
inputOption.activeBackground#8e58bb1a
inputOption.activeBorder#8e58bb33
inputOption.activeForeground#8e58bb
inputOption.hoverBackground#b8c7db33
inputValidation.errorBackground#161e2d
inputValidation.errorBorder#e0616f
inputValidation.infoBackground#212b3f
inputValidation.infoBorder#47c4e8
inputValidation.warningBackground#212b3f
inputValidation.warningBorder#e6b766
keybindingLabel.background#b8c7db1a
keybindingLabel.border#d9e2f01a
keybindingLabel.bottomBorder#d9e2f01a
keybindingLabel.foreground#d9e2f0
list.activeSelectionBackground#8e58bb38
list.activeSelectionForeground#d9e2f0
list.deemphasizedForeground#e0616f
list.errorForeground#e0616f
list.filterMatchBackground#2f25498c
list.filterMatchBorder#3b31568c
list.focusBackground#8e58bb38
list.focusForeground#d9e2f0
list.focusOutline#8e58bb38
list.highlightForeground#8e58bb
list.hoverBackground#8e58bb38
list.inactiveSelectionBackground#8e58bb24
list.inactiveSelectionForeground#b8c7db
list.invalidItemForeground#b8c7db4d
listFilterWidget.background#1a2233
listFilterWidget.noMatchesOutline#e0616f
listFilterWidget.outline#8e58bb
menu.border#3a4c6800
minimap.background#212b3f
minimap.errorHighlight#e0616f
minimap.findMatchHighlight#3b3156
minimap.selectionHighlight#8e58bb3d
minimapGutter.addedBackground#67c18b
minimapGutter.deletedBackground#e26a78
minimapGutter.modifiedBackground#60b7ff
multiDiffEditor.background#212b3f
multiDiffEditor.border#3a4c6800
multiDiffEditor.headerBackground#1a2233
panel.background#1a2233
panel.border#3a4c6800
panelStickyScroll.border#3a4c6800
panelStickyScroll.shadow#3a4c686b
panelTitle.activeBorder#8e58bb00
panelTitle.activeForeground#8e58bb
panelTitle.inactiveForeground#b8c7db
peekView.border#8e58bb38
peekViewEditor.background#1a2233
peekViewEditor.matchHighlightBackground#3b31568c
peekViewEditor.matchHighlightBorder#2f25498c
peekViewResult.background#1a2233
peekViewResult.fileForeground#d9e2f0
peekViewResult.lineForeground#b8c7db
peekViewResult.matchHighlightBackground#3b31568c
peekViewResult.selectionBackground#8e58bb38
peekViewTitle.background#8e58bb38
peekViewTitleDescription.foreground#b8c7db
peekViewTitleLabel.foreground#d9e2f0
pickerGroup.border#3a4c6800
pickerGroup.foreground#b8c7db80
profileBadge.background#8e58bb
profileBadge.foreground#1a0e2e
progressBar.background#8e58bb
sash.background#1a2233
sash.hoverBackground#8e58bb
scrollbar.shadow#1a2233
scrollbarSlider.activeBackground#b8c7dbb3
scrollbarSlider.background#b8c7db66
scrollbarSlider.hoverBackground#b8c7db99
selection.background#8e58bb3d
settings.headerForeground#d9e2f0
settings.modifiedItemIndicator#60b7ff
sideBar.background#212b3f
sideBar.border#3a4c6800
sideBarSectionHeader.background#212b3f
sideBarSectionHeader.border#3a4c6800
sideBarSectionHeader.foreground#b8c7db
sideBarStickyScroll.border#3a4c6800
sideBarStickyScroll.shadow#3a4c686b
sideBarTitle.foreground#b8c7db
simpleFindWidget.sashBorder#1a223300
statusBar.background#38264a
statusBar.border#3a4c6800
statusBar.debuggingBackground#d89563
statusBar.debuggingForeground#161e2d
statusBar.focusBorder#00000000
statusBar.foreground#cdbae8
statusBarItem.activeBackground#b8c7db33
statusBarItem.hoverBackground#b8c7db33
statusBarItem.prominentBackground#3a4c6800
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#8e58bb
statusBarItem.remoteForeground#1a0e2e
symbolIcon.arrayForeground#72b6ff
symbolIcon.booleanForeground#c897ff
symbolIcon.classForeground#72b6ff
symbolIcon.colorForeground#ff6ea8
symbolIcon.constantForeground#c897ff
symbolIcon.constructorForeground#66d6b4
symbolIcon.enumeratorForeground#72b6ff
symbolIcon.enumeratorMemberForeground#c897ff
symbolIcon.eventForeground#ff6ea8
symbolIcon.fieldForeground#d97a9c
symbolIcon.fileForeground#b8c7db
symbolIcon.folderForeground#b8c7db
symbolIcon.functionForeground#66d6b4
symbolIcon.interfaceForeground#72b6ff
symbolIcon.keyForeground#47c4e8
symbolIcon.keywordForeground#8e58bb
symbolIcon.methodForeground#66d6b4
symbolIcon.moduleForeground#98d06b
symbolIcon.namespaceForeground#98d06b
symbolIcon.nullForeground#c897ff
symbolIcon.numberForeground#c897ff
symbolIcon.objectForeground#72b6ff
symbolIcon.operatorForeground#d89563
symbolIcon.packageForeground#98d06b
symbolIcon.propertyForeground#d97a9c
symbolIcon.referenceForeground#72b6ff
symbolIcon.snippetForeground#ff6ea8
symbolIcon.stringForeground#98d06b
symbolIcon.structForeground#72b6ff
symbolIcon.textForeground#d9e2f0
symbolIcon.typeParameterForeground#72b6ff
symbolIcon.unitForeground#c897ff
symbolIcon.variableForeground#d9e2f0
tab.activeBackground#161e2d
tab.activeBorder#161e2d
tab.activeForeground#d9e2f0
tab.border#3a4c6800
tab.inactiveBackground#212b3f
tab.inactiveForeground#b8c7db
tab.unfocusedActiveBorder#161e2d
tab.unfocusedActiveForeground#b8c7db
tab.unfocusedInactiveForeground#b8c7db
terminal.ansiBlack#0e121a
terminal.ansiBlue#60b7ff
terminal.ansiBrightBlack#3a4c68
terminal.ansiBrightBlue#7fc7ff
terminal.ansiBrightCyan#6fd4ef
terminal.ansiBrightGreen#82d3a2
terminal.ansiBrightMagenta#c88bff
terminal.ansiBrightRed#df7e8a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#ebc887
terminal.ansiCyan#47c4e8
terminal.ansiGreen#67c18b
terminal.ansiMagenta#8e58bb
terminal.ansiRed#c86974
terminal.ansiWhite#b8c7db
terminal.ansiYellow#e0ba70
terminal.background#161e2d
terminal.foreground#d9e2f0
terminalCommandGuide.foreground#b8c7db4d
terminalCursor.foreground#8e58bb
terminalStickyScroll.border#3a4c6800
terminalStickyScroll.shadow#3a4c686b
terminalStickyScrollHover.background#8e58bb24
textBlockQuote.background#1a2233
textLink.activeForeground#8e58bb
textLink.foreground#7d48aa
textPreformat.foreground#d9e2f0
titleBar.activeBackground#0f1622
titleBar.activeForeground#c5d0e0
titleBar.border#3a4c6800
titleBar.inactiveBackground#040d1b
titleBar.inactiveForeground#c5d0e0d9
toolbar.hoverBackground#b8c7db4d
tree.indentGuidesStroke#3a4c6857
tree.tableColumnsBorder#0000ff
walkThrough.embeddedEditorBackground#1a2233
welcomePage.buttonBackground#8e58bb66
welcomePage.progress.background#8e58bb29
welcomePage.tileBackground#212b3f
welcomePage.tileShadow#3a4c686b
widget.border#3a4c6800
widget.shadow#3a4c686b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#d9e2f0	—
comment	#7588a399	italic
string, constant.other.symbol	#98d06b	—
string.regexp, constant.character, constant.other	#e6b766	—
constant.numeric	#c897ff	—
constant.language	#c897ff	—
variable, variable.parameter.function-call	#d9e2f0	—
variable.member	#d97a9c	—
variable.language	#47c4e8	italic
storage	#8e58bb	—
keyword	#8e58bb	—
keyword.operator	#d89563	—
punctuation.separator, punctuation.terminator	#d9e2f0b3	—
punctuation.section	#d9e2f0	—
punctuation.accessor	#d89563	—
punctuation.definition.template-expression	#8e58bb	—
punctuation.section.embedded	#8e58bb	—
meta.embedded	#d9e2f0	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#72b6ff	—
entity.other.inherited-class	#47c4e8	—
storage.type.function	#8e58bb	—
source.java storage.type.primitive	#47c4e8	—
entity.name.function	#66d6b4	—
variable.parameter, meta.parameter	#c897ff	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#66d6b4	—
support.function, support.macro	#d97a9c	—
entity.name.import, entity.name.package	#98d06b	—
entity.name	#72b6ff	—
entity.name.tag, meta.tag.sgml	#47c4e8	—
support.class.component	#72b6ff	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#47c4e880	—
entity.other.attribute-name	#66d6b4	—
entity.other.attribute-name.pseudo-class	#e6b766	—
support.constant	#d89563	italic
support.type, support.class, source.go storage.type	#47c4e8	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#ff6ea8	—
invalid	#e0616f	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#66d6b4	—
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	#72b6ff	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#7588a399	—
support.type.property-name	#47c4e8	normal
constant.numeric.line-number.find-in-files - match	#7588a399	—
constant.numeric.line-number.match	#8e58bb	—
entity.name.filename.find-in-files	#98d06b	—
message.error	#e0616f	—
markup.heading, markup.heading entity.name	#98d06b	bold
markup.underline.link, string.other.link	#47c4e8	—
markup.italic, emphasis	#d97a9c	italic
markup.bold	#d97a9c	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#7588a399	bold
markup.quote	#e6b766	italic
markup.list punctuation.definition.list.begin	#66d6b4	—
markup.inserted	#67c18b	—
markup.changed	#60b7ff	—
markup.deleted	#e26a78	—
markup.strike	#ff6ea8	—
markup.strong	—	bold
markup.table	#47c4e8	—
text.html.markdown markup.inline.raw	#d89563	—
text.html.markdown meta.dummy.line-break	#7588a399	—
punctuation.definition.markdown	#7588a399	—

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