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 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.activeBackground#FFFFFF
activityBar.activeBorder#FF9944
activityBar.activeFocusBorder#FF9944
activityBar.background#F5F7FA
activityBar.border#E4E9F2
activityBar.dropBorder#FF9944
activityBar.foreground#4D4D4D
activityBar.inactiveForeground#8C8C8C
activityBarBadge.background#FF9944
activityBarBadge.foreground#FFFFFF
badge.background#F5F7FA
badge.foreground#8C8C8C
button.background#FF9944
button.foreground#FFFFFF
button.hoverBackground#FFB066
commandCenter.activeBackground#FFFFFF
commandCenter.activeBorder#E4E9F2
commandCenter.activeForeground#4D4D4D
commandCenter.background#F5F7FA
commandCenter.border#E4E9F2
commandCenter.foreground#4D4D4D
commandCenter.inactiveBorder#E4E9F2
commandCenter.inactiveForeground#8C8C8C
debugExceptionWidget.background#F8F9FB
debugExceptionWidget.border#E4E9F2
debugToolBar.background#F8F9FB
debugView.exceptionLabelBackground#FFB066
debugView.exceptionLabelForeground#4D4D4D
diffEditor.insertedTextBackground#A6CC7026
diffEditor.removedTextBackground#F2797426
dropdown.background#FFFFFF
dropdown.border#E4E9F2
dropdown.foreground#4D4D4D
dropdown.listBackground#F5F7FA
editor.background#FFFFFF
editor.findMatchBackground#FFB06640
editor.findMatchBorder#FF9944
editor.findMatchHighlightBackground#FFB06640
editor.findMatchHighlightBorder#FFB066
editor.findRangeHighlightBackground#F5F7FA
editor.findRangeHighlightBorder#FF9944
editor.focusedStackFrameHighlightBackground#FFB066
editor.foldBackground#24AEF317
editor.foreground#4D4D4D
editor.hoverHighlightBackground#E4E9F2
editor.inactiveSelectionBackground#E4E9F2
editor.lineHighlightBackground#F8F9FB
editor.rangeHighlightBackground#F5F7FA
editor.selectionBackground#E4E9F2
editor.selectionHighlightBackground#E4E9F2
editor.selectionHighlightBorder#FF9944
editor.wordHighlightBackground#FFB06640
editor.wordHighlightStrongBackground#FFB06640
editorBracketMatch.background#8C8C8C40
editorBracketMatch.border#8C8C8C
editorCodeLens.foreground#8C8C8C
editorCursor.foreground#FF9944
editorError.foreground#E74C3C
editorGroup.border#E4E9F2
editorGroup.dropBackground#00000010
editorGroup.emptyBackground#F8F9FB
editorGroup.focusedEmptyBorder#E4E9F2
editorGroupHeader.border#E4E9F2
editorGroupHeader.noTabsBackground#F5F7FA
editorGroupHeader.tabsBackground#F5F7FA
editorGroupHeader.tabsBorder#E4E9F2
editorGutter.addedBackground#A6CC70
editorGutter.deletedBackground#F27983
editorGutter.modifiedBackground#77A8D9
editorHoverWidget.background#FFFFFF
editorHoverWidget.border#E4E9F2
editorHoverWidget.foreground#4D4D4D
editorHoverWidget.statusBarBackground#F8F9FB
editorIndentGuide.activeBackground#E4E9F2
editorIndentGuide.background#8C8C8C40
editorLineNumber.activeForeground#4D4D4D
editorLineNumber.foreground#8C8C8C
editorLink.activeForeground#FF9944
editorMarkerNavigation.background#F8F9FB
editorMarkerNavigationWarning.background#FF9944
editorOverviewRuler.addedForeground#A6CC70
editorOverviewRuler.background#F5F7FA
editorOverviewRuler.border#E4E9F2
editorOverviewRuler.currentContentForeground#8C8C8C40
editorOverviewRuler.deletedForeground#F27983
editorOverviewRuler.errorForeground#E74C3C
editorOverviewRuler.findMatchForeground#FF9944
editorOverviewRuler.modifiedForeground#77A8D9
editorOverviewRuler.selectionHighlightForeground#FF9944
editorOverviewRuler.warningForeground#FF9944
editorRuler.foreground#8C8C8C40
editorSuggestWidget.background#FFFFFF
editorSuggestWidget.border#E4E9F2
editorSuggestWidget.foreground#4D4D4D
editorSuggestWidget.highlightForeground#FF9944
editorSuggestWidget.selectedBackground#E4E9F2
editorWarning.foreground#FF9944
editorWhitespace.foreground#8C8C8C40
editorWidget.background#F8F9FB
extensionButton.prominentBackground#FF9944
extensionButton.prominentForeground#FFFFFF
extensionButton.prominentHoverBackground#FFB066
focusBorder#E4E9F2
foreground#4D4D4D
gitDecoration.addedResourceForeground#A6CC70
gitDecoration.conflictingResourceForeground#E74C3C
gitDecoration.deletedResourceForeground#F27983
gitDecoration.ignoredResourceForeground#8C8C8C
gitDecoration.modifiedResourceForeground#77A8D9
gitDecoration.submoduleResourceForeground#D4BFFF
gitDecoration.untrackedResourceForeground#A6CC70
input.background#FFFFFF
input.border#E4E9F2
input.foreground#4D4D4D
input.placeholderForeground#8C8C8C
inputOption.activeBackground#F5F7FA
inputValidation.errorForeground#E74C3C
inputValidation.infoForeground#77A8D9
inputValidation.warningForeground#FF9944
list.activeSelectionBackground#E4E9F2
list.activeSelectionForeground#4D4D4D
list.focusBackground#E4E9F2
list.focusForeground#4D4D4D
list.hoverBackground#F8F9FB
list.hoverForeground#4D4D4D
list.inactiveSelectionBackground#F5F7FA
list.inactiveSelectionForeground#4D4D4D
panelInput.border#E4E9F2
quickInput.background#F5F7FA
quickInput.foreground#4D4D4D
quickInputList.focusBackground#E4E9F2
quickInputList.focusForeground#4D4D4D
quickInputList.focusIconForeground#4D4D4D
quickInputTitle.background#F5F7FA
sideBar.background#F5F7FA
sideBar.border#E4E9F2
sideBar.foreground#4D4D4D
sideBarSectionHeader.background#F5F7FA
sideBarSectionHeader.border#E4E9F2
sideBarSectionHeader.foreground#4D4D4D
sideBarTitle.foreground#4D4D4D
tab.activeBackground#FFFFFF
tab.activeBorder#FFFFFF
tab.activeBorderTop#FF9944
tab.activeForeground#4D4D4D
tab.border#E4E9F2
tab.inactiveBackground#F5F7FA
tab.inactiveForeground#8C8C8C
terminal.ansiBlack#333333
terminal.ansiBlue#77A8D9
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#73D0FF
terminal.ansiBrightCyan#95E6CB
terminal.ansiBrightGreen#BAE67E
terminal.ansiBrightMagenta#D4BFFF
terminal.ansiBrightRed#F27983
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#FFD580
terminal.ansiCyan#90E1C6
terminal.ansiGreen#A6CC70
terminal.ansiMagenta#CFBAFA
terminal.ansiRed#F27983
terminal.ansiWhite#FFFFFF
terminal.ansiYellow#FFB066
terminal.background#FFFFFF
terminal.foreground#4D4D4D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#8C8C8C	italic
string	#2E7D32
keyword	#AF00DB
variable	#C41A16
entity.name.function	#2B5B84
constant.numeric	#1C00CF
storage.type, storage.modifier	#AF00DB	bold
entity.name.type	#0097A7
keyword.operator	#000000
markup.heading	#2E7D32	bold
markup.underline.link, string.other.link	#0097A7
markup.italic	#E67E22	italic
markup.bold	#E67E22	bold
markup.italic markup.bold, markup.bold markup.italic	#E67E22	bold italic
markup.raw	#8C8C8C
markup.raw.inline	#8C8C8C
meta.separator	#8C8C8C	bold
markup.quote	#2E7D32	italic
markup.list punctuation.definition.list.begin	#CC7700
markup.inserted	#2E7D32
markup.changed	#0097A7
markup.deleted	#E74C3C
markup.strike	#CC7700
markup.table	#0097A7
source.ts meta.interface meta.field.declaration meta.type.annotation keyword.operator.type.annotation, source meta.type meta.object.type keyword.operator	#4D4D4D
source.ts punctuation.definition.typeparameters.begin, source.ts punctuation.definition.typeparameters.end	#AF00DB
source meta.block	#4D4D4D
source punctuation.separator.comma	#E67E22
source punctuation.terminator, source punctuation.separator.key-value	#4D4D4D
source punctuation.definition.template-expression.begin, source punctuation.definition.template-expression.end	#2E7D32
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	#0097A7
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type	#8C8C8C
support.type.property-name	#4D4D4D
support.constant	#CC7700
storage.type.class	#AF00DB	bold
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation, variable.annotation, punctuation.definition.annotation	#CC7700

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