Lynx Theme Pro + (Icons)

Name: Lynx Theme Pro + (Icons)
Author: Gohit X

Publisher: Gohit XThemes in package: 8

8 stunning themes + 3 icon packs for VS Code, Cursor, Windsurf & more. Dark, Light, Night, Ghibli, Fury, Kiro, NVIM & Blur. Reduce eye strain and boost your coding productivity.

GitHub

Color themes

VS Code preview

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

Lynx Theme Pro + (Icons) — 4. GHIBLI ㅤ(Lynx Theme)

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#e8d5c4
activityBar.activeBorder#b19b7d
activityBar.activeFocusBorder#b19b7d
activityBar.background#f2e6d3
activityBar.border#f2e6d3
activityBar.foreground#4a3f35
activityBarBadge.background#8b7865
activityBarBadge.foreground#f2e6d3
activityBarTop.foreground#a76913
activityBarTop.inactiveForeground#a0927f
banner.background#f2e6d3
banner.foreground#4a3f35
banner.iconForeground#b19b7d
breadcrumb.activeSelectionForeground#b19b7d
breadcrumb.background#e8d5c4
breadcrumb.focusForeground#4a3f35
breadcrumb.foreground#8a7b6d
breadcrumbPicker.background#e8d5c4
button.background#cbb8a0
button.foreground#6b5d4f
button.hoverBackground#dfccb5
button.secondaryBackground#e8d5c4
button.secondaryForeground#453b30
button.secondaryHoverBackground#cbb5a1
charts.blue#b19b7d
charts.foreground#6b5d4f
charts.green#8b7865
charts.lines#dcc5a9
charts.orange#d4bfa0
charts.purple#c4a894
charts.red#b5836a
charts.yellow#c4a373
chat.avatarBackground#e8d5c4
chat.avatarForeground#4a3f35
chat.requestBorder#d4c4a8
commandCenter.activeBackground#f2e6d3
commandCenter.background#e8d5c4
commandCenter.border#d4c4a8
contrastActiveBorder#00000000
debugIcon.pauseForeground#c4a373
debugIcon.restartForeground#9db1c6
debugIcon.stopForeground#b5836a
debugToolBar.background#e8d5c4
debugToolBar.border#d4c4a8
diffEditor.diagonalFill#faf5ea20
diffEditor.insertedLineBackground#c4b59810
diffEditor.insertedTextBackground#c4b59814
diffEditor.removedLineBackground#d4bfa010
diffEditor.removedTextBackground#d4bfa000
disabledForeground#a0927f
dropdown.background#e8d5c4
dropdown.border#d4c4a8
dropdown.foreground#4a3f35
dropdown.listBackground#f2e6d3
editor.background#f5ead6
editor.findMatchBackground#e8d5c4
editor.findMatchBorder#c4a373
editor.findMatchHighlightBackground#c4a373e3
editor.findMatchHighlightBorder#b5936b
editor.findRangeHighlightBackground#c4a37330
editor.foldBackground#b19b7d10
editor.foreground#4a3f35
editor.lineHighlightBackground#f8edde
editor.lineHighlightBorder#00000012
editor.linkedEditingBackground#b19b7d30
editor.rangeHighlightBackground#9db1c60d
editor.selectionBackground#a0927f50
editor.selectionHighlightBackground#c4a37320
editor.wordHighlightBackground#d4bfa030
editor.wordHighlightStrongBackground#c4b59830
editorBracketHighlight.foreground1#c4a894
editorBracketHighlight.foreground2#d4bfa0
editorBracketHighlight.foreground3#c4a894
editorBracketHighlight.foreground4#c4a894
editorBracketHighlight.foreground5#8b7865
editorBracketHighlight.foreground6#c4a373
editorBracketHighlight.unexpectedBracket.foreground#b5836a
editorBracketMatch.background#dcc5a960
editorBracketMatch.border#8b7865
editorCursor.foreground#8b7865
editorGhostText.foreground#9d8a78
editorGroup.border#dcc5a9
editorGroup.dropBackground#b19b7d20
editorGroup.emptyBackground#f5ead8
editorGroup.focusedEmptyBorder#b19b7d
editorGroupHeader.border#e0d0b5
editorGroupHeader.noTabsBackground#ede0cd
editorGroupHeader.tabsBackground#f3e6d4
editorGroupHeader.tabsBorder#d4c4a8
editorGutter.addedBackground#22c55e
editorGutter.deletedBackground#b5836a
editorGutter.modifiedBackground#9db1c6b7
editorHoverWidget.background#f5ead8
editorHoverWidget.border#dcc5a9
editorHoverWidget.foreground#4a3f35
editorHoverWidget.statusBarBackground#6b5d4f
editorIndentGuide.activeBackground1#b19b7d50
editorIndentGuide.background1#d6cfbf40
editorInlayHint.background#f8efe250
editorInlayHint.foreground#a0927f
editorInlayHint.parameterBackground#8250df15
editorInlayHint.parameterForeground#8250df
editorInlayHint.typeBackground#c4a37330
editorInlayHint.typeForeground#b19b7d
editorLineNumber.activeForeground#b19b7d
editorLineNumber.foreground#d4c4a8
editorOverviewRuler.border#d4c4a850
editorOverviewRuler.findMatchForeground#b19b7dfa
editorOverviewRuler.rangeHighlightForeground#9db1c6fa
editorStickyScroll.background#e8d5c4
editorStickyScroll.border#d4c4a8
editorStickyScroll.shadow#d4c4a830
editorStickyScrollHover.background#dcc5a9
editorSuggestWidget.background#f5ead8
editorSuggestWidget.border#ede0cd
editorSuggestWidget.focusHighlightForeground#8b7865
editorSuggestWidget.foreground#4a3f35
editorSuggestWidget.highlightForeground#b19b7d
editorSuggestWidget.selectedBackground#c4b59863
editorSuggestWidget.selectedForeground#4a3f35
editorWidget.background#e8d5c4
editorWidget.border#f2e6d3
editorWidget.foreground#4a3f35
editorWidget.resizeBorder#b19b7d
extensionIcon.verifiedForeground#b19b7d
focusBorder#e4aa70
foreground#4a3f35
gitDecoration.addedResourceForeground#f0ae34
gitDecoration.conflictingResourceForeground#9db1c690
gitDecoration.deletedResourceForeground#f07177f5
gitDecoration.ignoredResourceForeground#a0927f90
gitDecoration.modifiedResourceForeground#b5836a
gitDecoration.renamedResourceForeground#f0ae34
gitDecoration.stageDeletedResourceForeground#f0ae34
gitDecoration.stageModifiedResourceForeground#f0ae34
gitDecoration.submoduleResourceForeground#f0ae34
gitDecoration.untrackedResourceForeground#a85a4c
icon.foreground#4a3f35
input.background#e8d5c4
input.border#f2e6d3
input.foreground#4a3f35
input.placeholderForeground#a0927f
inputOption.activeBackground#e8d5c450
inputOption.activeForeground#4a3f35
inputValidation.errorBackground#f5ead8
inputValidation.errorBorder#d4bfa0
inputValidation.errorForeground#b5836a
inputValidation.infoBackground#f6f8fa
inputValidation.infoBorder#b5c8d8
inputValidation.infoForeground#9db1c6
inputValidation.warningBackground#f8f0e5
inputValidation.warningBorder#dcc189
inputValidation.warningForeground#c4a373
keybindingLabel.background#f8efe2
keybindingLabel.border#4a3f3500
keybindingLabel.bottomBorder#b19b7d
keybindingLabel.foreground#4a3f35
list.activeSelectionBackground#e8d5c4
list.activeSelectionForeground#000000
list.dropBackground#8a7b6d
list.errorForeground#b5836a
list.focusBackground#dcc5a9
list.focusForeground#4a3f35
list.focusOutline#b19b7d
list.highlightForeground#9db1c6
list.hoverBackground#e8d5c4
list.hoverForeground#4a3f35
list.inactiveSelectionBackground#e8d5c4
list.inactiveSelectionForeground#4a3f35
list.invalidItemForeground#b5836a
list.warningForeground#F59E0B
menu.background#f2e6d3
menu.border#d4c4a8
menu.foreground#443c33
menu.selectionBackground#e8d5c450
menu.selectionBorder#d4c4a8
menu.selectionForeground#6b5d4f
menu.separatorBackground#d4c4a8
menubar.selectionBackground#d4c4a830
menubar.selectionBorder#b19b7d
menubar.selectionForeground#6b5d4f
merge.border#b19b7d
merge.commonContentBackground#c4a37315
merge.commonHeaderBackground#c4a37330
merge.currentContentBackground#8b786515
merge.currentHeaderBackground#8b786530
merge.incomingContentBackground#b19b7d15
merge.incomingHeaderBackground#9db1c630
minimap.background#f2e6d3
minimap.errorHighlight#b5836a
minimap.findMatchHighlight#b19b7d30
minimap.selectionHighlight#b19b7d50
minimap.warningHighlight#c4a373
minimapSlider.activeBackground#8a7b6d50
minimapSlider.background#8a7b6d30
minimapSlider.hoverBackground#8a7b6d40
notificationCenter.border#d4c4a8
notificationCenterHeader.background#f2e6d3
notificationCenterHeader.foreground#4a3f35
notificationLink.foreground#b19b7d
notifications.background#f8efe2
notifications.border#d4c4a8
notifications.foreground#4a3f35
notificationsErrorIcon.foreground#b5836a
notificationsInfoIcon.foreground#b19b7d
notificationsWarningIcon.foreground#c4a373
notificationToast.border#d4c4a8
panel.background#f2e6d3
panel.border#a0927f60
panelSection.border#d4c4a8
panelSection.dropBackground#dcc5a9
panelSectionHeader.background#e8d5c4
panelSectionHeader.foreground#4a3f35
panelTitle.activeBorder#b19b7d
panelTitle.activeForeground#8b7865
panelTitle.inactiveForeground#4a3f35
peekView.border#b19b7d
peekViewEditor.background#f5ead8
peekViewEditor.matchHighlightBackground#b19b7d40
peekViewEditor.matchHighlightBorder#b19b7d
peekViewEditorGutter.background#f5ead8
peekViewResult.background#ede0cd
peekViewResult.fileForeground#6b5d4f
peekViewResult.lineForeground#8a7b6d
peekViewResult.matchHighlightBackground#b19b7d40
peekViewResult.selectionBackground#dcc5a9
peekViewResult.selectionForeground#6b5d4f
peekViewTitle.background#f5ead8
peekViewTitleDescription.foreground#b19b7d
peekViewTitleLabel.foreground#6b5d4f
problemsErrorIcon.foreground#b5836a
problemsInfoIcon.foreground#9db1c6
problemsWarningIcon.foreground#c4a373
progressBar.background#c4b598
quickInput.background#e8d5c4
quickInput.foreground#6b5d4f
quickInputList.focusBackground#b19b7de3
quickInputList.focusForeground#4a3f35
quickInputList.focusIconForeground#4a3f35
sash.hoverBorder#b19b7d
scrollbar.shadow#ffffff18
scrollbarSlider.activeBackground#b5a99f80
scrollbarSlider.background#b5a99f40
scrollbarSlider.hoverBackground#b5a99f60
selection.background#ffffff
settings.checkboxBackground#f5ead8
settings.checkboxBorder#dcc5a9
settings.checkboxForeground#b19b7d
settings.dropdownBackground#f5ead8
settings.dropdownBorder#dcc5a9
settings.dropdownForeground#6b5d4f
settings.dropdownListBorder#b19b7d
settings.headerForeground#6b5d4f
settings.modifiedItemIndicator#b19b7d
settings.numberInputBackground#f5ead8
settings.numberInputBorder#dcc5a9
settings.numberInputForeground#6b5d4f
settings.textInputBackground#f5ead8
settings.textInputBorder#dcc5a9
settings.textInputForeground#6b5d4f
sideBar.background#f2e6d3
sideBar.border#d4c4a850
sideBar.foreground#6b5d4f
sideBarSectionHeader.background#e8d5c4
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#8b7865
sideBarTitle.foreground#4a3f35
statusBar.background#f2e6d3
statusBar.border#00000000
statusBar.debuggingBackground#eccfb6
statusBar.debuggingForeground#4a3f35
statusBar.foreground#8a7b6d
statusBar.noFolderBackground#00000000
statusBar.noFolderForeground#8a7b6d
statusBarItem.activeBackground#c4a37380
statusBarItem.hoverBackground#fdf4e5
statusBarItem.hoverForeground#000000
statusBarItem.prominentBackground#e8d5c4
statusBarItem.remoteBackground#b19b7d
statusBarItem.remoteForeground#101010
statusBarItem.remoteHoverForeground#000000
symbolIcon.arrayForeground#c4a373
symbolIcon.booleanForeground#b5836a
symbolIcon.classForeground#c4a373
symbolIcon.colorForeground#c4a894
symbolIcon.constantForeground#9db1c6
symbolIcon.constructorForeground#c4a894
symbolIcon.enumeratorForeground#c4a373
symbolIcon.enumeratorMemberForeground#8b7865
symbolIcon.eventForeground#b5836a
symbolIcon.fieldForeground#9db1c6
symbolIcon.fileForeground#4a3f35
symbolIcon.folderForeground#c4a373
symbolIcon.functionForeground#c4a894
symbolIcon.interfaceForeground#b19b7d
symbolIcon.keyForeground#c4a894
symbolIcon.keywordForeground#c4a373
symbolIcon.methodForeground#c4a894
symbolIcon.moduleForeground#c4a373
symbolIcon.namespaceForeground#c4a373
symbolIcon.nullForeground#b5836a
symbolIcon.numberForeground#9db1c6
symbolIcon.objectForeground#c4a373
symbolIcon.operatorForeground#6b5d4f
symbolIcon.packageForeground#c4a373
symbolIcon.propertyForeground#9db1c6
symbolIcon.referenceForeground#b5836a
symbolIcon.snippetForeground#8b7865
symbolIcon.stringForeground#a8beb5
symbolIcon.structForeground#c4a894
symbolIcon.textForeground#4a3f35
symbolIcon.typeParameterForeground#6b5d4f
symbolIcon.unitForeground#6b5d4f
symbolIcon.variableForeground#9db1c6
tab.activeBackground#e8d5c4
tab.activeBorder#e8d5c4
tab.activeBorderTop#b19b7d
tab.activeForeground#4a3f35
tab.border#d4c4a8
tab.hoverBackground#ede0cd
tab.hoverBorder#d4c4a8
tab.hoverForeground#4a3f35
tab.inactiveBackground#f2e6d3
tab.inactiveForeground#8a7b6d
tab.unfocusedActiveForeground#6b5d4f
tab.unfocusedInactiveForeground#8a7b6d
terminal.ansiBlack#4a3f35
terminal.ansiBlue#7faacc
terminal.ansiBrightBlack#8a7b6d
terminal.ansiBrightBlue#b5c8d8
terminal.ansiBrightCyan#a8beb5
terminal.ansiBrightGreen#d49d3a
terminal.ansiBrightMagenta#d4bfa0
terminal.ansiBrightRed#d4bfa0
terminal.ansiBrightWhite#faf5ea
terminal.ansiBrightYellow#dcc189
terminal.ansiCyan#d47f3a
terminal.ansiGreen#b19b7d
terminal.ansiMagenta#c4a894
terminal.ansiRed#b5836a
terminal.ansiWhite#f2e6d3
terminal.ansiYellow#c4a373
terminal.background#f8f0e5
terminal.foreground#6b5d4f
terminal.selectionBackground#9db1c6
terminalCursor.background#4a3f35
terminalCursor.foreground#b19b7d
testing.iconErrored#c4a373
testing.iconFailed#b5836a
testing.iconPassed#8b7865
testing.iconQueued#c4a373
testing.iconSkipped#a0927f
testing.iconUnset#8a7b6d
testing.message.error.lineBackground#b5836a20
testing.peekBorder#b19b7d
testing.peekHeaderBackground#e8d5c4
textBlockQuote.background#f8f0e5
textBlockQuote.border#d4c4a8
textCodeBlock.background#fff4eb
textLink.activeForeground#8b7865
textLink.foreground#b19b7d
textPreformat.foreground#c4a373
titleBar.activeBackground#f2e6d3
titleBar.activeForeground#6b5d4f
titleBar.border#00000000
titleBar.inactiveBackground#f2e6d3
titleBar.inactiveForeground#8a7b6d
toolbar.hoverBackground#f8efe2
tree.indentGuidesStroke#c4b598
widget.border#dcc5a9
widget.shadow#8a7b6d50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment.line, punctuation.definition.comment	#9a8b7a	italic
comment.block	#9a8b7a	italic
comment.block.documentation, comment.line.documentation	#8a7b6a	italic bold
string.quoted.astro	#23ab98	—
source.astro	#4a3f35	—
keyword.control	#cf222e	bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#cf222e	bold
keyword.control.new, keyword.operator.new	#cf222e	bold
keyword.control.import, keyword.control.export, keyword.control.from	#0969da	—
keyword.control.async, keyword.control.await	#8250df	bold italic
keyword.other	#cf222e	—
storage.type	#cf222e	bold
storage.type.annotation	#6f42c1	—
storage.type.generic	#953800	—
storage.type.function.arrow	#24292e	—
storage.modifier	#cf222e	italic
storage.modifier.import	#0969da	—
keyword.operator	#24292e	—
keyword.operator.assignment	#24292e	bold
keyword.operator.expression	#8c43ee	—
keyword.operator.logical	#8250df	bold
keyword.operator.comparison	#8250df	—
keyword.operator.rest, keyword.operator.spread	#116329	—
keyword.operator.type.annotation	#24292e	—
keyword.operator.ternary	#8c43ee	—
punctuation.accessor, punctuation.bracket, punctuation.definition, punctuation.definition.block, punctuation.definition.parameters, punctuation.definition.string, punctuation.section, punctuation.separator, punctuation.separator.dot-access, punctuation.terminator.statement	#8c43ee	—
punctuation.definition.annotation	#6f42c1	—
variable.other, variable.object.property	#953800	—
meta.block variable.other	#5b636d	—
variable.other.constant	#0550ae	bold
variable.other.readonly	#0969da	—
variable.other.macro.argument	#8250df	—
variable.parameter, variable.parameter.probably	#0550ae	italic
variable.language	#cf222e	bold italic
meta.object.property, meta.object-binding-pattern-variable	#0969da	—
entity.name.function	#f99b54	bold
entity.name.method	#8250df	bold
entity.name.function.constructor	#953800	bold
meta.function-call	#8250df	—
meta.definition.function	#8250df	—
meta.definition.method	#8250df	—
meta.definition.property	#0969da	—
string.quoted.single, string.quoted.double	#23ab98	—
string.template	#23ab98	—
meta.template.expression	#8c43ee	—
string.regexp	#0969da	—
string.other.link	#0969da	—
constant.numeric	#0550ae	bold
constant.language	#0550ae	bold
constant.other.variable	#23ab98	—
constant.character.escape	#0969da	—
entity.name.tag	#116329	bold
entity.name.type	#953800	bold
entity.name.type.class	#953800	bold
entity.name.type.interface	#0969da	bold
entity.name.type.enum	#953800	bold
entity.name.type.module	#0969da	—
entity.other	#953800	—
entity.other.attribute-name	#c142a6	—
entity.scope.name	#0969da	—
support.type.primitive	#cf222e	bold
support.type.property-name	#0969da	—
support.type.builtin	#cf222e	bold
support.function	#8250df	—
support.class	#953800	—
meta.brace	#24292e	—
meta.definition.variable	#0969da	—
meta.import	#24292e	—
meta.import string.quoted, meta.import.from string.quoted, meta.import.js string.quoted, meta.import.ts string.quoted, meta.import.astro string.quoted, meta.import string.quoted.single, meta.import string.quoted.double, meta.import string.quoted.single.astro, meta.import string.quoted.double.astro, meta.import string.quoted.single.js, meta.import string.quoted.double.js, meta.import string.quoted.single.ts, meta.import string.quoted.double.ts	#cf222e	—
meta.object-literal.key	#0969da	—
entity.name.tag.css, entity.other.attribute-name.class.css	#116329	—
support.type.property-name.css	#24292e	—
support.constant.property-value.css	#23ab98	—
entity.other.attribute-name.id.css	#d4a927	—
entity.other.attribute-name.pseudo-class.css	#8250df	—
support.type.property-name.json	#0550ae	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8250df	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0969da	—
string.quoted.double.json	#23ab98	—
entity.name.tag.yaml	#953800	—
invalid	#da3633	bold underline
invalid.deprecated	#da3633	—
text.html.markdown fenced_code.block.language	#b39b7f	—
text.html.markdown markup.bold	#24292e	bold
text.html.markdown markup.italic	#24292e	italic
text.html.markdown markup.strikethrough	#da3633	strikethrough
text.html.markdown markup.inline.raw.string	#0969da	—
text.html.markdown markup.underline.link	#0969da	—
text.html.markdown meta.paragraph	#24292e	—
text.html.markdown punctuation.definition.heading	#cf2256	bold
text.html.markdown entity.name.section	#d81998	bold
text.html.markdown string.other.link.title	#0969da	—
text.html.markdown meta.separator	#656d76	—
support.class.component.jsx, support.class.component.tsx	#953800	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#c142a6	—
punctuation.definition.tag.jsx, punctuation.definition.tag.tsx	#24292e	—
entity.name.type.ts, entity.name.type.tsx	#953800	bold
entity.name.type.interface.ts, entity.name.type.interface.tsx	#0969da	bold
entity.name.type.alias.ts, entity.name.type.alias.tsx	#0969da	bold
punctuation.decorator	#6f42c1	bold
entity.name.function.decorator	#6f42c1	bold
support.function.magic.python	#8250df	bold italic
support.function.builtin.python	#8250df	—
storage.type.function.lambda	#8250df	—
entity.name.type.parameter	#8250df	—
keyword.control.default	#116329	bold

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