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) — 6. KIROㅤㅤ(Lynx Theme)

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#a78bfa30
activityBar.activeBorder#c4a8ff
activityBar.activeFocusBorder#c4a8ff
activityBar.background#13111a
activityBar.border#13111a
activityBar.foreground#c8c0d8
activityBarBadge.background#7c3aed
activityBarBadge.foreground#ffffff
activityBarTop.foreground#a78bfa
activityBarTop.inactiveForeground#564d66
banner.background#1c1828
banner.foreground#e8e3f0
banner.iconForeground#a78bfa
breadcrumb.activeSelectionForeground#c4a8ff
breadcrumb.background#1c1828
breadcrumb.focusForeground#c4a8ff
breadcrumb.foreground#7a7090
breadcrumbPicker.background#1c1828
button.background#7c3aed
button.foreground#c8c0d8
button.hoverBackground#9d6fff
button.secondaryBackground#7c3aed
button.secondaryForeground#ffffff
button.secondaryHoverBackground#9056f5
charts.blue#a78bfa
charts.foreground#e8e3f0
charts.green#3dba80
charts.lines#3d3058
charts.orange#f0a060
charts.purple#c4a8ff
charts.red#f07080
charts.yellow#e8c547
chat.avatarBackground#241e30
chat.avatarForeground#e8e3f0
chat.requestBorder#3d3050
commandCenter.activeBackground#1c1828
commandCenter.background#0e0c14
commandCenter.border#2e2440
contrastActiveBorder#00000000
debugIcon.pauseForeground#e8c547
debugIcon.restartForeground#56b6f7
debugIcon.stopForeground#f07080
debugToolBar.background#241e30
debugToolBar.border#3d3058
diffEditor.diagonalFill#2e2440
diffEditor.insertedLineBackground#7c3aed12
diffEditor.insertedTextBackground#7c3aed22
diffEditor.removedLineBackground#f0708010
diffEditor.removedTextBackground#f0708018
disabledForeground#6a5f7a
dropdown.background#1c1828
dropdown.border#3d3058
dropdown.foreground#e8e3f0
dropdown.listBackground#241e30
editor.background#14111c
editor.findMatchBackground#7c3aed98
editor.findMatchBorder#c4a8ff
editor.findMatchHighlightBackground#6030a0c0
editor.findMatchHighlightBorder#d4b8ff
editor.findRangeHighlightBackground#a78bfa35
editor.foldBackground#a78bfa12
editor.foreground#e8e3f0
editor.lineHighlightBackground#a78bfa08
editor.lineHighlightBorder#2e2440
editor.linkedEditingBackground#a78bfa28
editor.rangeHighlightBackground#56b6f718
editor.selectionBackground#7c3aed50
editor.selectionHighlightBackground#7c3aed20
editor.wordHighlightBackground#e8c54720
editor.wordHighlightStrongBackground#a78bfa28
editorBracketHighlight.foreground1#e8c547
editorBracketHighlight.foreground2#a78bfa
editorBracketHighlight.foreground3#56b6f7
editorBracketHighlight.foreground4#f0a060
editorBracketHighlight.foreground5#c4a8ff
editorBracketHighlight.foreground6#40d4b8
editorBracketHighlight.unexpectedBracket.foreground#f07080
editorBracketMatch.background#a78bfa28
editorBracketMatch.border#a78bfa90
editorCursor.foreground#c4a8ff
editorGhostText.foreground#453860
editorGroup.border#3d3058
editorGroup.dropBackground#a78bfa18
editorGroup.emptyBackground#0e0c14
editorGroup.focusedEmptyBorder#a78bfa
editorGroupHeader.border#1c1828
editorGroupHeader.noTabsBackground#13111a
editorGroupHeader.tabsBackground#13111a
editorGroupHeader.tabsBorder#2e2440
editorGutter.addedBackground#3dba80
editorGutter.deletedBackground#c0445a
editorGutter.modifiedBackground#56b6f7
editorHoverWidget.background#1c1828
editorHoverWidget.border#3d3050
editorHoverWidget.foreground#e8e3f0
editorHoverWidget.statusBarBackground#241e30
editorIndentGuide.activeBackground1#a78bfa55
editorIndentGuide.background1#2e244050
editorInlayHint.background#1c182880
editorInlayHint.foreground#7a7090
editorInlayHint.parameterBackground#56b6f718
editorInlayHint.parameterForeground#56b6f7
editorInlayHint.typeBackground#a78bfa28
editorInlayHint.typeForeground#a78bfa
editorLineNumber.activeForeground#a78bfa
editorLineNumber.foreground#3d3055
editorOverviewRuler.border#3d305870
editorOverviewRuler.findMatchForeground#a78bfa80
editorOverviewRuler.rangeHighlightForeground#c4a8ff80
editorStickyScroll.background#1c1828
editorStickyScroll.border#3d3058
editorStickyScroll.shadow#00000095
editorStickyScrollHover.background#241e30
editorSuggestWidget.background#1c1828
editorSuggestWidget.border#3d3050
editorSuggestWidget.focusHighlightForeground#c4a8ff
editorSuggestWidget.foreground#e8e3f0
editorSuggestWidget.highlightForeground#c4a8ff
editorSuggestWidget.selectedBackground#a78bfa40
editorSuggestWidget.selectedForeground#e8e3f0
editorWidget.background#1c1828
editorWidget.border#3d3058
editorWidget.foreground#e8e3f0
editorWidget.resizeBorder#a78bfa
extensionIcon.verifiedForeground#a78bfa
focusBorder#a78bfa
foreground#e8e3f0
gitDecoration.addedResourceForeground#e8c547
gitDecoration.conflictingResourceForeground#56b6f7
gitDecoration.deletedResourceForeground#f07080
gitDecoration.ignoredResourceForeground#564d66c0
gitDecoration.modifiedResourceForeground#a78bfa
gitDecoration.renamedResourceForeground#e8c547
gitDecoration.stageDeletedResourceForeground#e8c547
gitDecoration.stageModifiedResourceForeground#e8c547
gitDecoration.submoduleResourceForeground#e8c547
gitDecoration.untrackedResourceForeground#7c3aed
icon.foreground#a8a0b8
input.background#1c1828
input.border#3d3058
input.foreground#e8e3f0
input.placeholderForeground#6a5f7a
inputOption.activeBackground#a78bfa50
inputOption.activeForeground#e8e3f0
inputValidation.errorBackground#f0708022
inputValidation.errorBorder#c0445a
inputValidation.errorForeground#f07080
inputValidation.infoBackground#56b6f722
inputValidation.infoBorder#2888c8
inputValidation.infoForeground#56b6f7
inputValidation.warningBackground#e8c54722
inputValidation.warningBorder#b89020
inputValidation.warningForeground#e8c547
keybindingLabel.background#3d3058
keybindingLabel.border#00000000
keybindingLabel.bottomBorder#c4a8ff
keybindingLabel.foreground#e8e3f0
list.activeSelectionBackground#a78bfa38
list.activeSelectionForeground#e8e3f0
list.dropBackground#0e0c14
list.errorForeground#f07080
list.focusBackground#3d3050
list.focusForeground#e8e3f0
list.focusOutline#9d6fff
list.highlightForeground#c4a8ff
list.hoverBackground#241e30
list.hoverForeground#e8e3f0
list.inactiveSelectionBackground#1c1828
list.inactiveSelectionForeground#c8c0d8
list.invalidItemForeground#f07080
list.warningForeground#e8a44a
menu.background#1c1828
menu.border#2e2440
menu.foreground#e8e3f0
menu.selectionBackground#8b5cf630
menu.selectionBorder#9d6fff
menu.selectionForeground#c4a8ff
menu.separatorBackground#3d3050
menubar.selectionBackground#a78bfa28
menubar.selectionBorder#9d6fff
menubar.selectionForeground#c4a8ff
merge.border#a78bfa
merge.commonContentBackground#e8c54718
merge.commonHeaderBackground#e8c54738
merge.currentContentBackground#a78bfa18
merge.currentHeaderBackground#a78bfa38
merge.incomingContentBackground#56b6f718
merge.incomingHeaderBackground#56b6f738
minimap.background#13111a
minimap.errorHighlight#f07080
minimap.findMatchHighlight#a78bfac0
minimap.selectionHighlight#7c3aed58
minimap.warningHighlight#e8c547
minimapSlider.activeBackground#a78bfa68
minimapSlider.background#a78bfa38
minimapSlider.hoverBackground#a78bfa50
notificationCenter.border#3d3058
notificationCenterHeader.background#241e30
notificationCenterHeader.foreground#a78bfa
notificationLink.foreground#c4a8ff
notifications.background#1c1828
notifications.border#3d3058
notifications.foreground#e8e3f0
notificationsErrorIcon.foreground#f07080
notificationsInfoIcon.foreground#a78bfa
notificationsWarningIcon.foreground#e8c547
notificationToast.border#3d3058
panel.background#13111a
panel.border#2e244070
panelSection.border#3d3058
panelSection.dropBackground#a78bfa38
panelSectionHeader.background#241e30
panelSectionHeader.foreground#a78bfa
panelTitle.activeBorder#c4a8ff
panelTitle.activeForeground#e8e3f0
panelTitle.inactiveForeground#6a5f7a
peekView.border#a78bfa
peekViewEditor.background#1c1828
peekViewEditor.matchHighlightBackground#7c3aed38
peekViewEditor.matchHighlightBorder#a78bfa
peekViewEditorGutter.background#1c1828
peekViewResult.background#13111a
peekViewResult.fileForeground#e8e3f0
peekViewResult.lineForeground#7a7090
peekViewResult.matchHighlightBackground#7c3aed38
peekViewResult.selectionBackground#3d3058
peekViewResult.selectionForeground#e8e3f0
peekViewTitle.background#0e0c14
peekViewTitleDescription.foreground#a78bfa
peekViewTitleLabel.foreground#e8e3f0
problemsErrorIcon.foreground#f07080
problemsInfoIcon.foreground#56b6f7
problemsWarningIcon.foreground#e8c547
progressBar.background#7c3aed
quickInput.background#1c1828
quickInput.foreground#e8e3f0
quickInputList.focusBackground#a78bfa60
quickInputList.focusForeground#e8e3f0
quickInputList.focusIconForeground#e8e3f0
sash.hoverBorder#a78bfa
scrollbar.shadow#0e0c1490
scrollbarSlider.activeBackground#6040a088
scrollbarSlider.background#6040a040
scrollbarSlider.hoverBackground#6040a065
selection.background#6030a0
settings.checkboxBackground#1c1828
settings.checkboxBorder#3d3058
settings.checkboxForeground#a78bfa
settings.dropdownBackground#1c1828
settings.dropdownBorder#3d3058
settings.dropdownForeground#e8e3f0
settings.dropdownListBorder#a78bfa
settings.headerForeground#e8e3f0
settings.modifiedItemIndicator#a78bfa
settings.numberInputBackground#1c1828
settings.numberInputBorder#3d3058
settings.numberInputForeground#e8e3f0
settings.textInputBackground#1c1828
settings.textInputBorder#3d3058
settings.textInputForeground#e8e3f0
sideBar.background#13111a
sideBar.border#3d305870
sideBar.foreground#a8a0b8
sideBarSectionHeader.background#0e0c14
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#a78bfa
sideBarTitle.foreground#c8c0d8
statusBar.background#13111a
statusBar.border#00000000
statusBar.debuggingBackground#2e1e50
statusBar.debuggingForeground#e8e3f0
statusBar.foreground#7a7090
statusBar.noFolderBackground#00000000
statusBar.noFolderForeground#a8a0b8
statusBarItem.activeBackground#a78bfa18
statusBarItem.hoverBackground#241e30
statusBarItem.hoverForeground#e8e3f0
statusBarItem.prominentBackground#2e2448
statusBarItem.remoteBackground#5b21b6
statusBarItem.remoteForeground#ffffff
statusBarItem.remoteHoverForeground#f0ecff
symbolIcon.arrayForeground#e8c547
symbolIcon.booleanForeground#f0a060
symbolIcon.classForeground#a78bfa
symbolIcon.colorForeground#c4a8ff
symbolIcon.constantForeground#7c3aed
symbolIcon.constructorForeground#56b6f7
symbolIcon.enumeratorForeground#e8c547
symbolIcon.enumeratorMemberForeground#c4a8ff
symbolIcon.eventForeground#f07080
symbolIcon.fieldForeground#b8a8ff
symbolIcon.fileForeground#e8e3f0
symbolIcon.folderForeground#e8c547
symbolIcon.functionForeground#56b6f7
symbolIcon.interfaceForeground#7c3aed
symbolIcon.keyForeground#c4a8ff
symbolIcon.keywordForeground#a78bfa
symbolIcon.methodForeground#56b6f7
symbolIcon.moduleForeground#e8c547
symbolIcon.namespaceForeground#f0a060
symbolIcon.nullForeground#f07080
symbolIcon.numberForeground#e8c547
symbolIcon.objectForeground#e8c547
symbolIcon.operatorForeground#c4a8ff
symbolIcon.packageForeground#e8c547
symbolIcon.propertyForeground#b8a8ff
symbolIcon.referenceForeground#f0a060
symbolIcon.snippetForeground#c4a8ff
symbolIcon.stringForeground#40d4b8
symbolIcon.structForeground#56b6f7
symbolIcon.textForeground#e8e3f0
symbolIcon.typeParameterForeground#c4a8ff
symbolIcon.unitForeground#c4a8ff
symbolIcon.variableForeground#b8a8ff
tab.activeBackground#1c1828
tab.activeBorder#1c1828
tab.activeBorderTop#a78bfa
tab.activeForeground#e8e3f0
tab.border#2e2440
tab.hoverBackground#241e30
tab.hoverBorder#2e2440
tab.hoverForeground#c8c0d8
tab.inactiveBackground#13111a
tab.inactiveForeground#6a5f7a
tab.unfocusedActiveForeground#9088a8
tab.unfocusedInactiveForeground#4a4058
terminal.ansiBlack#1a1625
terminal.ansiBlue#c4a8ff
terminal.ansiBrightBlack#564d66
terminal.ansiBrightBlue#6ec8f5
terminal.ansiBrightCyan#40d4e0
terminal.ansiBrightGreen#7dd895
terminal.ansiBrightMagenta#d4a0ff
terminal.ansiBrightRed#f08090
terminal.ansiBrightWhite#f0ecff
terminal.ansiBrightYellow#f0d060
terminal.ansiCyan#2ab8c8
terminal.ansiGreen#5dba78
terminal.ansiMagenta#b888f0
terminal.ansiRed#e05868
terminal.ansiWhite#c8c0d8
terminal.ansiYellow#d8b040
terminal.background#0e0c14
terminal.foreground#e8e3f0
terminal.selectionBackground#a78bfa70
terminalCursor.background#13111a
terminalCursor.foreground#a78bfa
testing.iconErrored#e8c547
testing.iconFailed#f07080
testing.iconPassed#3dba80
testing.iconQueued#e8c547
testing.iconSkipped#7a7090
testing.iconUnset#564d66
testing.message.error.lineBackground#f0708028
testing.peekBorder#a78bfa
testing.peekHeaderBackground#1c1828
textBlockQuote.background#1c1828b8
textBlockQuote.border#5b3a8a
textCodeBlock.background#1c1828
textLink.activeForeground#c4a8ff
textLink.foreground#a78bfa
textPreformat.foreground#e8c547
titleBar.activeBackground#13111a
titleBar.activeForeground#e8e3f0
titleBar.border#00000000
titleBar.inactiveBackground#0e0c14
titleBar.inactiveForeground#6a5f7a
toolbar.hoverBackground#ffffff18
tree.indentGuidesStroke#6d4fa060
widget.border#3d3058
widget.shadow#00000070

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment.line, punctuation.definition.comment	#4e4462	italic
comment.block	#4e4462	italic
comment.block.documentation, comment.line.documentation	#615878	italic bold
string.quoted.astro	#40d4b8	—
source.astro	#e8e3f0	—
keyword.control	#d0b0ff	bold
keyword.control.flow, keyword.control.conditional, keyword.control.loop	#b888fa	bold
keyword.control.new, keyword.operator.new	#f07080	bold
keyword.control.import, keyword.control.export, keyword.control.from	#e8c880	—
keyword.control.async, keyword.control.await	#6ec8f5	bold italic
keyword.other	#d0b0ff	—
storage.type	#d0b0ff	bold
storage.type.annotation	#82AAFF	—
storage.type.generic	#f060a0	—
storage.type.function.arrow	#c8c0d8	—
storage.modifier	#d0b0ff	italic
storage.modifier.import	#9898e0	—
keyword.operator	#c8c0d8	—
keyword.operator.assignment	#c8c0d8	bold
keyword.operator.expression	#f0a0c8	—
keyword.operator.logical	#c090e8	bold
keyword.operator.comparison	#c090e8	—
keyword.operator.rest, keyword.operator.spread	#90d8a0	—
keyword.operator.type.annotation	#c8c0d8	—
keyword.operator.ternary	#f0a0c8	—
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	#8870aa	—
punctuation.definition.annotation	#82AAFF	—
variable.other, variable.object.property	#e8c547	—
meta.block variable.other	#c8c8e8	—
variable.other.constant	#6ec8f5	bold
variable.other.readonly	#6ec8f5	—
variable.other.macro.argument	#c090e8	—
variable.parameter, variable.parameter.probably	#f0a0c8	italic
variable.language	#f07080	bold italic
meta.object.property, meta.object-binding-pattern-variable	#c870a8	—
entity.name.function	#9898e0	bold
entity.name.method	#82AAFF	bold
entity.name.function.constructor	#82AAFF	bold
meta.function-call	#9898e0	—
meta.definition.function	#9898e0	—
meta.definition.method	#9898e0	—
meta.definition.property	#5dd8a8	—
string.quoted.single, string.quoted.double	#40d4b8	—
string.template	#40d4b8	—
meta.template.expression	#f0a0c8	—
string.regexp	#6ec8f5	—
string.other.link	#f07888	—
constant.numeric	#f0a0c8	bold
constant.language	#f0a0c8	bold
constant.other.variable	#40d4b8	—
constant.character.escape	#6ec8f5	—
entity.name.tag	#70c8f5	bold
entity.name.type	#f060a0	bold
entity.name.type.class	#f060a0	bold
entity.name.type.interface	#6ec8f5	bold
entity.name.type.enum	#e8c880	bold
entity.name.type.module	#6ec8f5	—
entity.other	#f060a0	—
entity.other.attribute-name	#e8c880	—
entity.scope.name	#6ec8f5	—
support.type.primitive	#d0b0ff	bold
support.type.property-name	#6ec8f5	—
support.type.builtin	#d0b0ff	bold
support.function	#f8e8a8	—
support.class	#f060a0	—
meta.brace	#c8c0d8	—
meta.definition.variable	#5dd8a8	—
meta.import	#e8e3f0	—
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	#b888fa	—
meta.object-literal.key	#6ec8f5	—
entity.name.tag.css, entity.other.attribute-name.class.css	#f8e8a8	—
support.type.property-name.css	#e0daf0	—
support.constant.property-value.css	#40d4b8	—
entity.other.attribute-name.id.css	#e8c880	—
entity.other.attribute-name.pseudo-class.css	#c090e8	—
support.type.property-name.json	#e0a848	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#b878d8	—
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	#68a0f5	—
string.quoted.double.json	#40d4b8	—
entity.name.tag.yaml	#e8c880	—
invalid	#f07080	bold underline
invalid.deprecated	#f08890	—
text.html.markdown fenced_code.block.language	#d0b0ff	—
text.html.markdown markup.bold	#b888fa	bold
text.html.markdown markup.italic	#70c8f5	italic
text.html.markdown markup.strikethrough	#f07080	strikethrough
text.html.markdown markup.inline.raw.string	#c090e8	—
text.html.markdown markup.underline.link	#82AAFF	—
text.html.markdown meta.paragraph	#e0daf0	—
text.html.markdown punctuation.definition.heading	#6ec8f5	bold
text.html.markdown entity.name.section	#90d8a0	bold
text.html.markdown string.other.link.title	#40d4b8	—
text.html.markdown meta.separator	#6a6080	—
support.class.component.jsx, support.class.component.tsx	#e8c547	bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx	#e8c880	—
punctuation.definition.tag.jsx, punctuation.definition.tag.tsx	#c8c0d8	—
entity.name.type.ts, entity.name.type.tsx	#f060a0	bold
entity.name.type.interface.ts, entity.name.type.interface.tsx	#6ec8f5	bold
entity.name.type.alias.ts, entity.name.type.alias.tsx	#6ec8f5	bold
punctuation.decorator	#82AAFF	bold
entity.name.function.decorator	#82AAFF	bold
support.function.magic.python	#c090e8	bold italic
support.function.builtin.python	#9898e0	—
storage.type.function.lambda	#c090e8	—
entity.name.type.parameter	#c090e8	—
keyword.control.default	#90d8a0	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}!`;
}