Jellybeans Theme

Name: Jellybeans Theme
Author: Dimitar Nonov

Publisher: Dimitar NonovThemes in package: 1

This is vs code theme based on jellybeans.vim theme.

GitHub

VS Code preview

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

Jellybeans Theme — Jellybeans 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.

editor.background#151515
editor.foreground#e8e8d3
editor.lineHighlightBackground#00000055
editor.selectionBackground#2e2e2e
editorCursor.foreground#b2dfd1
editorLightBulb.foreground#fad07a
editorLightBulbAutoFix.foreground#fad07a
editorLineNumber.activeForeground#fabb6e
editorSuggestWidget.background#252525
editorSuggestWidget.border#454545
editorSuggestWidget.foreground#e8e8d3
editorSuggestWidget.highlightForeground#8197BF
editorSuggestWidget.selectedBackground#3f3f3f
editorWhitespace.foreground#4b4e53
input.background#3c3c3c
input.foreground#cccccc
input.placeholderForeground#cccccc80
inputOption.activeBorder#8197BF
inputValidation.errorBackground#5a1d1d
inputValidation.errorBorder#be1100
inputValidation.infoBackground#3f3f3f
inputValidation.infoBorder#007acc
inputValidation.warningBackground#352a05
inputValidation.warningBorder#b89500
list.activeSelectionBackground#3f3f3f
list.activeSelectionForeground#ffffff
list.dropBackground#062f4a
list.errorForeground#f88070
list.focusBackground#3f3f3f
list.highlightForeground#8197BF
list.hoverBackground#2a2d2e
list.inactiveSelectionBackground#37373d
list.invalidItemForeground#b89500
list.warningForeground#4d9e4d
notificationsErrorIcon.foreground#cf6a4c
notificationsInfoIcon.foreground#fad07a
notificationsWarningIcon.foreground#8197BF
peekViewEditor.background#1d1d1d
peekViewEditor.matchHighlightBackground#3399ff33
peekViewEditorGutter.background#1d1d1d
peekViewResult.selectionBackground#3399ff33
peekViewResult.selectionForeground#ffffff
problemsErrorIcon.foreground#cf6a4c
problemsInfoIcon.foreground#8197BF
problemsWarningIcon.foreground#fad07a
statusBar.background#333333
statusBar.debuggingBackground#333333
statusBar.foreground#e8e8d3
statusBar.noFolderBackground#333333
symbolIcon.classForeground#fdab47
symbolIcon.constructorForeground#fad07a
symbolIcon.enumeratorForeground#8197BF
symbolIcon.enumeratorMemberForeground#8197BF
symbolIcon.fieldForeground#8197BF
symbolIcon.functionForeground#fad07a
symbolIcon.interfaceForeground#fdab47
symbolIcon.keywordForeground#e8e8d3
symbolIcon.methodForeground#fad07a
symbolIcon.moduleForeground#fdab47
symbolIcon.namespaceForeground#fdab47
symbolIcon.referenceForeground#8197BF
symbolIcon.snippetForeground#e8e8d3
symbolIcon.unitForeground#e8e8d3
symbolIcon.variableForeground#8197BF
terminal.ansiBlack#e8e8d3
terminal.ansiBlue#8197BF
terminal.ansiBrightBlack#e8e8d3
terminal.ansiBrightBlue#8197BF
terminal.ansiBrightCyan#6796e6
terminal.ansiBrightGreen#99ad6a
terminal.ansiBrightMagenta#b267e6
terminal.ansiBrightRed#cf6a4c
terminal.ansiBrightWhite#e8e8d3
terminal.ansiBrightYellow#fad07a
terminal.ansiCyan#6796e6
terminal.ansiGreen#99ad6a
terminal.ansiMagenta#b267e6
terminal.ansiRed#cf6a4c
terminal.ansiWhite#e8e8d3
terminal.ansiYellow#fad07a
terminal.background#151515
terminal.foreground#e4e4db

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#888888	—
comment.block.preprocessor	#888888	—
comment.documentation, comment.block.documentation	#858585	—
keyword.operator, punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#ffe2a9	—
keyword, storage, keyword.operator.logical.python, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.instanceof, keyword.operator.new	#8197BF	—
storage.type, support.type	#8197BF	—
constant.language, variable.parameter.function.language.special.self.python, support.constant, variable.language	#8197BF	—
variable, support.variable	#ddddc1	—
entity.name.function, meta.function-call.generic.python, support.function	#fad07a	—
meta.object-literal.key	#fad07a	—
variable.parameter.function.language.python, meta.function-call.arguments.python, variable.parameter.function-call.python	#ddddc1	—
punctuation.definition.decorator.python	#8197BF	—
punctuation.definition.directive.c, punctuation.definition.directive.cpp	#8197BF	—
meta.return-type, support.class, entity.other.inherited-class, support.type, entity.name.type, 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.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	#fabb6e	—
constant.numeric, constant.character	#cf6a4c	—
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, constant.character.format.placeholder.other.python	#99ad6a	—
constant.other	#8197BF	—
string.regexp	#cf6a4c	—
punctuation	#e8e8d3	—
support.type.property-name.json.comments	#fbe3bf	—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html	#fabb6e	—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end	#888888	—
entity.name.tag, support.class.component.js	#fabb6e	—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html	#8197BF	—
constant.character.entity, punctuation.definition.entity	#cf6a4c	—
meta.jsx.children.js.jsx	#ddddc1	—
meta.selector, meta.selector entity, meta.selector entity punctuation, punctuation.definition.entity.css, entity.name.tag.css	#fabb6e	—
meta.property-name, support.type.property-name	#ddddc1	—
meta.property-value, meta.property-value constant.other, support.constant.property-value, punctuation.definition.constant.css	#cf6a4c	—
keyword.other.unit.rem.css, keyword.other.unit.vh.css, keyword.other.unit.px.css, keyword.other.unit.em.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css	#cf6a4c	—
keyword.other.important	—	bold
support.constant.property-value.css	#8197BF	—
punctuation.definition.block.tag.jsdoc, punctuation.definition.inline.tag.jsdoc	#8197BF	—
punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc	#fabb6e	—
constant.keyword.clojure	#ffe2a9	—
markup.heading.markdown, punctuation.definition.heading.markdown	#fabb6e	—
meta.link.inline.markdown, markup.underline.link.markdown, punctuation.definition.metadata.markdown, markup.underline.link.image.markdown, markup.underline.link.markdown, punctuation.definition.link.markdown, meta.link.email.lt-gt.markdown	#99ad6a	—
punctuation.definition.list.begin.markdown, punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown, string.other.link.description.markdown, string.other.link.title.markdown, punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown, punctuation.definition.constant.begin.markdown, punctuation.definition.constant.end.markdown, punctuation.definition.constant.markdown	#8197BF	—
punctuation.definition.quote.begin.markdown	#cf6a4c	—
punctuation.definition.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.raw.block.markdown, markup.inline.raw.string.markdown	#888888	—
markup.bold.markdown, punctuation.definition.bold.markdown	—	bold
markup.italic.markdown, punctuation.definition.italic.markdown	—	italic
punctuation.definition.arguments.begin.math.tex, punctuation.definition.arguments.end.math.tex, punctuation.math.end.bracket.curly, punctuation.math.begin.bracket.curly	#8197BF	—
punctuation.definition.function.tex, punctuation.definition.function.math.tex, punctuation.definition.function.latex, keyword.control.preamble.latex	#fad07a	—
punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown	#99ad6a	—
punctuation.definition.constant.math.tex	#cf6a4c	—

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