jolly-vscode-theme

Name: jolly-vscode-theme
Author: Sean Brynjólfsson

Publisher: Sean BrynjólfssonThemes in package: 2

Vibrant light and dark themes inspired by volcanoes, glaciers, and the northern lights

Open in VS Code GitHub

Color themes

VS Code preview

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

jolly-vscode-theme — Jolly Dark

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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#00000000
activityBar.activeBorder#64b5f6
activityBar.activeFocusBorder#64b5f6
activityBar.background#131e2b
activityBar.border#2a3a4f
activityBar.dropBorder#dce8f7
activityBar.foreground#a4b2c6
activityBar.inactiveForeground#8997ab
activityBarBadge.background#ff7092
activityBarBadge.foreground#07111b
badge.background#64b5f6
badge.foreground#07111b
breadcrumb.activeSelectionForeground#dce8f7
breadcrumb.background#0e1621
breadcrumb.focusForeground#dce8f7
breadcrumb.foreground#a4b2c6
breadcrumbPicker.background#0e1621
button.background#64b5f6
button.border#00000000
button.foreground#07111b
button.hoverBackground#86c5ff
button.secondaryBackground#d592ed
button.secondaryForeground#07111b
button.secondaryHoverBackground#d592ed
charts.blue#64b5f6
charts.foreground#dce8f7
charts.green#56d9b2
charts.lines#2a3a4f
charts.orange#ff7092
charts.purple#ec7bff
charts.red#ff7092
charts.yellow#e7bc61
contrastActiveBorder#00000000
contrastBorder#00000000
debugIcon.breakpointCurrentStackframeForeground#e7bc61
debugIcon.breakpointDisabledForeground#8997ab
debugIcon.breakpointForeground#ff7092
debugIcon.breakpointStackframeForeground#a4b2c6
debugIcon.breakpointUnverifiedForeground#e7bc61
debugIcon.continueForeground#56d9b2
debugIcon.disconnectForeground#ff7092
debugIcon.pauseForeground#64b5f6
debugIcon.restartForeground#56d9b2
debugIcon.startForeground#56d9b2
debugIcon.stepBackForeground#64b5f6
debugIcon.stepIntoForeground#64b5f6
debugIcon.stepOutForeground#64b5f6
debugIcon.stepOverForeground#64b5f6
debugIcon.stopForeground#ff7092
debugToolBar.background#0e1621
debugToolBar.border#2a3a4f
descriptionForeground#a4b2c6
diffEditor.border#2a3a4f
diffEditor.insertedLineBackground#56d9b240
diffEditor.insertedTextBackground#56d9b240
diffEditor.removedLineBackground#ff709240
diffEditor.removedTextBackground#ff709240
disabledForeground#8997ab
dropdown.background#0e1621
dropdown.border#2a3a4f
dropdown.foreground#dce8f7
dropdown.listBackground#0e1621
editor.background#0e1621
editor.findMatchBackground#e7bc6140
editor.findMatchBorder#e7bc61
editor.findMatchHighlightBackground#b6cf6540
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#34445c80
editor.foreground#dce8f7
editor.inactiveSelectionBackground#64b5f633
editor.lineHighlightBackground#131e2b
editor.lineHighlightBorder#00000000
editor.selectionBackground#64b5f647
editor.selectionHighlightBackground#34445c80
editor.wordHighlightBackground#34445c80
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#64b5f659
editorBracketHighlight.foreground1#64b5f6
editorBracketHighlight.foreground2#ec7bff
editorBracketHighlight.foreground3#56d9b2
editorBracketHighlight.foreground4#ff7092
editorBracketHighlight.foreground5#e7bc61
editorBracketHighlight.foreground6#a58bff
editorBracketMatch.background#64b5f659
editorBracketMatch.border#64b5f6
editorCodeLens.foreground#a4b2c6
editorCursor.background#0e1621
editorCursor.foreground#dce8f7
editorError.border#00000000
editorError.foreground#ff7092
editorGroup.border#2a3a4f
editorGroup.dropBackground#64b5f659
editorGroupHeader.border#2a3a4f
editorGroupHeader.tabsBackground#131e2b
editorGroupHeader.tabsBorder#2a3a4f
editorGutter.addedBackground#56d9b2
editorGutter.background#0e1621
editorGutter.deletedBackground#ff7092
editorGutter.modifiedBackground#64b5f6
editorHint.border#00000000
editorHint.foreground#a4b2c6
editorHoverWidget.background#0e1621
editorHoverWidget.border#2a3a4f
editorIndentGuide.activeBackground1#2a3a4f
editorIndentGuide.background1#131e2b
editorInfo.border#00000000
editorInfo.foreground#64b5f6
editorLineNumber.activeForeground#dce8f7
editorLineNumber.foreground#a4b2c6
editorOverviewRuler.border#2a3a4f
editorOverviewRuler.commonContentForeground#8997ab
editorOverviewRuler.currentContentForeground#56d9b2
editorOverviewRuler.incomingContentForeground#64b5f6
editorRuler.foreground#131e2b
editorSuggestWidget.background#0e1621
editorSuggestWidget.border#2a3a4f
editorSuggestWidget.foreground#dce8f7
editorSuggestWidget.highlightForeground#64b5f6
editorSuggestWidget.selectedBackground#284f70
editorWarning.border#00000000
editorWarning.foreground#e7bc61
editorWhitespace.foreground#131e2b
editorWidget.background#0e1621
editorWidget.border#2a3a4f
editorWidget.foreground#dce8f7
editorWidget.resizeBorder#64b5f6
errorForeground#ff7092
extensionBadge.remoteBackground#64b5f6
extensionBadge.remoteForeground#07111b
extensionButton.prominentBackground#64b5f6
extensionButton.prominentForeground#07111b
extensionButton.prominentHoverBackground#86c5ff
extensionIcon.starForeground#e7bc61
extensionIcon.verifiedForeground#56d9b2
focusBorder#64b5f6
foreground#dce8f7
gitDecoration.addedResourceForeground#56d9b2
gitDecoration.conflictingResourceForeground#e7bc61
gitDecoration.deletedResourceForeground#ff7092
gitDecoration.ignoredResourceForeground#8997ab
gitDecoration.modifiedResourceForeground#64b5f6
gitDecoration.submoduleResourceForeground#a4b2c6
gitDecoration.untrackedResourceForeground#56d9b2
icon.foreground#a4b2c6
input.background#0e1621
input.border#2a3a4f
input.foreground#dce8f7
input.placeholderForeground#2a3a4f
inputOption.activeBackground#284f70
inputOption.activeBorder#64b5f6
inputOption.activeForeground#dce8f7
inputValidation.errorBackground#592a3b
inputValidation.errorBorder#ff7092
inputValidation.errorForeground#dce8f7
inputValidation.infoBackground#284f70
inputValidation.infoBorder#64b5f6
inputValidation.infoForeground#dce8f7
inputValidation.warningBackground#574723
inputValidation.warningBorder#e7bc61
inputValidation.warningForeground#dce8f7
keybindingLabel.background#131e2b
keybindingLabel.border#2a3a4f
keybindingLabel.bottomBorder#2a3a4f
keybindingLabel.foreground#dce8f7
list.activeSelectionBackground#64b5f659
list.activeSelectionForeground#dce8f7
list.activeSelectionIconForeground#dce8f7
list.dropBackground#64b5f659
list.errorForeground#ff7092
list.focusAndSelectionOutline#64b5f6
list.focusBackground#64b5f659
list.focusForeground#dce8f7
list.focusOutline#64b5f6
list.highlightForeground#64b5f6
list.hoverBackground#34445c80
list.hoverForeground#dce8f7
list.inactiveFocusBackground#64b5f633
list.inactiveSelectionBackground#64b5f633
list.inactiveSelectionForeground#dce8f7
list.invalidItemForeground#ff7092
list.warningForeground#e7bc61
listFilterWidget.background#0e1621
listFilterWidget.noMatchesOutline#ff7092
listFilterWidget.outline#64b5f6
menu.background#0e1621
menu.border#2a3a4f
menu.foreground#dce8f7
menu.selectionBackground#64b5f6
menu.selectionForeground#07111b
menu.separatorBackground#2a3a4f
menubar.selectionBackground#34445c
menubar.selectionBorder#2a3a4f
menubar.selectionForeground#dce8f7
merge.border#2a3a4f
merge.commonContentBackground#8997ab26
merge.commonHeaderBackground#8997ab40
merge.currentContentBackground#56d9b226
merge.currentHeaderBackground#56d9b24d
merge.incomingContentBackground#64b5f626
merge.incomingHeaderBackground#64b5f64d
minimap.errorHighlight#ff7092
minimap.findMatchHighlight#e7bc6140
minimap.selectionHighlight#64b5f647
minimap.warningHighlight#e7bc61
minimapGutter.addedBackground#56d9b2
minimapGutter.deletedBackground#ff7092
minimapGutter.modifiedBackground#64b5f6
notificationCenter.border#2a3a4f
notificationCenterHeader.background#131e2b
notificationCenterHeader.foreground#dce8f7
notificationLink.foreground#64b5f6
notifications.background#0e1621
notifications.border#2a3a4f
notifications.foreground#dce8f7
notificationsErrorIcon.foreground#ff7092
notificationsInfoIcon.foreground#64b5f6
notificationsWarningIcon.foreground#e7bc61
notificationToast.border#2a3a4f
panel.background#131e2b
panel.border#2a3a4f
panelSection.border#2a3a4f
panelSection.dropBackground#64b5f659
panelSectionHeader.background#131e2b
panelSectionHeader.border#2a3a4f
panelSectionHeader.foreground#a4b2c6
panelTitle.activeBorder#64b5f6
panelTitle.activeForeground#dce8f7
panelTitle.inactiveForeground#a4b2c6
peekView.border#64b5f6
peekViewEditor.background#0e1621
peekViewEditor.matchHighlightBackground#574723
peekViewResult.background#131e2b
peekViewResult.fileForeground#dce8f7
peekViewResult.lineForeground#a4b2c6
peekViewResult.matchHighlightBackground#574723
peekViewResult.selectionBackground#284f70
peekViewResult.selectionForeground#dce8f7
peekViewTitle.background#131e2b
peekViewTitleDescription.foreground#a4b2c6
peekViewTitleLabel.foreground#dce8f7
pickerGroup.border#2a3a4f
pickerGroup.foreground#64b5f6
progressBar.background#64b5f6
quickInput.background#0e1621
quickInput.foreground#dce8f7
quickInputList.focusBackground#284f70
quickInputList.focusForeground#dce8f7
quickInputList.focusIconForeground#dce8f7
quickInputTitle.background#131e2b
sash.hoverBorder#64b5f6
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#dce8f7
scrollbarSlider.background#a4b2c6
scrollbarSlider.hoverBackground#8997ab
selection.background#284f70
settings.checkboxBackground#0e1621
settings.checkboxBorder#2a3a4f
settings.checkboxForeground#dce8f7
settings.dropdownBackground#0e1621
settings.dropdownBorder#2a3a4f
settings.dropdownForeground#dce8f7
settings.dropdownListBorder#2a3a4f
settings.headerForeground#dce8f7
settings.modifiedItemIndicator#64b5f6
settings.numberInputBackground#0e1621
settings.numberInputBorder#2a3a4f
settings.numberInputForeground#dce8f7
settings.textInputBackground#0e1621
settings.textInputBorder#2a3a4f
settings.textInputForeground#dce8f7
sideBar.background#131e2b
sideBar.border#2a3a4f
sideBar.foreground#dce8f7
sideBarSectionHeader.background#131e2b
sideBarSectionHeader.border#2a3a4f
sideBarSectionHeader.foreground#a4b2c6
sideBarTitle.foreground#dce8f7
statusBar.background#131e2b
statusBar.border#2a3a4f
statusBar.debuggingBackground#e7bc61
statusBar.debuggingForeground#07111b
statusBar.foreground#dce8f7
statusBar.noFolderBackground#131e2b
statusBar.noFolderForeground#dce8f7
statusBarItem.activeBackground#64b5f659
statusBarItem.errorBackground#ff7092
statusBarItem.errorForeground#07111b
statusBarItem.hoverBackground#64b5f633
statusBarItem.prominentBackground#64b5f6
statusBarItem.prominentForeground#07111b
statusBarItem.prominentHoverBackground#86c5ff
statusBarItem.remoteBackground#64b5f6
statusBarItem.remoteForeground#07111b
statusBarItem.warningBackground#e7bc61
statusBarItem.warningForeground#07111b
tab.activeBackground#0e1621
tab.activeBorder#0e1621
tab.activeBorderTop#64b5f6
tab.activeForeground#dce8f7
tab.activeModifiedBorder#64b5f6
tab.border#2a3a4f
tab.hoverBackground#34445c80
tab.hoverBorder#00000000
tab.hoverForeground#dce8f7
tab.inactiveBackground#131e2b
tab.inactiveForeground#a4b2c6
tab.inactiveModifiedBorder#8997ab
tab.lastPinnedBorder#8997ab
tab.unfocusedActiveBorder#0e1621
tab.unfocusedActiveBorderTop#8997ab
tab.unfocusedActiveForeground#a4b2c6
tab.unfocusedActiveModifiedBorder#8997ab
tab.unfocusedInactiveForeground#8997ab
tab.unfocusedInactiveModifiedBorder#8997ab
terminal.ansiBlack#0a111a
terminal.ansiBlue#64b5f6
terminal.ansiBrightBlack#a4b2c6
terminal.ansiBrightBlue#284f70
terminal.ansiBrightCyan#8ae5cb
terminal.ansiBrightGreen#8ae5cb
terminal.ansiBrightMagenta#f3a8ff
terminal.ansiBrightRed#592a3b
terminal.ansiBrightWhite#f7fbff
terminal.ansiBrightYellow#574723
terminal.ansiCyan#56d9b2
terminal.ansiGreen#56d9b2
terminal.ansiMagenta#ec7bff
terminal.ansiRed#ff7092
terminal.ansiWhite#b8c5d6
terminal.ansiYellow#e7bc61
terminal.background#0e1621
terminal.border#2a3a4f
terminal.foreground#dce8f7
terminal.selectionBackground#284f70
terminalCursor.background#0e1621
terminalCursor.foreground#dce8f7
testing.iconErrored#ff7092
testing.iconFailed#ff7092
testing.iconPassed#56d9b2
testing.iconQueued#e7bc61
testing.iconSkipped#8997ab
testing.iconUnset#8997ab
testing.runAction#56d9b2
titleBar.activeBackground#131e2b
titleBar.activeForeground#dce8f7
titleBar.border#2a3a4f
titleBar.inactiveBackground#131e2b
titleBar.inactiveForeground#8997ab
tree.inactiveIndentGuidesStroke#131e2b
tree.indentGuidesStroke#2a3a4f
walkThrough.embeddedEditorBackground#0e1621
widget.border#2a3a4f
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8997ab	italic
keyword.codetag.notation.python	#a4b2c6	bold
string, string.quoted, string.template	#9fca75	—
punctuation.definition.string.begin.python, punctuation.definition.string.end.python, string.quoted.docstring.multi.python	#62d5ca	italic
string.regexp	#e7bc61	—
constant.numeric, constant.language.numeric	#b6cf65	—
constant.language, constant.character, constant.other	#ec7bff	—
constant.language.python	#ec7bff	—
constant.other.caps, constant.other.caps.python	#917cff	—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, storage.type, storage.modifier	#ec7bff	—
keyword.operator, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.relational, keyword.operator.ternary	#56d9b2	—
variable.parameter, meta.parameter	#86c5ff	—
variable.other.property, variable.other.object.property, variable.other.member	#ff83ad	—
support.function.magic.python	#ff83ad	—
entity.name.method, meta.method-call	#ff83ad	—
entity.name.type, entity.name.class, entity.name.enum, entity.name.interface, entity.name.struct	#ff7092	—
entity.name.type.parameter, meta.type.parameters	#86c5ff	—
meta.item-access.arguments.python	#86c5ff	—
entity.name.namespace, entity.name.module, support.module, entity.name.type.module	#a58bff	—
entity.name.tag, meta.tag	#ff7092	—
entity.other.attribute-name	#f0a264	—
entity.name.function.decorator, meta.decorator, punctuation.decorator	#d9a950	—
punctuation.definition.decorator.python, entity.name.function.decorator.python, meta.function.decorator.python	#d9a950	—
entity.name.function.preprocessor, meta.preprocessor	#d592ed	—
entity.name.label	#d592ed	—
punctuation.separator, punctuation.terminator, punctuation.accessor, punctuation.section	#917cff	—
punctuation.separator.annotation.result	#56d9b2	—
markup.heading, entity.name.section	#ff7092	bold
markup.bold	#dce8f7	bold
markup.italic	#dce8f7	italic
markup.inline.raw, markup.fenced_code	#9fca75	—
markup.underline.link	#64b5f6	—
markup.quote	#8997ab	italic
invalid, invalid.illegal	#ff7092	—
invalid.deprecated	#e7bc61	—