escook-theme

Name: escook-theme
Author: 刘龙彬

Publisher: 刘龙彬Themes in package: 4

彬哥の VSCode 主题 →_→ escook-theme

GitHub

Color themes

VS Code preview

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

escook-theme — escook Light Soft

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.background#fafafa
activityBar.border#f5f5f5
activityBar.foreground#27292Fcc
activityBarBadge.background#ff9940
activityBarBadge.foreground#fafafa
badge.background#ff9940
badge.foreground#fafafa
button.background#ff9940
button.foreground#fafafa
button.hoverBackground#f9943b
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#27292F1a
debugToolBar.background#ffffff
diffEditor.insertedTextBackground#86b30026
diffEditor.removedTextBackground#ed936626
dropdown.background#ffffff
dropdown.border#dcdee1
dropdown.foreground#27292F
editor.background#FAFAFA
editor.findMatchBackground#ff99400d
editor.findMatchBorder#ff9940
editor.findMatchHighlightBackground#ff99400d
editor.findMatchHighlightBorder#ff994059
editor.findRangeHighlightBackground#eff3f6
editor.findRangeHighlightBorder#fafafa00
editor.foreground#27292F
editor.inactiveSelectionBackground#eff3f6
editor.lineHighlightBackground#27292F1a
editor.rangeHighlightBackground#27292F1a
editor.selectionBackground#B1F8FF
editor.selectionHighlightBackground#eff3f6
editor.selectionHighlightBorder#dee8f1
editor.wordHighlightBackground#eff3f6
editor.wordHighlightStrongBackground#ff994033
editorBracketMatch.background#27292F4d
editorBracketMatch.border#27292F99
editorCodeLens.foreground#abb0b6
editorCursor.foreground#ff9940
editorError.foreground#f51818
editorGroup.border#27292F1a
editorGroupHeader.noTabsBackground#fafafa
editorGroupHeader.tabsBackground#fafafa
editorGroupHeader.tabsBorder#fafafa
editorGutter.addedBackground#99bf4d99
editorGutter.deletedBackground#f2798399
editorGutter.modifiedBackground#709ecc99
editorHoverWidget.background#ffffff
editorHoverWidget.border#f0f0f0
editorIndentGuide.activeBackground#d0d3d8b3
editorIndentGuide.background#f0f0f0
editorLineNumber.activeForeground#27292Fcc
editorLineNumber.foreground#27292F66
editorLink.activeForeground#ff9940
editorMarkerNavigation.background#ffffff
editorOverviewRuler.addedForeground#99bf4d99
editorOverviewRuler.border#27292F1a
editorOverviewRuler.deletedForeground#f2798399
editorOverviewRuler.errorForeground#f51818
editorOverviewRuler.modifiedForeground#709ecc99
editorOverviewRuler.warningForeground#ff9940
editorRuler.foreground#27292F4d
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#f0f0f0
editorSuggestWidget.highlightForeground#ff9940
editorSuggestWidget.selectedBackground#27292F1a
editorWarning.foreground#ff9940
editorWhitespace.foreground#27292F66
editorWidget.background#ffffff
extensionButton.prominentBackground#ff9940
extensionButton.prominentForeground#fafafa
extensionButton.prominentHoverBackground#f9943b
focusBorder#bdc2c8
foreground#27292F
gitDecoration.deletedResourceForeground#f27983b3
gitDecoration.ignoredResourceForeground#a0a1a3
gitDecoration.modifiedResourceForeground#0288D1
gitDecoration.submoduleResourceForeground#a37accb3
gitDecoration.untrackedResourceForeground#1DA140
input.background#ffffff
input.border#dcdee1
input.foreground#27292F
input.placeholderForeground#b3b9bf
inputOption.activeBorder#ff9940
inputValidation.errorBackground#fafafa
inputValidation.errorBorder#f51818
inputValidation.infoBackground#fafafa
inputValidation.infoBorder#55b4d4
inputValidation.warningBackground#fafafa
inputValidation.warningBorder#f2ae49
list.activeSelectionBackground#27292F1a
list.activeSelectionForeground#27292F
list.focusBackground#27292F1a
list.focusForeground#27292F
list.highlightForeground#ff9940
list.hoverBackground#27292F1a
list.hoverForeground#27292F
list.inactiveSelectionBackground#27292F1a
list.inactiveSelectionForeground#27292F
list.invalidItemForeground#b3b9bf
panel.background#f5f5f5
panel.border#f5f5f5
panelTitle.activeBorder#ff9940
panelTitle.activeForeground#000000
panelTitle.inactiveForeground#b6bac4
peekView.border#27292F1a
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#ff994033
peekViewResult.background#ffffff
peekViewResult.fileForeground#27292F
peekViewResult.matchHighlightBackground#ff994033
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#27292F
peekViewTitleLabel.foreground#27292F
pickerGroup.border#27292F1a
pickerGroup.foreground#c8ccd0
progressBar.background#ff9940
scrollbar.shadow#27292F1a
scrollbarSlider.activeBackground#27292Fb3
scrollbarSlider.background#27292F66
scrollbarSlider.hoverBackground#27292F99
selection.background#e8eef4fd
settings.headerForeground#27292F
settings.modifiedItemIndicator#709ecc
sideBar.background#f5f5f5
sideBar.border#FAFAFA
sideBarSectionHeader.background#fafafa
sideBarSectionHeader.foreground#27292F
sideBarTitle.foreground#27292F
statusBar.background#fafafa
statusBar.border#f5f5f5
statusBar.debuggingBackground#ed9366
statusBar.debuggingForeground#fafafa
statusBar.foreground#27292F
statusBar.noFolderBackground#ffffff
statusBarItem.activeBackground#00000050
statusBarItem.hoverBackground#00000030
statusBarItem.prominentBackground#27292F1a
statusBarItem.prominentHoverBackground#00000030
tab.activeBackground#fafafa
tab.activeBorder#ff9940
tab.activeForeground#27292F
tab.border#fafafa
tab.hoverBackground#F0F1F2
tab.inactiveBackground#fafafa
tab.inactiveForeground#27292F
tab.unfocusedActiveBorder#27292F
tab.unfocusedActiveForeground#27292F
tab.unfocusedInactiveForeground#27292F
terminal.ansiBlack#000000
terminal.ansiBlue#3199e1
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#399ee6
terminal.ansiBrightCyan#4cbf99
terminal.ansiBrightGreen#86b300
terminal.ansiBrightMagenta#a37acc
terminal.ansiBrightRed#f07171
terminal.ansiBrightWhite#d1d1d1
terminal.ansiBrightYellow#f2ae49
terminal.ansiCyan#46ba94
terminal.ansiGreen#99bf4d
terminal.ansiMagenta#9e75c7
terminal.ansiRed#ea6c6d
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#eca944
terminal.background#f5f5f5
terminal.foreground#27292F
textBlockQuote.background#ffffff
textLink.activeForeground#ff9940
textLink.foreground#ff9940
textPreformat.foreground#27292F
titleBar.activeBackground#fafafa
titleBar.activeForeground#27292F
titleBar.border#f5f5f5
titleBar.inactiveBackground#fafafa
titleBar.inactiveForeground#27292F
tree.indentGuidesStroke#d1d1d4
walkThrough.embeddedEditorBackground#ffffff
widget.shadow#56606940

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment	#999999	—
string	#1794FAF0	—
constant.numeric	#0025F5	—
constant.language	#DE5CFF	—
constant.character, constant.other	#AE81FF	—
variable	—	—
source.sass, meta.selector.sass, entity.other.attribute-name.class.sass	#1794FAF0	—
source.sass, meta.selector.sass, entity.other.attribute-name.id.sass	#1794FAF0	—
source.sass meta.property-list.sass meta.property-name.sass support.type.property-name.sass	#FF6708F0	—
source.sass, meta.selector.sass, entity.name.tag.sass	#FF0000	—
source.sass meta.property-list.sass meta.property-value.sass constant.other.color.rgb-value.sass	#D4D4D4	—
keyword	#FF3333	bold
storage	#EB5086
storage.type	#0088FF	italic bold
entity.name.class	#85C70C	underline
entity.other.inherited-class	#507806	italic underline
entity.name.function	#1DA11D	bold
variable.parameter	#FF960D	italic
entity.name.tag	#F92672
entity.other.attribute-name	#009688	bold
support.function	#FFCD03
support.constant	#57C8ED
support.type, support.class	#124CFA	italic
support.other.variable	#1C1C1C
invalid	#F8F8F0
invalid.deprecated	#F8F8F0	—
entity.other.attribute-name.html	#F77C00	—
keyword.operator.js	#5ECFFF	—
source.js	#050505	—
comment.js	#C2C2C2	—
punctuation.definition.typeparameters.end	#ff0000	bold italic
punctuation.definition.typeparameters.begin	#ff0000	bold italic
variable.parameter, support.function	#FD8B19	bold
variable.other.constant	#1290BF	—
meta.var-single-variable.expr	#1290BF	—
meta.type.parameters	#1290BF	italic bold
meta.type.declaration	#1290BF	—
meta.type.annotation	#17A5DB	italic bold
entity.name.type.ts	#1290BF	italic bold
entity.name.type.alias	#1290BF	—
entity.name.type.interface	#1290BF	—
meta.definition.property.ts	#1290BF	italic

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