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 Table 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#d66c6c
activityBar.background#f3e8e0
activityBar.border#8c725700
activityBar.foreground#d66c6c
activityBar.inactiveForeground#3e2b22
activityBarBadge.background#d66c6c
activityBarBadge.foreground#ffffff
activityBarTop.activeBorder#d66c6c00
activityBarTop.foreground#d66c6c
activityBarTop.inactiveForeground#3e2b22
badge.background#d66c6c33
badge.foreground#d66c6c
button.background#d66c6c
button.border#ffffff1a
button.foreground#ffffff
button.hoverBackground#cb6363
button.secondaryBackground#3e2b2233
button.secondaryForeground#483223
button.secondaryHoverBackground#3e2b2280
button.separator#ffffff4d
chat.checkpointSeparator#6f7c8f99
chat.editedFileForeground#3b79c1
chat.requestBackground#f3e8e0
chat.requestBorder#d66c6c38
chat.requestBubbleBackground#d66c6c24
chat.requestBubbleHoverBackground#d66c6c38
chat.slashCommandBackground#00b7e133
chat.slashCommandForeground#00b7e1
commandCenter.activeBackground#d66c6c38
commandCenter.activeBorder#d66c6c00
commandCenter.activeForeground#3e2b22
commandCenter.background#faf8f2
commandCenter.border#8c725700
commandCenter.foreground#3e2b22
commandCenter.inactiveBorder#8c725700
debugConsoleInputIcon.foreground#d66c6c
debugExceptionWidget.background#eedec3
debugExceptionWidget.border#8c725700
debugIcon.breakpointDisabledForeground#f78e5980
debugIcon.breakpointForeground#f78e59
debugToolBar.background#eedec3
descriptionForeground#3e2b22
diffEditor.diagonalFill#8c725700
diffEditor.insertedTextBackground#4fa84b1f
diffEditor.removedTextBackground#b9473f1f
disabledForeground#48322380
dropdown.background#eedec3
dropdown.border#8c725700
dropdown.foreground#3e2b22
editor.background#faf8f2
editor.findMatchBackground#f4d060
editor.findMatchHighlightBackground#f4d0608c
editor.foreground#483223
editor.inactiveSelectionBackground#d66c6c24
editor.lineHighlightBackground#d66c6c24
editor.rangeHighlightBackground#f4d06033
editor.selectionBackground#d66c6c47
editor.selectionHighlightBackground#4fa84b26
editor.selectionHighlightBorder#4fa84b00
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#3e2b224d
editorBracketMatch.border#3e2b224d
editorCodeLens.foreground#6f7c8f99
editorCursor.foreground#d66c6c
editorError.foreground#b9473f
editorGroup.background#eedec3
editorGroup.border#eedec3
editorGroupHeader.border#8c725700
editorGroupHeader.noTabsBackground#f3e8e0
editorGroupHeader.tabsBackground#f3e8e0
editorGroupHeader.tabsBorder#8c725700
editorGutter.addedBackground#4fa84b
editorGutter.deletedBackground#b9473f
editorGutter.modifiedBackground#3b79c1
editorHoverWidget.background#eedec3
editorHoverWidget.border#8c725700
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.foreground#48322380
editorLineNumber.activeForeground#3e2b22b3
editorLineNumber.foreground#3e2b2266
editorLink.activeForeground#d66c6c
editorMarkerNavigation.background#eedec3
editorOverviewRuler.addedForeground#4fa84b
editorOverviewRuler.border#8c725700
editorOverviewRuler.bracketMatchForeground#3e2b22b3
editorOverviewRuler.deletedForeground#b9473f
editorOverviewRuler.errorForeground#b9473f
editorOverviewRuler.findMatchForeground#f4d060
editorOverviewRuler.modifiedForeground#3b79c1
editorOverviewRuler.warningForeground#f6a100
editorOverviewRuler.wordHighlightForeground#3b79c166
editorOverviewRuler.wordHighlightStrongForeground#4fa84b66
editorRuler.foreground#8b5a2b2e
editorStickyScroll.border#8c725700
editorStickyScroll.shadow#8c725747
editorStickyScrollHover.background#d66c6c24
editorSuggestWidget.background#eedec3
editorSuggestWidget.border#8c725700
editorSuggestWidget.highlightForeground#d66c6c
editorSuggestWidget.selectedBackground#d66c6c38
editorWarning.foreground#f6a100
editorWhitespace.foreground#3e2b2266
editorWidget.background#eedec3
editorWidget.border#8c725700
editorWidget.resizeBorder#eedec300
errorForeground#b9473f
extensionButton.prominentBackground#d66c6c
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#d16768
focusBorder#8c725700
foreground#3e2b22
gitDecoration.conflictingResourceForeground#f6a100
gitDecoration.deletedResourceForeground#b9473f
gitDecoration.ignoredResourceForeground#3e2b2280
gitDecoration.modifiedResourceForeground#3b79c1
gitDecoration.submoduleResourceForeground#a676d8
gitDecoration.untrackedResourceForeground#4fa84b
icon.foreground#3e2b22
inlineChat.background#eedec3
inlineChat.border#8c725700
inlineChat.foreground#483223
inlineChat.shadow#8c725747
inlineChatDiff.inserted#4fa84b33
inlineChatDiff.removed#b9473f33
inlineChatInput.background#faf8f2
inlineChatInput.border#8c725700
inlineChatInput.focusBorder#d66c6cb3
inlineChatInput.placeholderForeground#3e2b2280
inlineEdit.gutterIndicator.background#8c725700
inlineEdit.gutterIndicator.primaryBackground#d66c6c1a
inlineEdit.gutterIndicator.primaryBorder#d66c6c
inlineEdit.gutterIndicator.primaryForeground#d66c6c
inlineEdit.gutterIndicator.secondaryBackground#3e2b221a
inlineEdit.gutterIndicator.secondaryBorder#3e2b2280
inlineEdit.gutterIndicator.secondaryForeground#3e2b22
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#faf8f2
input.border#3e2b2233
input.foreground#483223
input.placeholderForeground#3e2b2280
inputOption.activeBackground#d66c6c1a
inputOption.activeBorder#d66c6c33
inputOption.activeForeground#d66c6c
inputOption.hoverBackground#3e2b2233
inputValidation.errorBackground#faf8f2
inputValidation.errorBorder#b9473f
inputValidation.infoBackground#f3e8e0
inputValidation.infoBorder#00b7e1
inputValidation.warningBackground#f3e8e0
inputValidation.warningBorder#f6a100
keybindingLabel.background#3e2b221a
keybindingLabel.border#4832231a
keybindingLabel.bottomBorder#4832231a
keybindingLabel.foreground#483223
list.activeSelectionBackground#d66c6c38
list.activeSelectionForeground#483223
list.deemphasizedForeground#b9473f
list.errorForeground#b9473f
list.filterMatchBackground#e4c1528c
list.filterMatchBorder#f4d0608c
list.focusBackground#d66c6c38
list.focusForeground#483223
list.focusOutline#d66c6c38
list.highlightForeground#d66c6c
list.hoverBackground#d66c6c38
list.inactiveSelectionBackground#d66c6c24
list.inactiveSelectionForeground#3e2b22
list.invalidItemForeground#3e2b224d
listFilterWidget.background#eedec3
listFilterWidget.noMatchesOutline#b9473f
listFilterWidget.outline#d66c6c
menu.border#8c725700
minimap.background#f3e8e0
minimap.errorHighlight#b9473f
minimap.findMatchHighlight#f4d060
minimap.selectionHighlight#d66c6c47
minimapGutter.addedBackground#4fa84b
minimapGutter.deletedBackground#b9473f
minimapGutter.modifiedBackground#3b79c1
multiDiffEditor.background#f3e8e0
multiDiffEditor.border#8c725700
multiDiffEditor.headerBackground#eedec3
panel.background#eedec3
panel.border#8c725700
panelStickyScroll.border#8c725700
panelStickyScroll.shadow#8c725747
panelTitle.activeBorder#d66c6c00
panelTitle.activeForeground#d66c6c
panelTitle.inactiveForeground#3e2b22
peekView.border#d66c6c38
peekViewEditor.background#eedec3
peekViewEditor.matchHighlightBackground#f4d0608c
peekViewEditor.matchHighlightBorder#e4c1528c
peekViewResult.background#eedec3
peekViewResult.fileForeground#483223
peekViewResult.lineForeground#3e2b22
peekViewResult.matchHighlightBackground#f4d0608c
peekViewResult.selectionBackground#d66c6c38
peekViewTitle.background#d66c6c38
peekViewTitleDescription.foreground#3e2b22
peekViewTitleLabel.foreground#483223
pickerGroup.border#8c725700
pickerGroup.foreground#3e2b2280
profileBadge.background#d66c6c
profileBadge.foreground#ffffff
progressBar.background#d66c6c
sash.background#eedec3
sash.hoverBackground#d66c6c
scrollbar.shadow#eedec3
scrollbarSlider.activeBackground#3e2b22b3
scrollbarSlider.background#3e2b2266
scrollbarSlider.hoverBackground#3e2b2299
selection.background#d66c6c47
settings.headerForeground#483223
settings.modifiedItemIndicator#3b79c1
sideBar.background#f3e8e0
sideBar.border#8c725700
sideBarSectionHeader.background#f3e8e0
sideBarSectionHeader.border#8c725700
sideBarSectionHeader.foreground#3e2b22
sideBarStickyScroll.border#8c725700
sideBarStickyScroll.shadow#8c725747
sideBarTitle.foreground#3e2b22
simpleFindWidget.sashBorder#eedec300
statusBar.background#a8825c
statusBar.border#8c725700
statusBar.debuggingBackground#f78e59
statusBar.debuggingForeground#faf8f2
statusBar.focusBorder#00000000
statusBar.foreground#ffffff
statusBarItem.activeBackground#3e2b2233
statusBarItem.hoverBackground#3e2b2233
statusBarItem.prominentBackground#8c725700
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#d66c6c
statusBarItem.remoteForeground#ffffff
symbolIcon.arrayForeground#00a0f6
symbolIcon.booleanForeground#a676d8
symbolIcon.classForeground#00a0f6
symbolIcon.colorForeground#dfae66
symbolIcon.constantForeground#a676d8
symbolIcon.constructorForeground#1cc295
symbolIcon.enumeratorForeground#00a0f6
symbolIcon.enumeratorMemberForeground#a676d8
symbolIcon.eventForeground#dfae66
symbolIcon.fieldForeground#fc676b
symbolIcon.fileForeground#3e2b22
symbolIcon.folderForeground#3e2b22
symbolIcon.functionForeground#1cc295
symbolIcon.interfaceForeground#00a0f6
symbolIcon.keyForeground#00b7e1
symbolIcon.keywordForeground#ff7821
symbolIcon.methodForeground#1cc295
symbolIcon.moduleForeground#80b500
symbolIcon.namespaceForeground#80b500
symbolIcon.nullForeground#a676d8
symbolIcon.numberForeground#a676d8
symbolIcon.objectForeground#00a0f6
symbolIcon.operatorForeground#f78e59
symbolIcon.packageForeground#80b500
symbolIcon.propertyForeground#fc676b
symbolIcon.referenceForeground#00a0f6
symbolIcon.snippetForeground#dfae66
symbolIcon.stringForeground#80b500
symbolIcon.structForeground#00a0f6
symbolIcon.textForeground#483223
symbolIcon.typeParameterForeground#00a0f6
symbolIcon.unitForeground#a676d8
symbolIcon.variableForeground#483223
tab.activeBackground#faf8f2
tab.activeBorder#faf8f2
tab.activeForeground#483223
tab.border#8c725700
tab.inactiveBackground#f3e8e0
tab.inactiveForeground#3e2b22
tab.unfocusedActiveBorder#faf8f2
tab.unfocusedActiveForeground#3e2b22
tab.unfocusedInactiveForeground#3e2b22
terminal.ansiBlack#1d1d21
terminal.ansiBlue#3c44aa
terminal.ansiBrightBlack#474f52
terminal.ansiBrightBlue#1c4d9c
terminal.ansiBrightCyan#088c8c
terminal.ansiBrightGreen#00be00
terminal.ansiBrightMagenta#d254c2
terminal.ansiBrightRed#ce2020
terminal.ansiBrightWhite#808080
terminal.ansiBrightYellow#a48a10
terminal.ansiCyan#169c9c
terminal.ansiGreen#5e7c16
terminal.ansiMagenta#c354cd
terminal.ansiRed#b02e26
terminal.ansiWhite#71381f
terminal.ansiYellow#a08020
terminal.background#fceed7
terminal.foreground#71381f
terminalCommandGuide.foreground#3e2b224d
terminalCursor.foreground#d66c6c
terminalStickyScroll.border#8c725700
terminalStickyScroll.shadow#8c725747
terminalStickyScrollHover.background#d66c6c24
textBlockQuote.background#eedec3
textLink.activeForeground#d66c6c
textLink.foreground#c35c5d
textPreformat.foreground#483223
titleBar.activeBackground#cd976f
titleBar.activeForeground#ffffff
titleBar.border#8c725700
titleBar.inactiveBackground#c9936b
titleBar.inactiveForeground#ffffffd9
toolbar.hoverBackground#3e2b224d
tree.indentGuidesStroke#8b5a2b59
tree.tableColumnsBorder#4c88d8
walkThrough.embeddedEditorBackground#eedec3
welcomePage.buttonBackground#d66c6c66
welcomePage.progress.background#d66c6c24
welcomePage.tileBackground#f3e8e0
welcomePage.tileShadow#8c725747
widget.border#8c725700
widget.shadow#8c725747

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#483223	—
comment	#6f7c8f99	italic
string, constant.other.symbol	#80b500	—
string.regexp, constant.character, constant.other	#f6a100	—
constant.numeric	#a676d8	—
constant.language	#a676d8	—
variable, variable.parameter.function-call	#483223	—
variable.member	#fc676b	—
variable.language	#00b7e1	italic
storage	#ff7821	—
keyword	#ff7821	—
keyword.operator	#f78e59	—
punctuation.separator, punctuation.terminator	#483223b3	—
punctuation.section	#483223	—
punctuation.accessor	#f78e59	—
punctuation.definition.template-expression	#ff7821	—
punctuation.section.embedded	#ff7821	—
meta.embedded	#483223	—
source.java storage.type, source.haskell storage.type, source.c storage.type	#00a0f6	—
entity.other.inherited-class	#00b7e1	—
storage.type.function	#ff7821	—
source.java storage.type.primitive	#00b7e1	—
entity.name.function	#1cc295	—
variable.parameter, meta.parameter	#a676d8	—
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#1cc295	—
support.function, support.macro	#fc676b	—
entity.name.import, entity.name.package	#80b500	—
entity.name	#00a0f6	—
entity.name.tag, meta.tag.sgml	#00b7e1	—
support.class.component	#00a0f6	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#00b7e180	—
entity.other.attribute-name	#1cc295	—
entity.other.attribute-name.pseudo-class	#f6a100	—
support.constant	#f78e59	italic
support.type, support.class, source.go storage.type	#00b7e1	—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, entity.name.function.decorator	#dfae66	—
invalid	#b9473f	—
meta.diff, meta.diff.header	#c594c5	—
source.ruby variable.other.readwrite	#1cc295	—
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	#00a0f6	—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#6f7c8f99	—
support.type.property-name	#00b7e1	normal
constant.numeric.line-number.find-in-files - match	#6f7c8f99	—
constant.numeric.line-number.match	#ff7821	—
entity.name.filename.find-in-files	#80b500	—
message.error	#b9473f	—
markup.heading, markup.heading entity.name	#80b500	bold
markup.underline.link, string.other.link	#00b7e1	—
markup.italic, emphasis	#fc676b	italic
markup.bold	#fc676b	bold
markup.underline	—	underline
markup.italic markup.bold, markup.bold markup.italic	—	bold italic
markup.raw	—	—
markup.raw.inline	—	—
meta.separator	#6f7c8f99	bold
markup.quote	#f6a100	italic
markup.list punctuation.definition.list.begin	#1cc295	—
markup.inserted	#4fa84b	—
markup.changed	#3b79c1	—
markup.deleted	#b9473f	—
markup.strike	#dfae66	—
markup.strong	—	bold
markup.table	#00b7e1	—
text.html.markdown markup.inline.raw	#f78e59	—
text.html.markdown meta.dummy.line-break	#6f7c8f99	—
punctuation.definition.markdown	#6f7c8f99	—

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