Next Jelly Fish

Name: Next Jelly Fish
Author: Shayan Ali Jalbani

Publisher: Shayan Ali JalbaniThemes in package: 2

This is Jelly Fish theme for you developers!

Open in VS Code

Color themes

VS Code preview

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

Next Jelly Fish — Next Jelly Fish Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#0078d4
activityBar.background#000000
activityBar.border#2e2e2e
activityBar.foreground#ededed
activityBar.inactiveForeground#a0a0a0
activityBarBadge.background#5cc2b2
activityBarBadge.foreground#000000
badge.background#5cc2b2
badge.foreground#000000
breadcrumb.activeSelectionForeground#ededed
breadcrumb.background#0a0a0a
breadcrumb.focusForeground#ededed
breadcrumb.foreground#a0a0a0
button.background#5cc2b2
button.border#ffffff12
button.foreground#000000
button.hoverBackground#5cc2b2bb
button.secondaryBackground#3a3d41
button.secondaryForeground#ffffff
button.secondaryHoverBackground#45494e
checkbox.background#3c3c3c
checkbox.border#00000000
checkbox.foreground#cccccc
debugExceptionWidget.background#000000
debugExceptionWidget.border#2e2e2e
debugToolBar.background#000000
debugToolBar.border#2e2e2e
descriptionForeground#8b949e
diffEditor.border#444444
diffEditor.insertedLineBackground#23863633
diffEditor.insertedTextBackground#9bb95533
diffEditor.removedLineBackground#da363333
diffEditor.removedTextBackground#ff000033
dropdown.background#3c3c3c
dropdown.border#00000000
dropdown.foreground#cccccc
dropdown.listBackground#313131
editor.background#0a0a0a
editor.findMatchBackground#515c6a
editor.findMatchBorder#4598f7
editor.findMatchHighlightBackground#ea5c0055
editor.findMatchHighlightBorder#ffffff00
editor.findRangeHighlightBackground#3a3d4166
editor.findRangeHighlightBorder#ffffff00
editor.foldBackground#264f784d
editor.foreground#ededed
editor.hoverHighlightBackground#264f7840
editor.inactiveSelectionBackground#3a3d41
editor.lineHighlightBackground#ffffff0a
editor.lineHighlightBorder#282828
editor.rangeHighlightBackground#ffffff0b
editor.rangeHighlightBorder#ffffff00
editor.selectionBackground#ffffff24
editor.selectionHighlightBackground#add6ff26
editor.selectionHighlightBorder#495f77
editor.wordHighlightBackground#575757b8
editor.wordHighlightStrongBackground#004972b8
editorBracketMatch.background#0064001a
editorBracketMatch.border#888888
editorCodeLens.foreground#999999
editorCursor.background#000000
editorCursor.foreground#aeafad
editorError.background#b73a3400
editorError.border#ffffff00
editorError.foreground#f48771
editorGroup.border#444444
editorGroup.emptyBackground#0a0a0a
editorGroupHeader.tabsBackground#0a0a0a
editorGroupHeader.tabsBorder#ffffff15
editorGutter.addedBackground#587c0c
editorGutter.background#0a0a0a
editorGutter.commentRangeForeground#c5c5c5
editorGutter.deletedBackground#94151b
editorGutter.foldingControlForeground#c5c5c5
editorGutter.modifiedBackground#0c7d9d
editorHoverWidget.background#000000
editorHoverWidget.border#2e2e2e
editorHoverWidget.foreground#a0a0a0
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#2e2e2e
editorInfo.background#4490bf00
editorInfo.border#4490bf00
editorInfo.foreground#75beff
editorInlayHint.background#8b949e33
editorInlayHint.foreground#8b949e
editorInlayHint.typeBackground#8b949e33
editorInlayHint.typeForeground#8b949e
editorLineNumber.activeForeground#c6c6c6
editorLineNumber.foreground#858585
editorLink.activeForeground#4e94ce
editorMarkerNavigation.background#000000
editorMarkerNavigationError.background#f48771
editorMarkerNavigationInfo.background#75beff
editorMarkerNavigationWarning.background#cca700
editorOverviewRuler.background#25252500
editorOverviewRuler.border#7f7f7f4d
editorRuler.foreground#5a5a5a
editorSuggestWidget.background#000000
editorSuggestWidget.border#2e2e2e
editorSuggestWidget.foreground#a0a0a0
editorSuggestWidget.highlightForeground#5cc2b2
editorSuggestWidget.selectedBackground#282828
editorWarning.background#a9904000
editorWarning.border#ffffff00
editorWarning.foreground#cca700
editorWhitespace.foreground#e3e4e229
editorWidget.background#000000
editorWidget.foreground#a0a0a0
editorWidget.resizeBorder#2e2e2e
errorForeground#f85149
focusBorder#5cc2b2
foreground#a0a0a0
gitDecoration.addedResourceForeground#40c458
gitDecoration.conflictingResourceForeground#8484f5
gitDecoration.deletedResourceForeground#f04343
gitDecoration.ignoredResourceForeground#777777
gitDecoration.modifiedResourceForeground#fdca7d
gitDecoration.stageDeletedResourceForeground#f04343
gitDecoration.stageModifiedResourceForeground#fdca7d
gitDecoration.submoduleResourceForeground#60adf5
gitDecoration.untrackedResourceForeground#99dbb0
icon.foreground#a0a0a0
input.background#3c3c3c
input.border#00000000
input.foreground#cccccc
input.placeholderForeground#a6a6a6
inputOption.activeBackground#ffffff24
inputOption.activeBorder#007acc00
inputOption.activeForeground#ffffff
keybindingLabel.foreground#cccccc
list.activeSelectionBackground#ffffff24
list.activeSelectionForeground#ededed
list.activeSelectionIconForeground#ffffff
list.dropBackground#ffffff12
list.focusBackground#ffffff24
list.focusForeground#ededed
list.highlightForeground#5cc2b2
list.hoverBackground#ffffff12
list.hoverForeground#ededed
list.inactiveSelectionBackground#ffffff12
list.inactiveSelectionForeground#ededed
listFilterWidget.background#2e2e2e
listFilterWidget.noMatchesOutline#ff2424
listFilterWidget.outline#5cc2b2
menu.background#000000
menu.border#2e2e2e
menu.foreground#a0a0a0
menu.selectionBackground#ffffff12
menu.selectionBorder#00000000
menu.selectionForeground#ededed
menu.separatorBackground#2e2e2e
menubar.selectionBackground#ffffff12
menubar.selectionBorder#2e2e2e
menubar.selectionForeground#ededed
merge.commonContentBackground#282828
merge.commonHeaderBackground#383838
merge.currentContentBackground#27403b
merge.currentHeaderBackground#367366
merge.incomingContentBackground#28384b
merge.incomingHeaderBackground#395f8f
minimap.background#0a0a0a
minimap.errorHighlight#f48771
minimap.findMatchHighlight#515c6a
minimap.selectionHighlight#ffffff24
minimap.warningHighlight#cca700
minimapGutter.addedBackground#587c0c
minimapGutter.deletedBackground#94151b
minimapGutter.modifiedBackground#0c7d9d
notificationCenter.border#2e2e2e
notificationCenterHeader.background#000000
notificationCenterHeader.foreground#ededed
notifications.background#000000
notifications.border#2e2e2e
notifications.foreground#a0a0a0
notificationsErrorIcon.foreground#f48771
notificationsInfoIcon.foreground#75beff
notificationsWarningIcon.foreground#cca700
notificationToast.border#2e2e2e
panel.background#000000
panel.border#2e2e2e
panelInput.border#ffffff15
panelSection.border#80808059
panelTitle.activeBorder#e7e7e7
panelTitle.activeForeground#e7e7e7
panelTitle.inactiveForeground#e7e7e799
peekView.border#5cc2b2
peekViewEditor.background#00322a
peekViewEditor.matchHighlightBackground#ff8f0099
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#00322a
peekViewResult.background#000000
peekViewResult.fileForeground#ededed
peekViewResult.lineForeground#a0a0a0
peekViewResult.matchHighlightBackground#ea5c004d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
peekViewTitle.background#00000000
peekViewTitleDescription.foreground#ccccccb3
peekViewTitleLabel.foreground#ffffff
pickerGroup.border#2e2e2e
pickerGroup.foreground#5cc2b2
ports.iconRunningProcessForeground#369432
progressBar.background#5cc2b2
quickInput.background#1f1f1f
quickInput.foreground#cccccc
scrollbar.shadow#000000
scrollbarSlider.activeBackground#bfbfbf66
scrollbarSlider.background#79797966
scrollbarSlider.hoverBackground#646464b3
selection.background#ffffff24
settings.dropdownBackground#313131
settings.dropdownBorder#ffffff1f
settings.focusedRowBackground#ffffff07
settings.headerForeground#a0a0a0
settings.modifiedItemIndicator#bb800966
sideBar.background#000000
sideBar.border#2e2e2e
sideBar.dropBackground#ffffff12
sideBar.foreground#a0a0a0
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#ededed
sideBarTitle.foreground#a0a0a0
statusBar.background#000000
statusBar.border#2e2e2e
statusBar.debuggingBackground#cb6308
statusBar.debuggingForeground#ffffff
statusBar.foreground#a0a0a0
statusBar.noFolderBackground#000000
statusBar.noFolderBorder#2e2e2e
statusBar.noFolderForeground#a0a0a0
statusBarItem.activeBackground#ffffff25
statusBarItem.focusBorder#0078d4
statusBarItem.hoverBackground#ffffff12
statusBarItem.prominentBackground#6e768166
statusBarItem.remoteBackground#000000
statusBarItem.remoteForeground#ffffff
tab.activeBackground#000000
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#ffffff
tab.border#2e2e2e
tab.hoverBackground#1f1f1f
tab.hoverForeground#ffffff
tab.inactiveBackground#0a0a0a
tab.inactiveForeground#ffffff80
tab.lastPinnedBorder#cccccc33
tab.unfocusedActiveBorder#1f1f1f
tab.unfocusedActiveBorderTop#ffffff15
tab.unfocusedHoverBackground#6e76811a
terminal.ansiBlack#000000
terminal.ansiBlue#2472c8
terminal.ansiBrightBlack#666666
terminal.ansiBrightBlue#3b8eea
terminal.ansiBrightCyan#29b8db
terminal.ansiBrightGreen#23d18b
terminal.ansiBrightMagenta#d670d6
terminal.ansiBrightRed#f14c4c
terminal.ansiBrightWhite#e5e5e5
terminal.ansiBrightYellow#f5f543
terminal.ansiCyan#11a8cd
terminal.ansiGreen#0dbc79
terminal.ansiMagenta#bc3fbc
terminal.ansiRed#cd3131
terminal.ansiWhite#e5e5e5
terminal.ansiYellow#e5e510
terminal.border#80808059
terminal.foreground#cccccc
terminal.inactiveSelectionBackground#3a3d41
terminal.selectionBackground#ffffff40
terminal.tab.activeBorder#0078d4
terminalCursor.background#ffffff24
terminalCursor.foreground#ffffff
textBlockQuote.background#010409
textBlockQuote.border#ffffff14
textCodeBlock.background#6e768166
textLink.activeForeground#40a6ff
textLink.foreground#3794ff
textSeparator.foreground#21262d
titleBar.activeBackground#000000
titleBar.activeForeground#a0a0a0
titleBar.border#2e2e2e
titleBar.inactiveBackground#2e2e2e
titleBar.inactiveForeground#a0a0a0
tree.indentGuidesStroke#2e2e2e
walkThrough.embeddedEditorBackground#00000050
welcomePage.progress.foreground#0078d4
welcomePage.tileBackground#ffffff0f
widget.border#ffffff15
widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#838383	italic
variable, string constant.other.placeholder	#EEFFFF	—
string constant.other.placeholder	#FA71FF	—
constant.other.color	#FFFFFF	—
invalid, invalid.illegal	#FF5370	—
keyword, storage.type, storage.modifier	#FF0062	—
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution	#FFFFFF	—
keyword.control	#FF006A	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#FF0077	—
entity.name.function, variable.function, support.function, keyword.other.special-method	#00FFFF	—
meta.function-call	#20DD20	—
meta.block variable.other	#F07178	—
support.other.variable, string.other.link	#F07178	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#FF7E34	—
keyword.other.unit, keyword.other	#82FBFF	—
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#FF0077	—
string	#EEFF00	—
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#FFCB6B	—
support.type	#F0B565	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#FFFFFF	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#FD0076	—
variable.language	#FF5370	italic
entity.name.method.js	#FDFF82	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#829FFF	—
entity.other.attribute-name	#00FFF2	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#FFCB6B	italic
entity.other.attribute-name.class	#FFCB6B	—
source.sass keyword.control	#82AAFF	—
markup.inserted	#C3E88D	—
markup.deleted	#FF5370	—
markup.changed	#C792EA	—
string.regexp	#89DDFF	—
constant.character.escape	#89DDFF	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#82AAFF	italic
source.js constant.other.object.key.js string.unquoted.label.js	#FF5370	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#C792EA	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#FFCB6B	—
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	#F78C6C	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#FF5370	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#DA8878	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#FF0062	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#F07178	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#FF0062	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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	#C3E88D	—
text.html.markdown, punctuation.definition.list_item.markdown	#EEFFFF	—
text.html.markdown markup.inline.raw.markdown	#FF0062	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#C3E88D	—
markup.italic	#F07178	italic
markup.bold, markup.bold string	#F49EFF	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#F07178	bold
markup.underline	#F78C6C	underline
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote	—	italic
string.other.link.title.markdown	#FF0062	—
string.other.link.description.title.markdown	#FF0062	—
constant.other.reference.link.markdown	#FFCB6B	—
markup.raw.block	#FF0062	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#EEFFFF	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#EEFFFF	—
token.info-token	#6796E6	—
token.warn-token	#CD9731	—
token.error-token	#F44747	—
token.debug-token	#B267E6	—

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