Jin Code Themes - Zen Collection

Name: Jin Code Themes - Zen Collection
Author: Jijin

Publisher: JijinThemes in package: 5

Thoughtfully crafted minimal light and dark theme for peaceful, distraction-free coding

GitHub

Color themes

VS Code preview

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

Jin Code Themes - Zen Collection — J charcoal Classic

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...
~/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#191E2A
activityBar.activeBorder#FFCC66
activityBar.activeFocusBorder#FFCC66
activityBar.background#1F2430
activityBar.border#191E2A
activityBar.dropBorder#FF9944
activityBar.foreground#CBCCC6
activityBar.inactiveForeground#707A8C
activityBarBadge.background#FFCC66
activityBarBadge.foreground#1F2430
badge.background#1F2430
badge.foreground#707A8C
button.background#eeb85a
button.foreground#1F2430
button.hoverBackground#ffd580
commandCenter.activeBackground#1a1d29
commandCenter.activeBorder#0000
commandCenter.activeForeground#CBCCC6
commandCenter.background#1F2430
commandCenter.border#0000
commandCenter.foreground#CBCCC6
commandCenter.inactiveBorder#0000
commandCenter.inactiveForeground#CBCCC6
contrastActiveBorder#0000
contrastBorder#0000
debugExceptionWidget.background#232834
debugExceptionWidget.border#191e2a
debugToolBar.background#232834
debugToolBar.border#0000
debugView.exceptionLabelBackground#eeb85a
debugView.exceptionLabelForeground#1F2430
diffEditor.insertedTextBackground#bae67e26
diffEditor.removedTextBackground#f29e7426
dropdown.background#171C24
dropdown.border#0000
dropdown.foreground#707a8c
dropdown.listBackground#1F2430
editor.background#1F2430
editor.findMatchBackground#0000
editor.findMatchBorder#FF9944
editor.findMatchHighlightBackground#0000
editor.findMatchHighlightBorder#ffcc66ae
editor.findRangeHighlightBackground#0000
editor.findRangeHighlightBorder#FF9944
editor.focusedStackFrameHighlightBackground#ff00ff
editor.foldBackground#24AEF317
editor.foreground#CBCCC6
editor.hoverHighlightBackground#3D516ACC
editor.inactiveSelectionBackground#3d516a
editor.lineHighlightBackground#191E2A
editor.rangeHighlightBackground#0000
editor.selectionBackground#3d516a
editor.selectionHighlightBackground#0000
editor.selectionHighlightBorder#FF9944
editor.wordHighlightBackground#463629
editor.wordHighlightStrongBackground#35291f
editorBracketMatch.background#707a8c4d
editorBracketMatch.border#707a8c99
editorCodeLens.foreground#CBCCC6
editorCursor.foreground#ffcc66
editorError.foreground#E74C3C
editorGroup.border#191e2a
editorGroup.dropBackground#FFFFFF17
editorGroup.emptyBackground#232834
editorGroup.focusedEmptyBorder#191e2a
editorGroupHeader.border#191e2a
editorGroupHeader.noTabsBackground#1F2430
editorGroupHeader.tabsBackground#1F2430
editorGroupHeader.tabsBorder#191e2a
editorGutter.addedBackground#A6CC70
editorGutter.deletedBackground#F27983
editorGutter.modifiedBackground#77A8D9
editorHoverWidget.background#20232F
editorHoverWidget.border#191e2a
editorHoverWidget.foreground#ffffff73
editorHoverWidget.statusBarBackground#232834
editorIndentGuide.activeBackground#171C24
editorIndentGuide.background#707a8c4d
editorLineNumber.activeForeground#707a8ccc
editorLineNumber.foreground#707a8c66
editorLink.activeForeground#ffcc66
editorMarkerNavigation.background#232834
editorMarkerNavigationWarning.background#ffcc66
editorOverviewRuler.addedForeground#A6CC70
editorOverviewRuler.background#1F2430
editorOverviewRuler.border#0000
editorOverviewRuler.currentContentForeground#707a8c4d
editorOverviewRuler.deletedForeground#F27983
editorOverviewRuler.errorForeground#E74C3C
editorOverviewRuler.findMatchForeground#ffcc66ae
editorOverviewRuler.modifiedForeground#77A8D9
editorOverviewRuler.selectionHighlightForeground#ffcc66ae
editorOverviewRuler.warningForeground#ffcc66
editorRuler.foreground#707a8c4d
editorSuggestWidget.background#191E2A
editorSuggestWidget.border#191E2A
editorSuggestWidget.foreground#CBCCC6
editorSuggestWidget.highlightForeground#ffcc66
editorSuggestWidget.selectedBackground#3D516ACC
editorWarning.foreground#ffcc66
editorWhitespace.foreground#cccccc25
editorWidget.background#232834
extensionBadge.remoteBackground#FFCC66ae
extensionBadge.remoteForeground#1F2430ae
extensionButton.prominentBackground#ffcc66
extensionButton.prominentForeground#1F2430
extensionButton.prominentHoverBackground#fac761
extensionIcon.preReleaseForeground#3D516ACC
extensionIcon.sponsorForeground#E74C3C
extensionIcon.starForeground#ffcc66
extensionIcon.verifiedForeground#ffcc66
focusBorder#0000
foreground#707a8c
gitDecoration.addedResourceForeground#FEF2C0
gitDecoration.conflictingResourceForeground#E74C3C
gitDecoration.deletedResourceForeground#F27983
gitDecoration.ignoredResourceForeground#707a8c
gitDecoration.modifiedResourceForeground#77A8D9
gitDecoration.submoduleResourceForeground#d4bfffb3
gitDecoration.untrackedResourceForeground#A6CC70
icon.foreground#CBCCC6
input.background#1a1d29
input.border#0000
input.foreground#CBCCC6
input.placeholderForeground#707A8C
inputOption.activeBackground#0000
inputOption.activeBorder#FFCC66a5
inputValidation.errorBackground#1F2430
inputValidation.errorBorder#E74C3C
inputValidation.errorForeground#E74C3C
inputValidation.infoBackground#1F2430
inputValidation.infoBorder#5ccfe6
inputValidation.infoForeground#77A8D9
inputValidation.warningBackground#1F2430
inputValidation.warningBorder#FF9944
inputValidation.warningForeground#ffcc66
list.activeSelectionBackground#191E2A
list.activeSelectionForeground#CBCCC6
list.deemphasizedForeground#8c8c8c
list.dropBackground#FFFFFF17
list.errorForeground#E74C3C
list.filterMatchBackground#ffcc660d
list.filterMatchBorder#ffcc6659
list.focusBackground#191E2A
list.focusForeground#CBCCC6
list.highlightForeground#ffcc66
list.hoverBackground#191E2A
list.hoverForeground#CBCCC6
list.inactiveFocusBackground#191E2A
list.inactiveSelectionBackground#191E2A
list.inactiveSelectionForeground#CBCCC6
list.invalidItemForeground#707A8C
list.warningForeground#FFCC66
listFilterWidget.background#653723
listFilterWidget.noMatchesOutline#E74C3C
listFilterWidget.outline#0000
menu.background#1F2430
menu.border#0000
menu.foreground#CBCCC6
menu.selectionBackground#171C24
menu.selectionBorder#FFCC66ae
menu.selectionForeground#FFFFFF
menu.separatorBackground#33415e
menubar.selectionBackground#171C24
menubar.selectionBorder#0000
menubar.selectionForeground#FFFFFF
panel.background#1F2430
panel.border#191e2a
panelInput.border#1F2430
panelSection.border#191e2a
panelSection.dropBackground#FFFFFF17
panelSectionHeader.background#1F2430
panelSectionHeader.foreground#707A8C
panelTitle.activeBorder#ffcc66
panelTitle.activeForeground#cbccc6
panelTitle.inactiveForeground#707A8C
peekView.border#191e2a
peekViewEditor.background#232834
peekViewEditor.matchHighlightBackground#ffcc6633
peekViewResult.background#232834
peekViewResult.fileForeground#707a8c
peekViewResult.matchHighlightBackground#ffcc6633
peekViewTitle.background#232834
peekViewTitleDescription.foreground#707a8c
peekViewTitleLabel.foreground#707a8c
pickerGroup.border#191e2a
pickerGroup.foreground#484f5e
problemsErrorIcon.foreground#E74C3C
problemsInfoIcon.foreground#75beff
problemsWarningIcon.foreground#ffcc66
progressBar.background#ffcc66
quickInput.background#1F2430
quickInput.foreground#707A8C
quickInputList.focusBackground#191E2A
quickInputList.focusForeground#FFFFFF
quickInputList.focusIconForeground#CBCCC6
quickInputTitle.background#1F2430
sash.hoverBorder#3D516A
scrollbar.shadow#191e2a
scrollbarSlider.activeBackground#707a8c
scrollbarSlider.background#707a8c66
scrollbarSlider.hoverBackground#707a8c96
selection.background#2a3546fd
settings.headerForeground#cbccc6
settings.modifiedItemIndicator#77a8d9
sideBar.background#1F2430
sideBar.border#191e2a
sideBar.dropBackground#FFFFFF17
sideBar.foreground#707A8C
sideBarSectionHeader.background#1F2430
sideBarSectionHeader.border#191E2A95
sideBarSectionHeader.foreground#707a8c
sideBarTitle.foreground#CBCCC6
statusBar.background#1F2430
statusBar.border#191e2a
statusBar.debuggingBackground#89D185
statusBar.debuggingBorder#0000
statusBar.debuggingForeground#1F2430
statusBar.foreground#707a8c
statusBar.noFolderBackground#232834
statusBar.noFolderBorder#141925
statusBar.noFolderForeground#707A8C
statusBarItem.activeBackground#171C24
statusBarItem.errorBackground#F27983
statusBarItem.errorForeground#cbccc6
statusBarItem.hoverBackground#191E2A
statusBarItem.prominentBackground#191e2a
statusBarItem.prominentForeground#20232F
statusBarItem.prominentHoverBackground#00000030
statusBarItem.remoteBackground#20232F
statusBarItem.remoteForeground#cbccc6
tab.activeBackground#171C24
tab.activeBorder#171C24
tab.activeBorderTop#ffcc66
tab.activeForeground#CBCCC6
tab.activeModifiedBorder#FF9944
tab.border#171C24
tab.hoverBackground#191E2A
tab.hoverBorder#0000
tab.hoverForeground#CBCCC6
tab.inactiveBackground#1F2430
tab.inactiveForeground#707A8C
tab.inactiveModifiedBorder#805500
tab.unfocusedActiveBackground#171C24
tab.unfocusedActiveBorder#0000
tab.unfocusedActiveBorderTop#ffcc66
tab.unfocusedActiveForeground#707A8C
tab.unfocusedActiveModifiedBorder#805500
tab.unfocusedHoverBackground#191E2A
tab.unfocusedHoverBorder#171C24
tab.unfocusedHoverForeground#CBCCC6
tab.unfocusedInactiveBackground#1F2430
tab.unfocusedInactiveForeground#707A8C
tab.unfocusedInactiveModifiedBorder#805500
terminal.ansiBlack#191e2a
terminal.ansiBlue#6dcbfa
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#73d0ff
terminal.ansiBrightCyan#95e6cb
terminal.ansiBrightGreen#bae67e
terminal.ansiBrightMagenta#D4BFFFAE
terminal.ansiBrightRed#f28779
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#ffd580
terminal.ansiCyan#90e1c6
terminal.ansiGreen#a6cc70
terminal.ansiMagenta#cfbafa
terminal.ansiRed#ed8274
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#fad07b
terminal.background#1F2430
terminal.foreground#cbccc6
terminal.selectionBackground#232834
terminalCursor.background#232834
textBlockQuote.background#232834
textLink.activeForeground#ffcc66
textLink.foreground#FFCC66ae
textPreformat.foreground#cbccc6
titleBar.activeBackground#1F2430
titleBar.activeForeground#cbccc6
titleBar.border#191e2a
titleBar.inactiveBackground#1F2430
titleBar.inactiveForeground#707A8C
toolbar.hoverOutline#0000
walkThrough.embeddedEditorBackground#232834
widget.shadow#141925

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
string, string.quoted, string.quoted.single, string.quoted.double, string.template	#BAE67E	—
meta.object-literal.key, meta.object.member, meta.objectliteral meta.object.member, meta.var.expr meta.object-literal.key, variable.object.property, support.variable.property, variable.other.property, variable.other.object.property, meta.definition.property entity.name.function, meta.definition.method entity.name.function, meta.type.declaration meta.object.type meta.definition.property entity.name.function, meta.class meta.field.declaration meta.definition.property variable.object.property, meta.class meta.field.declaration entity.name.function.method	#FF9944	—
meta.definition.method entity.name.function, meta.definition.function entity.name.function	#FFD580	—
meta.interface meta.definition.property variable.object.property, meta.type.declaration meta.object.type meta.definition.property variable.object.property	#FF9944	—
support.type.property-name.json, meta.structure.dictionary.json support.type.property-name.json	#FF9944	—
meta.tag.attributes entity.other.attribute-name, meta.jsx.attributes entity.other.attribute-name	#FF9944	—
meta.tag.attributes string, meta.jsx.attributes string	#BAE67E	—
string.template string.quoted, string.template constant.other.placeholder	#BAE67E	—
support.type.property-name.json	#FF9944	—
source meta.class meta.field.declaration meta.type.annotation keyword.operator	#CBCCC6B3
source.ts meta.interface meta.field.declaration meta.type.annotation keyword.operator.type.annotation, source meta.type meta.object.type keyword.operator	#CBCCC6B3
source.ts punctuation.definition.typeparameters.begin, source.ts punctuation.definition.typeparameters.end	#FF9944
source meta.block	#CBCCC6
source punctuation.separator.comma	#f29e7499
source punctuation.terminator, source punctuation.separator.key-value	#CBCCC6B3
source punctuation.definition.template-expression.begin, source punctuation.definition.template-expression.end	#BAE67E
source punctuation.definition.string.template.begin.js, source punctuation.definition.string.template.end.js, source string.template punctuation.definition.string.template.begin, source string.template punctuation.definition.string.template.end	#FF9944
source new.expr entity.name.type	#F29E74
source string.template meta.template.expression meta.embedded.line variable.other.readwrite, source string.template meta.template.expression meta.embedded.line variable.other	#CBCCC6
source.vue meta.objectliteral meta.object.member meta.objectliteral meta.method.declaration meta.block meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.method.declaration meta.block meta.objectliteral meta.object.member meta.function-call entity.name.function.js, source.vue meta.function-call entity.name.function.js	#F27983
source.vue meta.block meta.function-call variable.other.object.js, source.vue meta.function-call variable.other.object.js	#59C9DE99
source.vue meta.export.default meta.objectliteral meta.object.member meta.function-call entity.name.function.js	#F27983
source.vue meta.export.default meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.object.member meta.method.declaration meta.block meta.block meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.object.member entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.method.declaration meta.block meta.var.expr meta.function-call entity.name.function.js, source.vue meta.export.default meta.objectliteral meta.method.declaration meta.block meta.function-call entity.name.function.js	#FFD580
source.vue punctuation.definition.tag.begin, source.vue punctuation.definition.tag.end	#5CCFE6
source.vue text.html.vue-html meta.tag.block.any	#5CCFE6
source.vue meta.export.default meta.objectliteral meta.object.member meta.objectliteral meta.object.member meta.object-literal.key entity.name.function.js	#FFD580
source.vue text.html.vue-html meta.tag.block.any.html meta.directive.vue source.directive.vue variable.other.readwrite.js	#D4BFFF
source.vue text.html.vue-html expression.embedded.vue variable.other.readwrite.js	#D4BFFF
source.vue variable.parameter	#CBCCC6
source.vue variable.object.property	#BAE67E
source.vue support.function	#F27983
source.vue support.class.builtin	#5CCFE6
source.vue string.template variable.other.readwrite	#CBCCC6
source.vue meta.function-call support.function.console	#F27983
source.vue meta.definition.method.entity.name.function	#FFD580
source.stylus meta.property-list.css	#FF9944
source.stylus meta.selector.stylus	#FF9944
source.stylus meta.property-value.css	#FF9944
source.stylus entity.name.function.stylus	#BAE67E
source.stylus support.function.mixin.stylus	#5CCFE6
source.js meta.template.expression.js punctuation.definition.template-expression.begin.js, source.js meta.template.expression.js punctuation.definition.template-expression.end.js	#FF9944
source.js meta.template.expression.js meta.embedded.line.js variable.other.object.js	#CBCCC6
entity.name.function	#61AFEF	bold
meta.function-call	#FFD580
source support.type.object.module	#F29E74
source.meta.export.default meta.class meta.method.declaration meta.block meta.function-call support.function.console	#F27983
keyword.operator.new	#FA871C
entity.name.type	#FFD580
source.meta.export.default meta.class meta.method.declaration meta.block meta.var.expr new.expr entity.name.type	#F29E74
source.meta.export.default meta.class meta.method.declaration meta.block variable.other.object.property	#CBCCC6
source.meta.export.default meta.class meta.method.declaration meta.block meta.block meta.array.literal variable.other.property	#CBCCC6
source.meta.export.default meta.class meta.method.declaration meta.block variable.other.property	#CBCCC6
support.class.console	#0097A7
string, constant.other.symbol	#BAE67E
variable.parameter, meta.parameter	#ABB2BF
comment	#5c6773	italic
variable.language.this	#5CCFE6	italic
variable.language.super	#5CCFE6	italic
meta.object-literal.key	#BAE67E
keyword.control.default	#FF9944
keyword.control.import	#F29E74
keyword.control.export	#F29E74
string.regexp, constant.character, constant.other	#95e6cb
constant.numeric	#8C9EFF
constant.language	#ffcc66
meta.constant, entity.name.constant	#D4BFFF
variable.member	#f28779
storage, storage.type.keyword	#FF9944
keyword	#FF9944
keyword.operator	#F29E74
punctuation.section	#cbccc6
punctuation.accessor	#F29E74
entity.other.inherited-class	#5ccfe6
storage.type.function	#FF9944
variable.parameter, meta.parameter	#D4BFFF
variable.function, variable.annotation, meta.function-call.generic, support.function.go	#FFD580
entity.name.import, entity.name.package	#BAE67E
entity.name.tag, meta.tag.sgml	#5ccfe6
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#5ccfe680
entity.other.attribute-name	#FFD580
support.constant	#D19A66
storage.type.class	#FF9944	bold
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, variable.annotation, punctuation.definition.annotation	#ffe6b3
invalid	#E74C3C
meta.diff, meta.diff.header	#c594c5
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	#73d0ff
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#5c6773
support.type.property-name	#ABB2BF
constant.numeric.line-number.find-in-files - match	#5c6773
constant.numeric.line-number.match	#FF9944
entity.name.filename.find-in-files	#bae67e
message.error	#E74C3C
markup.heading, markup.heading entity.name	#BAE67E	bold
markup.underline.link, string.other.link	#5ccfe6
markup.italic	#f28779	italic
markup.bold	#f28779	bold
markup.italic markup.bold, markup.bold markup.italic	#f28779	bold italic
markup.raw	#5c6773	bold italic
markup.raw.inline	#5c6773	bold italic
meta.separator	#5c6773	bold
markup.quote	#95e6cb	italic
markup.list punctuation.definition.list.begin	#ffd580
markup.inserted	#A6CC70
markup.changed	#77A8D9
markup.deleted	#F27983
markup.strike	#ffe6b3
markup.table	#5ccfe6
text.html.markdown markup.inline.raw	#f29e74
text.html.markdown meta.dummy.line-break	#5c6773
punctuation.definition.markdown	#5c6773

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