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 2 Light

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#ffb84d
activityBar.background#f3eee7
activityBar.border#9c938900
activityBar.foreground#ffb84d
activityBar.inactiveForeground#49515c
activityBarBadge.background#ffb84d
activityBarBadge.foreground#072433
activityBarTop.activeBorder#ffb84d00
activityBarTop.foreground#ffb84d
activityBarTop.inactiveForeground#49515c
badge.background#ffb84d33
badge.foreground#ffb84d
button.background#ffb84d
button.border#0724331a
button.foreground#072433
button.hoverBackground#f4ae43
button.secondaryBackground#49515c33
button.secondaryForeground#3d4956
button.secondaryHoverBackground#49515c80
button.separator#0724334d
chat.checkpointSeparator#7a85909e
chat.editedFileForeground#27c4e8
chat.requestBackground#f3eee7
chat.requestBorder#ffb84d33
chat.requestBubbleBackground#ffb84d1f
chat.requestBubbleHoverBackground#ffb84d33
chat.slashCommandBackground#1ba8d933
chat.slashCommandForeground#1ba8d9
commandCenter.activeBackground#ffb84d33
commandCenter.activeBorder#ffb84d00
commandCenter.activeForeground#49515c
commandCenter.background#fffdf8
commandCenter.border#9c938900
commandCenter.foreground#49515c
commandCenter.inactiveBorder#9c938900
debugConsoleInputIcon.foreground#ffb84d
debugExceptionWidget.background#f6f2ec
debugExceptionWidget.border#9c938900
debugIcon.breakpointDisabledForeground#e58c5580
debugIcon.breakpointForeground#e58c55
debugToolBar.background#f6f2ec
descriptionForeground#49515c
diffEditor.diagonalFill#9c938900
diffEditor.insertedTextBackground#4fa84b1f
diffEditor.removedTextBackground#b9473f1f
disabledForeground#3d495680
dropdown.background#f6f2ec
dropdown.border#9c938900
dropdown.foreground#49515c
editor.background#fffdf8
editor.findMatchBackground#f2d48a
editor.findMatchHighlightBackground#f2d48a8c
editor.foreground#3d4956
editor.inactiveSelectionBackground#ffb84d1f
editor.lineHighlightBackground#ffb84d1c
editor.rangeHighlightBackground#f2d48a33
editor.selectionBackground#ffb84d3d
editor.selectionHighlightBackground#4fa84b26
editor.selectionHighlightBorder#4fa84b00
editor.snippetTabstopHighlightBackground#4fa84b33
editor.wordHighlightBackground#27c4e814
editor.wordHighlightBorder#27c4e880
editor.wordHighlightStrongBackground#4fa84b14
editor.wordHighlightStrongBorder#4fa84b80
editorBracketHighlight.foreground1#9c6a3ae0
editorBracketHighlight.foreground2#e0b14e
editorBracketHighlight.foreground3#5faf53d9
editorBracketHighlight.foreground4#47a1e0d9
editorBracketHighlight.foreground5#7c59b5d9
editorBracketHighlight.foreground6#c1678dd1
editorBracketMatch.background#49515c4d
editorBracketMatch.border#49515c4d
editorCodeLens.foreground#7a85909e
editorCursor.foreground#ffb84d
editorError.foreground#c94b45
editorGroup.background#f6f2ec
editorGroup.border#f6f2ec
editorGroupHeader.border#9c938900
editorGroupHeader.noTabsBackground#f3eee7
editorGroupHeader.tabsBackground#f3eee7
editorGroupHeader.tabsBorder#9c938900
editorGutter.addedBackground#4fa84b
editorGutter.deletedBackground#b9473f
editorGutter.modifiedBackground#27c4e8
editorHoverWidget.background#f6f2ec
editorHoverWidget.border#9c938900
editorIndentGuide.activeBackground#9c6a3a52
editorIndentGuide.activeBackground1#9c6a3ae0
editorIndentGuide.activeBackground2#e0b14e
editorIndentGuide.activeBackground3#5faf53d9
editorIndentGuide.activeBackground4#47a1e0d9
editorIndentGuide.activeBackground5#7c59b5d9
editorIndentGuide.activeBackground6#c1678dd1
editorIndentGuide.background#9c6a3a29
editorIndentGuide.background1#9c6a3a57
editorIndentGuide.background2#e0b14e8c
editorIndentGuide.background3#5faf5359
editorIndentGuide.background4#47a1e059
editorIndentGuide.background5#7c59b559
editorIndentGuide.background6#c1678d57
editorInlayHint.foreground#3d495680
editorLineNumber.activeForeground#49515cb8
editorLineNumber.foreground#49515c6b
editorLink.activeForeground#ffb84d
editorMarkerNavigation.background#f6f2ec
editorOverviewRuler.addedForeground#4fa84b
editorOverviewRuler.border#9c938900
editorOverviewRuler.bracketMatchForeground#49515cb3
editorOverviewRuler.deletedForeground#b9473f
editorOverviewRuler.errorForeground#c94b45
editorOverviewRuler.findMatchForeground#f2d48a
editorOverviewRuler.modifiedForeground#27c4e8
editorOverviewRuler.warningForeground#d59a32
editorOverviewRuler.wordHighlightForeground#27c4e866
editorOverviewRuler.wordHighlightStrongForeground#4fa84b66
editorRuler.foreground#9c6a3a29
editorStickyScroll.border#9c938900
editorStickyScroll.shadow#9c93893d
editorStickyScrollHover.background#ffb84d1f
editorSuggestWidget.background#f6f2ec
editorSuggestWidget.border#9c938900
editorSuggestWidget.highlightForeground#ffb84d
editorSuggestWidget.selectedBackground#ffb84d33
editorWarning.foreground#d59a32
editorWhitespace.foreground#49515c6b
editorWidget.background#f6f2ec
editorWidget.border#9c938900
editorWidget.resizeBorder#f6f2ec00
errorForeground#c94b45
extensionButton.prominentBackground#ffb84d
extensionButton.prominentForeground#072433
extensionButton.prominentHoverBackground#f9b348
focusBorder#9c938900
foreground#49515c
gitDecoration.conflictingResourceForeground#d59a32
gitDecoration.deletedResourceForeground#b9473f
gitDecoration.ignoredResourceForeground#49515c80
gitDecoration.modifiedResourceForeground#27c4e8
gitDecoration.submoduleResourceForeground#8e68c7
gitDecoration.untrackedResourceForeground#4fa84b
icon.foreground#49515c
inlineChat.background#f6f2ec
inlineChat.border#9c938900
inlineChat.foreground#3d4956
inlineChat.shadow#9c93893d
inlineChatDiff.inserted#4fa84b33
inlineChatDiff.removed#b9473f33
inlineChatInput.background#fffdf8
inlineChatInput.border#9c938900
inlineChatInput.focusBorder#ffb84db3
inlineChatInput.placeholderForeground#49515c80
inlineEdit.gutterIndicator.background#9c938900
inlineEdit.gutterIndicator.primaryBackground#ffb84d1a
inlineEdit.gutterIndicator.primaryBorder#ffb84d
inlineEdit.gutterIndicator.primaryForeground#ffb84d
inlineEdit.gutterIndicator.secondaryBackground#49515c1a
inlineEdit.gutterIndicator.secondaryBorder#49515c80
inlineEdit.gutterIndicator.secondaryForeground#49515c
inlineEdit.gutterIndicator.successfulBackground#4fa84b1a
inlineEdit.gutterIndicator.successfulBorder#4fa84b
inlineEdit.gutterIndicator.successfulForeground#4fa84b
inlineEdit.modifiedBackground#4fa84b1a
inlineEdit.modifiedBorder#4fa84b80
inlineEdit.modifiedChangedLineBackground#4fa84b26
inlineEdit.modifiedChangedTextBackground#4fa84b40
inlineEdit.originalBackground#b9473f1a
inlineEdit.originalBorder#b9473f80
inlineEdit.originalChangedLineBackground#b9473f26
inlineEdit.originalChangedTextBackground#b9473f40
input.background#fffdf8
input.border#49515c33
input.foreground#3d4956
input.placeholderForeground#49515c80
inputOption.activeBackground#ffb84d1a
inputOption.activeBorder#ffb84d33
inputOption.activeForeground#ffb84d
inputOption.hoverBackground#49515c33
inputValidation.errorBackground#fffdf8
inputValidation.errorBorder#c94b45
inputValidation.infoBackground#f3eee7
inputValidation.infoBorder#1ba8d9
inputValidation.warningBackground#f3eee7
inputValidation.warningBorder#d59a32
keybindingLabel.background#49515c1a
keybindingLabel.border#3d49561a
keybindingLabel.bottomBorder#3d49561a
keybindingLabel.foreground#3d4956
list.activeSelectionBackground#ffb84d33
list.activeSelectionForeground#3d4956
list.deemphasizedForeground#c94b45
list.errorForeground#c94b45
list.filterMatchBackground#e2c57c8c
list.filterMatchBorder#f2d48a8c
list.focusBackground#ffb84d33
list.focusForeground#3d4956
list.focusOutline#ffb84d33
list.highlightForeground#ffb84d
list.hoverBackground#ffb84d33
list.inactiveSelectionBackground#ffb84d1f
list.inactiveSelectionForeground#49515c
list.invalidItemForeground#49515c4d
listFilterWidget.background#f6f2ec
listFilterWidget.noMatchesOutline#c94b45
listFilterWidget.outline#ffb84d
menu.border#9c938900
minimap.background#f3eee7
minimap.errorHighlight#c94b45
minimap.findMatchHighlight#f2d48a
minimap.selectionHighlight#ffb84d3d
minimapGutter.addedBackground#4fa84b
minimapGutter.deletedBackground#b9473f
minimapGutter.modifiedBackground#27c4e8
multiDiffEditor.background#f3eee7
multiDiffEditor.border#9c938900
multiDiffEditor.headerBackground#f6f2ec
panel.background#f6f2ec
panel.border#9c938900
panelStickyScroll.border#9c938900
panelStickyScroll.shadow#9c93893d
panelTitle.activeBorder#ffb84d00
panelTitle.activeForeground#ffb84d
panelTitle.inactiveForeground#49515c
peekView.border#ffb84d33
peekViewEditor.background#f6f2ec
peekViewEditor.matchHighlightBackground#f2d48a8c
peekViewEditor.matchHighlightBorder#e2c57c8c
peekViewResult.background#f6f2ec
peekViewResult.fileForeground#3d4956
peekViewResult.lineForeground#49515c
peekViewResult.matchHighlightBackground#f2d48a8c
peekViewResult.selectionBackground#ffb84d33
peekViewTitle.background#ffb84d33
peekViewTitleDescription.foreground#49515c
peekViewTitleLabel.foreground#3d4956
pickerGroup.border#9c938900
pickerGroup.foreground#49515c80
profileBadge.background#ffb84d
profileBadge.foreground#072433
progressBar.background#ffb84d
sash.background#f6f2ec
sash.hoverBackground#ffb84d
scrollbar.shadow#f6f2ec
scrollbarSlider.activeBackground#49515cb3
scrollbarSlider.background#49515c66
scrollbarSlider.hoverBackground#49515c99
selection.background#ffb84d3d
settings.headerForeground#3d4956
settings.modifiedItemIndicator#27c4e8
sideBar.background#f3eee7
sideBar.border#9c938900
sideBarSectionHeader.background#f3eee7
sideBarSectionHeader.border#9c938900
sideBarSectionHeader.foreground#49515c
sideBarStickyScroll.border#9c938900
sideBarStickyScroll.shadow#9c93893d
sideBarTitle.foreground#49515c
simpleFindWidget.sashBorder#f6f2ec00
statusBar.background#007acc
statusBar.border#9c938900
statusBar.debuggingBackground#e58c55
statusBar.debuggingForeground#fffdf8
statusBar.focusBorder#00000000
statusBar.foreground#ffffff
statusBarItem.activeBackground#49515c33
statusBarItem.hoverBackground#49515c33
statusBarItem.prominentBackground#9c938900
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#ffb84d
statusBarItem.remoteForeground#072433
symbolIcon.arrayForeground#2e88c7
symbolIcon.booleanForeground#8e68c7
symbolIcon.classForeground#2e88c7
symbolIcon.colorForeground#d7aa59
symbolIcon.constantForeground#8e68c7
symbolIcon.constructorForeground#2dae87
symbolIcon.enumeratorForeground#2e88c7
symbolIcon.enumeratorMemberForeground#8e68c7
symbolIcon.eventForeground#d7aa59
symbolIcon.fieldForeground#c96557
symbolIcon.fileForeground#49515c
symbolIcon.folderForeground#49515c
symbolIcon.functionForeground#2dae87
symbolIcon.interfaceForeground#2e88c7
symbolIcon.keyForeground#1ba8d9
symbolIcon.keywordForeground#e07a3a
symbolIcon.methodForeground#2dae87
symbolIcon.moduleForeground#7ea33a
symbolIcon.namespaceForeground#7ea33a
symbolIcon.nullForeground#8e68c7
symbolIcon.numberForeground#8e68c7
symbolIcon.objectForeground#2e88c7
symbolIcon.operatorForeground#e58c55
symbolIcon.packageForeground#7ea33a
symbolIcon.propertyForeground#c96557
symbolIcon.referenceForeground#2e88c7
symbolIcon.snippetForeground#d7aa59
symbolIcon.stringForeground#7ea33a
symbolIcon.structForeground#2e88c7
symbolIcon.textForeground#3d4956
symbolIcon.typeParameterForeground#2e88c7
symbolIcon.unitForeground#8e68c7
symbolIcon.variableForeground#3d4956
tab.activeBackground#fffdf8
tab.activeBorder#fffdf8
tab.activeForeground#3d4956
tab.border#9c938900
tab.inactiveBackground#f3eee7
tab.inactiveForeground#49515c
tab.unfocusedActiveBorder#fffdf8
tab.unfocusedActiveForeground#49515c
tab.unfocusedInactiveForeground#49515c
terminal.ansiBlack#1d1d21
terminal.ansiBlue#2f8fde
terminal.ansiBrightBlack#6f7a82
terminal.ansiBrightBlue#54a8ea
terminal.ansiBrightCyan#65d6f0
terminal.ansiBrightGreen#6fc468
terminal.ansiBrightMagenta#b27be0
terminal.ansiBrightRed#dd6a63
terminal.ansiBrightWhite#808080
terminal.ansiBrightYellow#e3ba64
terminal.ansiCyan#ffb84d
terminal.ansiGreen#5faf53
terminal.ansiMagenta#a16acf
terminal.ansiRed#c45749
terminal.ansiWhite#3d4956
terminal.ansiYellow#d6a54a
terminal.background#f9f5ee
terminal.foreground#3d4956
terminalCommandGuide.foreground#49515c4d
terminalCursor.foreground#ffb84d
terminalStickyScroll.border#9c938900
terminalStickyScroll.shadow#9c93893d
terminalStickyScrollHover.background#ffb84d1f
textBlockQuote.background#f6f2ec
textLink.activeForeground#ffb84d
textLink.foreground#eca73c
textPreformat.foreground#3d4956
titleBar.activeBackground#cc8165
titleBar.activeForeground#ffffff
titleBar.border#9c938900
titleBar.inactiveBackground#c87d61
titleBar.inactiveForeground#ffffffd9
toolbar.hoverBackground#49515c4d
tree.indentGuidesStroke#9c6a3a52
tree.tableColumnsBorder#4c88d8
walkThrough.embeddedEditorBackground#f6f2ec
welcomePage.buttonBackground#ffb84d66
welcomePage.progress.background#ffb84d1c
welcomePage.tileBackground#f3eee7
welcomePage.tileShadow#9c93893d
widget.border#9c938900
widget.shadow#9c93893d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#3d4956	—
comment	#7a85909e	italic
string, constant.other.symbol	#7ea33a	—
string.regexp, constant.character, constant.other	#d59a32	—
constant.numeric	#8e68c7	—
constant.language	#8e68c7	—
variable, variable.parameter.function-call	#3d4956	—
variable.member	#c96557	—
variable.language	#1ba8d9	italic
storage	#e07a3a	—
keyword	#e07a3a	—
keyword.operator	#e58c55	—
punctuation.separator, punctuation.terminator	#3d4956b3	—
punctuation.section	#3d4956	—
punctuation.accessor	#e58c55	—
punctuation.definition.template-expression	#e07a3a	—
punctuation.section.embedded	#e07a3a	—
meta.embedded	#3d4956	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#2e88c7	—
entity.other.inherited-class	#1ba8d9	—
storage.type.function	#e07a3a	—
source.java storage.type.primitive	#1ba8d9	—
entity.name.function	#2dae87	—
variable.parameter, meta.parameter	#8e68c7	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#2dae87	—
support.function, support.macro	#c96557	—
entity.name.import, entity.name.package	#7ea33a	—
entity.name	#2e88c7	—
entity.name.tag, meta.tag.sgml	#1ba8d9	—
support.class.component	#2e88c7	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#1ba8d980	—
entity.other.attribute-name	#2dae87	—
entity.other.attribute-name.pseudo-class	#d59a32	—
support.constant	#e58c55	italic
support.type, support.class, source.go storage.type	#1ba8d9	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#d7aa59	—
invalid	#c94b45	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#2dae87	—
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	#2e88c7	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#7a85909e	—
support.type.property-name	#1ba8d9	normal
constant.numeric.line-number.find-in-files - match	#7a85909e	—
constant.numeric.line-number.match	#e07a3a	—
entity.name.filename.find-in-files	#7ea33a	—
message.error	#c94b45	—
markup.heading, markup.heading entity.name	#7ea33a	bold
markup.underline.link, string.other.link	#1ba8d9	—
markup.italic, emphasis	#c96557	italic
markup.bold	#c96557	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#7a85909e	bold
markup.quote	#d59a32	italic
markup.list punctuation.definition.list.begin	#2dae87	—
markup.inserted	#4fa84b	—
markup.changed	#27c4e8	—
markup.deleted	#b9473f	—
markup.strike	#d7aa59	—
markup.strong	—	bold
markup.table	#1ba8d9	—
text.html.markdown markup.inline.raw	#e58c55	—
text.html.markdown meta.dummy.line-break	#7a85909e	—
punctuation.definition.markdown	#7a85909e	—

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