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) — 2. LIGHT ㅤ (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#47967140
activityBar.activeBorder#347534
activityBar.activeFocusBorder#347534
activityBar.background#eaeaea
activityBar.border#eaeaea
activityBar.foreground#2d2d2d
activityBarBadge.background#479671
activityBarBadge.foreground#ffffff
activityBarTop.foreground#479671
activityBarTop.inactiveForeground#9aaa9a
banner.background#f5faf5
banner.foreground#2d2d2d
banner.iconForeground#479671
breadcrumb.activeSelectionForeground#347534
breadcrumb.background#ffffff
breadcrumb.focusForeground#347534
breadcrumb.foreground#656a65
breadcrumbPicker.background#f5faf5
button.background#408164
button.foreground#2d3d2d
button.hoverBackground#479671
button.secondaryBackground#e5e5e5
button.secondaryForeground#31875f
button.secondaryHoverBackground#d9d9d9
charts.blue#479671
charts.foreground#2d3d2d
charts.green#22c55e
charts.lines#c5d5c5
charts.orange#ff6941
charts.purple#9475ff
charts.red#d52f2f
charts.yellow#cc9915
chat.avatarBackground#e5e5e5
chat.avatarForeground#2d2d2d
chat.requestBorder#b0c0b5
commandCenter.activeBackground#ffffff
commandCenter.background#f5f5f5
commandCenter.border#c0d0c0
contrastActiveBorder#00000000
debugIcon.pauseForeground#c5952e
debugIcon.restartForeground#2d99ff
debugIcon.stopForeground#d64545
debugToolBar.background#ffffff
debugToolBar.border#cccccc
diffEditor.diagonalFill#00000025
diffEditor.insertedLineBackground#55d55515
diffEditor.insertedTextBackground#55d55525
diffEditor.removedLineBackground#d5555515
diffEditor.removedTextBackground#d5555520
disabledForeground#656a65
dropdown.background#ffffff
dropdown.border#cccccc
dropdown.foreground#000000
dropdown.listBackground#f4f4f4
editor.background#f4f4f4
editor.findMatchBackground#669933cc
editor.findMatchBorder#4d7a26
editor.findMatchHighlightBackground#85b35fe0
editor.findMatchHighlightBorder#629742
editor.findRangeHighlightBackground#4d7a2640
editor.foldBackground#47967110
editor.foreground#2d2d2d
editor.lineHighlightBackground#ffffff70
editor.lineHighlightBorder#00000012
editor.linkedEditingBackground#47967130
editor.rangeHighlightBackground#2d99ff15
editor.selectionBackground#47967160
editor.selectionHighlightBackground#c5952e25
editor.wordHighlightBackground#c5952e30
editor.wordHighlightStrongBackground#4573ff30
editorBracketHighlight.foreground1#c5952e
editorBracketHighlight.foreground2#9475ff
editorBracketHighlight.foreground3#4573ff
editorBracketHighlight.foreground4#ff6941
editorBracketHighlight.foreground5#ff8391
editorBracketHighlight.foreground6#4dc8ff
editorBracketHighlight.unexpectedBracket.foreground#a4685a
editorBracketMatch.background#b5c5d050
editorBracketMatch.border#5573a5
editorCursor.foreground#656565
editorGhostText.foreground#717171
editorGroup.border#c5d5c5
editorGroup.dropBackground#47967120
editorGroup.emptyBackground#f5f5f5
editorGroup.focusedEmptyBorder#479671
editorGroupHeader.border#e0f0e0
editorGroupHeader.noTabsBackground#eaeaea
editorGroupHeader.tabsBackground#eaeaea
editorGroupHeader.tabsBorder#d0e0d4
editorGutter.addedBackground#22c55e
editorGutter.deletedBackground#d64545
editorGutter.modifiedBackground#07daffb7
editorHoverWidget.background#f5faf5
editorHoverWidget.border#c5d5c5
editorHoverWidget.foreground#2d2d2d
editorHoverWidget.statusBarBackground#e5f0e5
editorIndentGuide.activeBackground1#0D948850
editorIndentGuide.background1#cecece40
editorInlayHint.background#e8f0ec50
editorInlayHint.foreground#5a7a5a
editorInlayHint.parameterBackground#ebe8f40a
editorInlayHint.parameterForeground#6040a0
editorInlayHint.typeBackground#d0ece050
editorInlayHint.typeForeground#1a6e4a
editorLineNumber.activeForeground#0D9488
editorLineNumber.foreground#b3bcbb
editorOverviewRuler.border#c0d0c380
editorOverviewRuler.findMatchForeground#55c55580
editorOverviewRuler.rangeHighlightForeground#65d56580
editorStickyScroll.background#f5faf5
editorStickyScroll.border#c5d5c5
editorStickyScroll.shadow#00000090
editorStickyScrollHover.background#e5e5e5
editorSuggestWidget.background#f0f5f0
editorSuggestWidget.border#c5d5c5
editorSuggestWidget.focusHighlightForeground#347534
editorSuggestWidget.foreground#2d3d2d
editorSuggestWidget.highlightForeground#347534
editorSuggestWidget.selectedBackground#47967150
editorSuggestWidget.selectedForeground#2d2d2d
editorWidget.background#f5faf5
editorWidget.border#c0d0c3
editorWidget.foreground#2d2d2d
editorWidget.resizeBorder#479671
extensionIcon.verifiedForeground#479671
focusBorder#479671
foreground#2d2d2d
gitDecoration.addedResourceForeground#f0ae34
gitDecoration.conflictingResourceForeground#00a1fe90
gitDecoration.deletedResourceForeground#f07177f5
gitDecoration.ignoredResourceForeground#61616190
gitDecoration.modifiedResourceForeground#469b8b
gitDecoration.renamedResourceForeground#f0ae34
gitDecoration.stageDeletedResourceForeground#f0ae34
gitDecoration.stageModifiedResourceForeground#f0ae34
gitDecoration.submoduleResourceForeground#f0ae34
gitDecoration.untrackedResourceForeground#287ce8
icon.foreground#2d2d2d
input.background#f5f5f5
input.border#c5d5c5
input.foreground#2d2d2d
input.placeholderForeground#8a9a8a
inputOption.activeBackground#47967160
inputOption.activeForeground#2d2d2d
inputValidation.errorBackground#d6454525
inputValidation.errorBorder#d64545
inputValidation.errorForeground#d64545
inputValidation.infoBackground#2d99ff25
inputValidation.infoBorder#2d99ff
inputValidation.infoForeground#2d99ff
inputValidation.warningBackground#c5952e25
inputValidation.warningBorder#c5952e
inputValidation.warningForeground#c5952e
keybindingLabel.background#eaeaea
keybindingLabel.border#cccccc00
keybindingLabel.bottomBorder#5fc05c
keybindingLabel.foreground#000000
list.activeSelectionBackground#47967140
list.activeSelectionForeground#000000
list.dropBackground#ffffff
list.errorForeground#d64545
list.focusBackground#d0e0d5
list.focusForeground#2d3d2d
list.focusOutline#479671
list.highlightForeground#5fc05c
list.hoverBackground#e5f0e5ad
list.hoverForeground#2d2d2d
list.inactiveSelectionBackground#e5e5e5
list.inactiveSelectionForeground#2d2d2d
list.invalidItemForeground#d64545
list.warningForeground#F59E0B
menu.background#f0f5f0
menu.border#c0d0c0
menu.foreground#2d3d2d
menu.selectionBackground#47967155
menu.selectionBorder#479671
menu.selectionForeground#347534
menu.separatorBackground#b0c0b0
menubar.selectionBackground#47967135
menubar.selectionBorder#479671
menubar.selectionForeground#347534
merge.border#479671
merge.commonContentBackground#c5952e20
merge.commonHeaderBackground#c5952e40
merge.currentContentBackground#47967120
merge.currentHeaderBackground#47967140
merge.incomingContentBackground#4573ff20
merge.incomingHeaderBackground#4573ff40
minimap.background#eaeaea
minimap.errorHighlight#d64545
minimap.findMatchHighlight#4b8360cc
minimap.selectionHighlight#55c55560
minimap.warningHighlight#c5952e
minimapSlider.activeBackground#47967160
minimapSlider.background#47967140
minimapSlider.hoverBackground#47967150
notificationCenter.border#c0d0c3
notificationCenterHeader.background#d0e0d4
notificationCenterHeader.foreground#2eb82e
notificationLink.foreground#479671
notifications.background#e5e5e5
notifications.border#c0d0c3
notifications.foreground#2d2d2d
notificationsErrorIcon.foreground#d64545
notificationsInfoIcon.foreground#479671
notificationsWarningIcon.foreground#c5952e
notificationToast.border#c0d0c3
panel.background#eaeaea
panel.border#a5a5a570
panelSection.border#c0d0c3
panelSection.dropBackground#47967140
panelSectionHeader.background#d0e0d4
panelSectionHeader.foreground#3a9a3a
panelTitle.activeBorder#347534
panelTitle.activeForeground#2d2d2d
panelTitle.inactiveForeground#656a65
peekView.border#479671
peekViewEditor.background#f5faf5
peekViewEditor.matchHighlightBackground#47967140
peekViewEditor.matchHighlightBorder#479671
peekViewEditorGutter.background#f5faf5
peekViewResult.background#eaeaea
peekViewResult.fileForeground#2d2d2d
peekViewResult.lineForeground#656a65
peekViewResult.matchHighlightBackground#47967140
peekViewResult.selectionBackground#c5d5c5
peekViewResult.selectionForeground#2d2d2d
peekViewTitle.background#f5f5f5
peekViewTitleDescription.foreground#479671
peekViewTitleLabel.foreground#2d2d2d
problemsErrorIcon.foreground#d64545
problemsInfoIcon.foreground#2d99ff
problemsWarningIcon.foreground#c5952e
progressBar.background#3a9a3a
quickInput.background#f5faf5
quickInput.foreground#1a1a1a
quickInputList.focusBackground#5fc05c60
quickInputList.focusForeground#1a1a1a
quickInputList.focusIconForeground#2d2d2d
sash.hoverBorder#479671
scrollbar.shadow#ffffff18
scrollbarSlider.activeBackground#7ab89780
scrollbarSlider.background#7ab89740
scrollbarSlider.hoverBackground#7ab89760
selection.background#d0e5df
settings.checkboxBackground#f5faf5
settings.checkboxBorder#c5d5c5
settings.checkboxForeground#479671
settings.dropdownBackground#f5faf5
settings.dropdownBorder#c5d5c5
settings.dropdownForeground#2d2d2d
settings.dropdownListBorder#479671
settings.headerForeground#2d2d2d
settings.modifiedItemIndicator#479671
settings.numberInputBackground#f5faf5
settings.numberInputBorder#c5d5c5
settings.numberInputForeground#2d2d2d
settings.textInputBackground#f5faf5
settings.textInputBorder#c5d5c5
settings.textInputForeground#2d2d2d
sideBar.background#eaeaea
sideBar.border#c0d0c380
sideBar.foreground#4d5a5d
sideBarSectionHeader.background#f5f5f5
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#479671
sideBarTitle.foreground#2d2d2d
statusBar.background#eaeaea
statusBar.border#00000000
statusBar.debuggingBackground#ffffff
statusBar.debuggingForeground#000000
statusBar.foreground#616161
statusBar.noFolderBackground#00000000
statusBar.noFolderForeground#61616f
statusBarItem.activeBackground#f0717880
statusBarItem.hoverBackground#eaeaea
statusBarItem.hoverForeground#000000
statusBarItem.prominentBackground#ffffff
statusBarItem.remoteBackground#4fc68e
statusBarItem.remoteForeground#232323
statusBarItem.remoteHoverForeground#000000
symbolIcon.arrayForeground#c5952e
symbolIcon.booleanForeground#ff6941
symbolIcon.classForeground#479671
symbolIcon.colorForeground#9475ff
symbolIcon.constantForeground#3a9a3a
symbolIcon.constructorForeground#2d99ff
symbolIcon.enumeratorForeground#c5952e
symbolIcon.enumeratorMemberForeground#3a9a3a
symbolIcon.eventForeground#d64545
symbolIcon.fieldForeground#4573ff
symbolIcon.fileForeground#2d2d2d
symbolIcon.folderForeground#c5952e
symbolIcon.functionForeground#2d99ff
symbolIcon.interfaceForeground#4dc8ff
symbolIcon.keyForeground#9475ff
symbolIcon.keywordForeground#479671
symbolIcon.methodForeground#2d99ff
symbolIcon.moduleForeground#c5952e
symbolIcon.namespaceForeground#c5952e
symbolIcon.nullForeground#d64545
symbolIcon.numberForeground#3a9a3a
symbolIcon.objectForeground#c5952e
symbolIcon.operatorForeground#4dc8ff
symbolIcon.packageForeground#c5952e
symbolIcon.propertyForeground#4573ff
symbolIcon.referenceForeground#ff6941
symbolIcon.snippetForeground#3a9a3a
symbolIcon.stringForeground#3a9a3a
symbolIcon.structForeground#2d99ff
symbolIcon.textForeground#2d2d2d
symbolIcon.typeParameterForeground#4dc8ff
symbolIcon.unitForeground#4dc8ff
symbolIcon.variableForeground#4573ff
tab.activeBackground#ffffff
tab.activeBorder#f5faf5
tab.activeBorderTop#479671
tab.activeForeground#2d2d2d
tab.border#d0e0d4
tab.hoverBackground#eff5f0
tab.hoverBorder#d0e0d4
tab.hoverForeground#2d3d2d
tab.inactiveBackground#eaeaea
tab.inactiveForeground#8a9a8a
tab.unfocusedActiveForeground#6a7a6a
tab.unfocusedInactiveForeground#a5b5a5
terminal.ansiBlack#2d2d2d
terminal.ansiBlue#4a90d9
terminal.ansiBrightBlack#5a5a5a
terminal.ansiBrightBlue#4dc9ff
terminal.ansiBrightCyan#2db5c7
terminal.ansiBrightGreen#2eb82e
terminal.ansiBrightMagenta#a475ff
terminal.ansiBrightRed#d55555
terminal.ansiBrightWhite#2d2d2d
terminal.ansiBrightYellow#c5952e
terminal.ansiCyan#2d99ff
terminal.ansiGreen#479671
terminal.ansiMagenta#9475ff
terminal.ansiRed#d64545
terminal.ansiWhite#2d2d2d
terminal.ansiYellow#c5952e
terminal.background#f5f5f5
terminal.foreground#2d3d2d
terminal.selectionBackground#2d66ff80
terminalCursor.background#eaeaea
terminalCursor.foreground#479671
testing.iconErrored#c5952e
testing.iconFailed#d64545
testing.iconPassed#479671
testing.iconQueued#c5952e
testing.iconSkipped#656a65
testing.iconUnset#8a9a8a
testing.message.error.lineBackground#d6454530
testing.peekBorder#479671
testing.peekHeaderBackground#f5faf5
textBlockQuote.background#e5e5e5
textBlockQuote.border#c0d0c3
textCodeBlock.background#f5faf5
textLink.activeForeground#06da62
textLink.foreground#038c43
textPreformat.foreground#f05800
titleBar.activeBackground#eaeaea
titleBar.activeForeground#2d2d2d
titleBar.border#00000000
titleBar.inactiveBackground#f5f5f5
titleBar.inactiveForeground#8a9a8a
toolbar.hoverBackground#f5faf5
tree.indentGuidesStroke#47967150
widget.border#c0d0c3
widget.shadow#a0a0a060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment.line, punctuation.definition.comment	#8c929a	italic
comment.block	#8c929a	italic
comment.block.documentation, comment.line.documentation	#7c828a	italic bold
string.quoted.astro	#1d6910	—
source.astro	#2d2d2d	—
keyword.control	#7C3AED	bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#c234ca	bold
keyword.control.new, keyword.operator.new	#c234ca	bold
keyword.control.import, keyword.control.export, keyword.control.from	#D97706	—
keyword.control.async, keyword.control.await	#0891B2	bold italic
keyword.other	#7C3AED	—
storage.type	#7C3AED	bold
storage.type.annotation	#0891B2	—
storage.type.generic	#059669	—
storage.type.function.arrow	#1F2937	—
storage.modifier	#7C3AED	italic
storage.modifier.import	#2563EB	—
keyword.operator	#374151	—
keyword.operator.assignment	#374151	bold
keyword.operator.expression	#D97706	—
keyword.operator.logical	#7C3AED	bold
keyword.operator.comparison	#7C3AED	—
keyword.operator.rest, keyword.operator.spread	#16A249	—
keyword.operator.type.annotation	#1F2937	—
keyword.operator.ternary	#D97706	—
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	#c234ca	—
punctuation.definition.annotation	#0891B2	—
variable.other, variable.object.property	#d8b056	—
meta.block variable.other	#788494	—
variable.other.constant	#0891B2	bold
variable.other.readonly	#2563EB	—
variable.other.macro.argument	#7C3AED	—
variable.parameter, variable.parameter.probably	#04644f	italic
variable.language	#C026D3	bold italic
meta.object.property, meta.object-binding-pattern-variable	#2563EB	—
entity.name.function	#0cd47a	bold
entity.name.method	#2563EB	bold
entity.name.function.constructor	#D97706	bold
meta.function-call	#2563EB	—
meta.definition.function	#2563EB	—
meta.definition.method	#2563EB	—
meta.definition.property	#0F79AF	—
string.quoted.single, string.quoted.double	#1d6910	—
string.template	#1d6910	—
meta.template.expression	#D97706	—
string.regexp	#0891B2	—
string.other.link	#0891B2	—
constant.numeric	#04644f	bold
constant.language	#16A249	bold
constant.other.variable	#1d6910	—
constant.character.escape	#0891B2	—
entity.name.tag	#DC2626	bold
entity.name.type	#D97706	bold
entity.name.type.class	#D97706	bold
entity.name.type.interface	#0891B2	bold
entity.name.type.enum	#D97706	bold
entity.name.type.module	#2563EB	—
entity.other	#D97706	—
entity.other.attribute-name	#7C3AED	—
entity.scope.name	#0891B2	—
support.type.primitive	#7C3AED	bold
support.type.property-name	#2563EB	—
support.type.builtin	#7C3AED	bold
support.function	#0F79AF	—
support.class	#D97706	—
meta.brace	#1F2937	—
meta.definition.variable	#0F79AF	—
meta.import	#1F2937	—
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	#c234ca	—
meta.object-literal.key	#2563EB	—
entity.name.tag.css, entity.other.attribute-name.class.css	#0F79AF	—
support.type.property-name.css	#1F2937	—
support.constant.property-value.css	#1d6910	—
entity.other.attribute-name.id.css	#EA580C	—
entity.other.attribute-name.pseudo-class.css	#7C3AED	—
support.type.property-name.json	#EA580C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C026D3	—
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	#0891B2	—
string.quoted.double.json	#1d6910	—
entity.name.tag.yaml	#D97706	—
invalid	#EF4444	bold underline
invalid.deprecated	#DC2626	—
text.html.markdown fenced_code.block.language	#7C3AED	—
text.html.markdown markup.bold	#DB2777	bold
text.html.markdown markup.italic	#DB2777	italic
text.html.markdown markup.strikethrough	#DB2777	strikethrough
text.html.markdown markup.inline.raw.string	#7C3AED	—
text.html.markdown markup.underline.link	#2563EB	—
text.html.markdown meta.paragraph	#1F2937	—
text.html.markdown punctuation.definition.heading	#0891B2	bold
text.html.markdown entity.name.section	#059669	bold
text.html.markdown string.other.link.title	#1d6910	—
text.html.markdown meta.separator	#aaaaaa	—
support.class.component.jsx, support.class.component.tsx	#d8b056	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#7C3AED	—
punctuation.definition.tag.jsx, punctuation.definition.tag.tsx	#1F2937	—
entity.name.type.ts, entity.name.type.tsx	#D97706	bold
entity.name.type.interface.ts, entity.name.type.interface.tsx	#0891B2	bold
entity.name.type.alias.ts, entity.name.type.alias.tsx	#2563EB	bold
punctuation.decorator	#0891B2	bold
entity.name.function.decorator	#0891B2	bold
support.function.magic.python	#7C3AED	bold italic
support.function.builtin.python	#2563EB	—
storage.type.function.lambda	#7C3AED	—
entity.name.type.parameter	#7C3AED	—
keyword.control.default	#16A249	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}!`;
}