Jeng Theme Light

Name: Jeng Theme Light
Author: jeng

Publisher: jengThemes in package: 1

The perfect peaceful combination of colors for light theme on Visual Studio Code.

GitHub

VS Code preview

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

Jeng Theme Light — Jeng Light

fetchUser.ts

index.ts

README.md

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#ededf5
activityBar.foreground#705697
activityBarBadge.background#705697
activityBarBadge.foreground#ffffff
badge.background#959ca6
badge.foreground#ffffff
button.background#9769dcaa
button.foreground#ffffff
button.hoverBackground#9769dcbb
debugExceptionWidget.background#ffffff
debugExceptionWidget.border#e2e4e7
debugToolBar.background#ffffff
diffEditor.insertedTextBackground#4dbf9944
diffEditor.removedTextBackground#f0717844
dropdown.background#ffffff
editor.background#fafafa
editor.findMatchBackground#9769dc33
editor.findMatchHighlightBackground#9769dc33
editor.findRangeHighlightBackground#9769dc33
editor.foreground#5c6066
editor.lineHighlightBackground#f2f2f2
editor.rangeHighlightBackground#f2f2f2
editor.selectionBackground#f0eee4
editor.wordHighlightBackground#9769dc33
editor.wordHighlightStrongBackground#9769dc33
editorBracketMatch.border#d9d8d7
editorCursor.foreground#9769dc
editorError.foreground#ff3333
editorGroup.background#ffffff
editorGroup.border#e2e4e7
editorGroupHeader.noTabsBackground#fafafa
editorGroupHeader.tabsBackground#fafafa
editorGroupHeader.tabsBorder#e2e4e7
editorGutter.addedBackground#86b300
editorGutter.deletedBackground#ff3333
editorGutter.modifiedBackground#41a6d9
editorHoverWidget.background#ffffff
editorHoverWidget.border#e2e4e7
editorIndentGuide.background#d9d8d7
editorLineNumber.foreground#d9d8d7
editorLink.activeForeground#9769dc
editorMarkerNavigation.background#ffffff
editorOverviewRuler.border#e2e4e7
editorRuler.foreground#e2e4e7
editorSuggestWidget.background#ffffff
editorSuggestWidget.border#e2e4e7
editorSuggestWidget.highlightForeground#9769dc
editorSuggestWidget.selectedBackground#f5f5f5
editorWarning.foreground#9769dc
editorWhitespace.foreground#d9d8d7
editorWidget.background#ffffff
extensionButton.prominentBackground#9769dcaa
extensionButton.prominentForeground#ffffff
extensionButton.prominentHoverBackground#9769dcbb
focusBorder#85888c8a
foreground#85888c
input.background#ffffff
input.border#85888c4c
input.foreground#5c6066
input.placeholderForeground#85888c8a
inputOption.activeBorder#85888c8a
inputValidation.errorBackground#ffeaea
inputValidation.errorBorder#f1897f
inputValidation.infoBackground#f2fcff
inputValidation.infoBorder#4ec1e5
inputValidation.warningBackground#fffee2
inputValidation.warningBorder#ffe055
list.activeSelectionBackground#e2e4e7
list.activeSelectionForeground#5c6066
list.focusBackground#f5f5f5
list.focusForeground#5c6066
list.highlightForeground#9769dc
list.hoverBackground#f5f5f5
list.hoverForeground#5c6066
list.inactiveSelectionBackground#fafafa
list.inactiveSelectionForeground#5c6066
notification.background#5c6066
panel.background#fafafa
panel.border#e2e4e7
panelTitle.activeBorder#9769dc
panelTitle.activeForeground#5c6066
panelTitle.inactiveForeground#85888c
peekView.border#e2e4e7
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#9769dc33
peekViewResult.background#ffffff
peekViewResult.fileForeground#85888c
peekViewResult.matchHighlightBackground#9769dc33
peekViewTitle.background#ffffff
peekViewTitleDescription.foreground#85888c
peekViewTitleLabel.foreground#85888c
pickerGroup.border#e2e4e7
pickerGroup.foreground#9769dc
progressBar.background#9769dc
scrollbar.shadow#7e848c11
scrollbarSlider.activeBackground#00000022
scrollbarSlider.background#00000011
scrollbarSlider.hoverBackground#00000022
selection.background#f0eee4fd
sideBar.background#fafafa
sideBar.border#e2e4e7
sideBarSectionHeader.background#9769dc10
sideBarSectionHeader.foreground#85888c
sideBarTitle.foreground#85888c
statusBar.background#ffffff
statusBar.border#e2e4e7
statusBar.debuggingBackground#ffffff
statusBar.debuggingForeground#85888c
statusBar.foreground#85888c
statusBar.noFolderBackground#ffffff
statusBarItem.activeBackground#e2e4e7
statusBarItem.hoverBackground#f5f5f5
statusBarItem.prominentBackground#e2e4e7
statusBarItem.prominentHoverBackground#f5f5f5
tab.activeBackground#ffffff
tab.activeForeground#5c6066
tab.border#e2e4e7
tab.inactiveBackground#fafafa
tab.inactiveForeground#85888c
tab.unfocusedActiveForeground#5c6066aa
tab.unfocusedInactiveForeground#85888c
terminal.ansiBlack#000000
terminal.ansiBlue#41a6d9
terminal.ansiBrightBlack#686868
terminal.ansiBrightBlue#6871ff
terminal.ansiBrightCyan#57d9ad
terminal.ansiBrightGreen#a3d900
terminal.ansiBrightMagenta#a37acc
terminal.ansiBrightRed#d6656a
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#e7c547
terminal.ansiCyan#4dbf99
terminal.ansiGreen#77cc00
terminal.ansiMagenta#9966cc
terminal.ansiRed#f2590c
terminal.ansiWhite#c7c7c7
terminal.ansiYellow#f29718
terminal.background#fafafa
terminal.foreground#5c6066
textBlockQuote.background#ffffff
textLink.activeForeground#9769dc
textLink.foreground#9769dc
textPreformat.foreground#5c6066
titleBar.activeBackground#fafafa
titleBar.activeForeground#85888c
titleBar.border#e2e4e7
titleBar.inactiveBackground#fafafa
titleBar.inactiveForeground#85888c
walkThrough.embeddedEditorBackground#ffffff
widget.shadow#7e848cb3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#5c6066ff	—
emphasis, storage, comment, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tag.jade, entity.other.attribute-name.tag.pug, markup.italic, keyword.control, variable.language	—	italic
strong, markup.bold, markup.heading	—	bold
markup.underline	—	underline
comment	#8E908C	—
keyword.operator.class, constant.other, source.php.embedded.line	#666969
support.variable, variable.parameter	#C82829	—
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, meta.tag, declaration.tag	#C82829	—
constant.numeric, constant.language, support.constant, constant.character, punctuation.section.embedded, keyword.other.unit	#F5871F
entity.name.class, entity.name.type.class, support.type, support.class	#C99E00
string, constant.other.symbol, entity.other.inherited-class, markup.heading	#718C00
keyword.operator, constant.other.color	#3E999F	—
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level	#4B83CD
keyword, storage, storage.type, entity.other.attribute-name	#7A3E9D	—
meta.separator	#373B41	—
entity.name.type, entity.other.inherited-class, support.class	#7A3E9D	bold
invalid	#FF3333	—
invalid.deprecated	#FFFFFF	—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag	#41A6D990	—
entity.other.attribute-name	#F2590C	—
markup.inserted	#86B300	—
markup.deleted	#41A6D9	—
markup.changed	#F2590C	—
string.regexp, constant.character.escape	#4DBF99	—
url, link, uri	—	underline
constant.numeric.line-number.find-in-files - match	#ABB0B6	—
entity.name.filename.find-in-files	#86B300	—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#CCA37A	italic
source.js constant.other.object.key.js string.unquoted.label.js	#41A6D9	italic
entity.name.method.js	#CCA37A	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#CCA37A	—
markup.italic	#F07178	italic
markup.bold	#F07178	bold
markup.underline	#A37ACC	underline
markup.strike	#CCA37A
markup.quote	#E7C547	italic
markup.raw.block	#F2590C	—
markup.table	#41A6D9	—
text.html.markdown, punctuation.definition.list_item.markdown	#5C6773	—
text.html.markdown markup.raw.inline	#41A6D9	—
text.html.markdown meta.dummy.line-break	#ABB0B6	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#86B300	—
markup.quote, punctuation.definition.blockquote.markdown	#E7C547	italic
string.other.link.title.markdown	#CCA37A	underline
markup.raw.block.fenced.markdown	#5C6773	—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown	#ABB0B6	—
variable.language.fenced.markdown	#ABB0B6
meta.separator	#ABB0B6	bold
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string	#41A6D9	—
acejump.label.blue	#FFFFFF	—
acejump.label.green	#FFFFFF	—
acejump.label.orange	#FFFFFF	—
acejump.label.purple	#FFFFFF	—
sublimelinter.mark.warning	#41A6D9	—
sublimelinter.gutter-mark	#FFFFFF	—
sublimelinter.mark.error	#FF3333	—
markup.ignored.git_gutter	#ABB0B6	—
markup.untracked.git_gutter	#ABB0B6	—
token.info-token	#316bcd	—
token.warn-token	#cd9731	—
token.error-token	#cd3131	—
token.debug-token	#800080	—

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