Jellybeans Theme

Name: Jellybeans Theme
Author: Simon Watts

Publisher: Simon WattsThemes in package: 2

Jellybeans Theme, based on jellybeans.vim by nanotech

Open in VS Code GitHub

Color themes

VS Code preview

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

Jellybeans Theme — Jellybeans+

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.background#403c41
activityBar.border#403c41
activityBar.foreground#e8e8d3
activityBarBadge.background#8197bf
activityBarBadge.foreground#ffffff
breadcrumb.activeSelectionForeground#8fbfdc
breadcrumb.background#1c1c1c
breadcrumb.focusForeground#e8e8d3
breadcrumb.foreground#b0b0a0
debugConsole.errorForeground#cf6a4c
debugConsole.infoForeground#8fbfdc
debugConsole.sourceForeground#c6b6ee
debugConsole.warningForeground#ffb964
debugTokenExpression.boolean#8fbfdc
debugTokenExpression.error#cf6a4c
debugTokenExpression.name#c6b6ee
debugTokenExpression.number#cf6a4c
debugTokenExpression.string#99ad6a
debugTokenExpression.value#9098a0
editor.background#151515
editor.findMatchBackground#325413
editor.findMatchHighlightBackground#611339
editor.foreground#e8e8d3
editor.inactiveSelectionBackground#3A3D41
editor.selectionBackground#FFFFFF35
editor.selectionHighlightBackground#88888835
editorBracketHighlight.foreground1#668799
editorBracketHighlight.foreground2#996687
editorBracketHighlight.foreground3#669987
editorBracketHighlight.foreground4#998766
editorBracketHighlight.foreground5#876699
editorBracketHighlight.foreground6#879966
editorCursor.background#151515
editorCursor.foreground#e8e8d3
editorGroup.border#403c41
editorIndentGuide.activeBackground#707070
editorIndentGuide.background#404040
editorLineNumber.activeForeground#908583
editorLineNumber.foreground#605958
editorStickyScroll.background#1c1c1c
foreground#e8e8d3
gitDecoration.addedResourceForeground#99ad6a
gitDecoration.deletedResourceForeground#cf6a4c
gitDecoration.ignoredResourceForeground#888888
gitDecoration.modifiedResourceForeground#ffb964
gitDecoration.renamedResourceForeground#c6b6ee
gitDecoration.stageDeletedResourceForeground#8197bf
gitDecoration.stageModifiedResourceForeground#c6b6ee
gitDecoration.untrackedResourceForeground#8fbfdc
input.placeholderForeground#A6A6A6
list.activeSelectionBackground#2b5b77
list.activeSelectionForeground#e8e8d3
list.activeSelectionIconForeground#e8e8d3
list.dropBackground#383B3D
list.highlightForeground#8fbfdc
list.inactiveSelectionBackground#403c41
list.inactiveSelectionForeground#e8e8d3
list.inactiveSelectionIconForeground#e8e8d3
menu.background#303031
menu.foreground#e8e8d3
peekViewEditor.background#151530
ports.iconRunningProcessForeground#369432
sideBar.background#1c1c1c
sideBar.border#403c41
sideBar.foreground#e8e8d3
sideBarSectionHeader.background#0000
sideBarSectionHeader.border#ccc3
sideBarTitle.foreground#e8e8d3
statusBar.background#384048
statusBar.debuggingBackground#437019
statusBar.debuggingForeground#e8e8d3
statusBar.foreground#e8e8d3
statusBar.noFolderBackground#2b5b77
statusBar.noFolderForeground#e8e8d3
statusBarItem.errorBackground#902020
statusBarItem.errorForeground#e8e8d3
statusBarItem.remoteBackground#2d7067
statusBarItem.remoteForeground#e8e8d3
statusBarItem.warningBackground#540063
statusBarItem.warningForeground#e8e8d3
tab.activeBackground#151515
tab.activeForeground#e8e8d3
tab.inactiveBackground#353335
tab.inactiveForeground#b0b0a0
tab.lastPinnedBorder#ccc3
tab.unfocusedActiveForeground#b0b0a0
tab.unfocusedInactiveForeground#908583
terminal.ansiBlack#151515
terminal.ansiBlue#8197bf
terminal.ansiBrightBlack#888888
terminal.ansiBrightBlue#8197bf
terminal.ansiBrightCyan#8fbfdc
terminal.ansiBrightGreen#99ad6a
terminal.ansiBrightMagenta#c6b6ee
terminal.ansiBrightRed#cf6a4c
terminal.ansiBrightWhite#adadad
terminal.ansiBrightYellow#fad07a
terminal.ansiCyan#8fbfdc
terminal.ansiGreen#799d6a
terminal.ansiMagenta#c6b6ee
terminal.ansiRed#cf6a4c
terminal.ansiWhite#e8e8d3
terminal.ansiYellow#ffb964
terminal.background#151515
terminal.foreground#e8e8d3
textLink.activeForeground#c6b6ee
textLink.foreground#8fbfdc
titleBar.activeBackground#252526
titleBar.activeForeground#e8e8d3
welcomePage.background#151515
welcomePage.progress.foreground#8197bf

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown	#e8e8d3	—
emphasis	—	italic
strong	—	bold
header	#000080	—
comment	#888888	—
constant.language	#8fbfdc	—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent	#cf6a4c	—
constant.regexp	#646695	—
entity.name.tag	#8fbfdc	—
entity.name.tag.css	#799d6a	—
entity.other.attribute-name	#c6b6ee	—
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss	#799d6a	—
invalid	#f44747	—
markup.underline	—	underline
markup.bold	#8fbfdc	bold
markup.heading	#8fbfdc	bold
markup.italic	—	italic
markup.strikethrough	—	strikethrough
markup.inserted	#b5cea8	—
markup.deleted	#99ad6a	—
markup.changed	#8fbfdc	—
punctuation.definition.quote.begin.markdown	#6A9955	—
punctuation.definition.list.begin.markdown	#6796e6	—
markup.inline.raw	#99ad6a	—
punctuation.definition.tag	#808080	—
meta.preprocessor, entity.name.function.preprocessor	#8fbfdc	—
meta.preprocessor.string	#99ad6a	—
meta.preprocessor.numeric	#cf6a4c	—
meta.structure.dictionary.key.python	#c6b6ee	—
meta.diff.header	#8fbfdc	—
storage	#8fbfdc	—
storage.type	#8fbfdc	—
storage.modifier, keyword.operator.noexcept	#8fbfdc	—
string, meta.embedded.assembly	#99ad6a	—
string.tag	#99ad6a	—
string.value	#99ad6a	—
string.regexp	#d16969	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded	#8fbfdc	—
meta.template.expression	#e8e8d3	—
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded	#c6b6ee	—
keyword	#8fbfdc	—
keyword.control	#8fbfdc	—
keyword.operator	#e8e8d3	—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike	#8fbfdc	—
keyword.other.unit	#cf6a4c	—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php	#8fbfdc	—
support.function.git-rebase	#c6b6ee	—
constant.sha.git-rebase	#cf6a4c	—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java	#e8e8d3	—
variable.language	#8fbfdc	—
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal	#fad07a	—
support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy	#ffb964	—
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#ffb964	—
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator	#8197bf	—
variable, meta.definition.variable.name, support.variable, entity.name.variable, constant.other.placeholder	#c6b6ee	—
variable.other.constant, variable.other.enummember	#799d6a	—
meta.object-literal.key	#c6b6ee	—
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color	#99ad6a	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp	#99ad6a	—
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#d16969	—
keyword.operator.or.regexp, keyword.control.anchor.regexp	#fad07a	—
keyword.operator.quantifier.regexp	#799d6a	—
constant.character	#8fbfdc	—
constant.character.escape	#cf6a4c	—
entity.name.label	#C8C8C8	—

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