gruvball theme

Name: gruvball theme
Author: mrwilford

Publisher: mrwilfordThemes in package: 1

gruvball vscode color theme

Open in VS Code GitHub

VS Code preview

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

gruvball theme — gruvball

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#222022
activityBar.foreground#806292
activityBarBadge.background#b1314c
activityBarBadge.foreground#f4ddcc
badge.background#b1314c
badge.foreground#f4ddcc
button.background#b1314c
button.foreground#f4ddcc
debugToolBar.background#493441
diffEditor.insertedTextBackground#02f79922
diffEditor.removedTextBackground#ec264755
dropdown.background#222022
dropdown.foreground#c0aea0
editor.background#222022
editor.findMatchHighlightBackground#c6496430
editor.foreground#c0aea0
editor.hoverHighlightBackground#ffffff11
editor.inactiveSelectionBackground#ffffff30
editor.lineHighlightBackground#382536
editor.selectionBackground#ffffff16
editor.selectionHighlightBackground#ffffff08
editorBracketMatch.background#040004
editorBracketMatch.border#00000000
editorCursor.foreground#f4ddcc
editorError.foreground#b1314c
editorGroupHeader.tabsBackground#191819
editorGutter.addedBackground#2f7a5d
editorGutter.deletedBackground#c6494a
editorGutter.modifiedBackground#806292
editorHint.foreground#6a8cc8
editorIndentGuide.activeBackground#382536
editorIndentGuide.background#272427
editorInfo.foreground#806292
editorLineNumber.activeForeground#a1495c
editorLineNumber.foreground#493441
editorOverviewRuler.border#222022
editorOverviewRuler.findMatchForeground#382536
editorRuler.foreground#49343d
editorWarning.foreground#d16d8a
editorWhitespace.foreground#363036
editorWidget.background#222022
editorWidget.border#c6494a
extensionButton.prominentBackground#b1314c
extensionButton.prominentForeground#f4ddcc
extensionButton.prominentHoverBackground#b35a6d
foreground#726472
gitDecoration.deletedResourceForeground#b1314c
gitDecoration.ignoredResourceForeground#493441
gitDecoration.modifiedResourceForeground#c0aea0
gitDecoration.untrackedResourceForeground#2f7a5d
input.background#191819
input.border#806292
input.foreground#c0aea0
input.placeholderForeground#493441
list.activeSelectionBackground#222022
list.activeSelectionForeground#c0aea0
list.dropBackground#383b3d
list.errorForeground#c6494a
list.focusBackground#382536
list.hoverBackground#382536
list.inactiveFocusBackground#382536
list.inactiveSelectionBackground#222022
list.inactiveSelectionForeground#c0aea0
list.warningForeground#c88e5d
notifications.background#191819
panel.background#191819
panel.border#222022
panelTitle.activeForeground#c0aea0
panelTitle.inactiveForeground#794966
peekView.border#b1314c
peekViewEditor.background#191819
peekViewEditor.matchHighlightBackground#ffffff33
peekViewResult.background#151315
peekViewResult.lineForeground#c0aea0
peekViewResult.matchHighlightBackground#ffffff33
peekViewResult.selectionBackground#222022
peekViewResult.selectionForeground#f4ddcc
peekViewTitle.background#b1314c
peekViewTitleDescription.foreground#c0aea0
peekViewTitleLabel.foreground#f4ddcc
pickerGroup.border#ffffff11
pickerGroup.foreground#794966
progressBar.background#b1314c
scrollbar.shadow#191819
scrollbarSlider.background#ffffff18
selection.background#a386a0
sideBar.background#191819
sideBarSectionHeader.background#4d344a
sideBarSectionHeader.foreground#c0aea0
sideBarTitle.foreground#996793
statusBar.background#382536
statusBar.border#382536
statusBar.debuggingBackground#b1314c
statusBar.foreground#c0aea0
tab.activeBackground#222022
tab.activeForeground#c0aea0
tab.border#493441
tab.inactiveBackground#191819
tab.inactiveForeground#81756e
terminal.foreground#c0aea0
terminal.selectionBackground#141114
terminalCursor.foreground#f4ddcc
textLink.activeForeground#c64964
textLink.foreground#806292
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#c0aea0ff	—
emphasis	—	italic
strong	—	bold
constant.other, entity.name.function, markup.list, meta, storage.modifier.import, storage.modifier.import.java, storage.modifier.package, storage.modifier.package.java, support.type.property-name, support.type.vendored.property-name, variable.other, variable.other.object, variable.other.property, variable.parameter	#c0aea0	—
markup.bold	#c0aea0	bold
markup.italic	#c0aea0	italic
constant.character, constant.character.escape, entity.other.attribute-name.localname.cs, keyword.control.ternary, keyword.operator, keyword.operator.disjunction.regexp, keyword.operator.quantifier.regexp, keyword.codetag.notation, markup.fenced_code, meta.tag.block.any.html, meta.tag.inline.any.html, punctuation.parenthesis.begin.regexp, punctuation.parenthesis.end.regexp, punctuation.parenthesis.non-capturing.begin.regexp, punctuation.parenthesis.non-capturing.end.regexp, string.regexp	#794966	—
keyword.control, comment.block.documentation, comment.block.triple-slash, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.css, punctuation.definition.keyword, string.quoted.docstring	#794966	bold
comment, constant.character.escape.line-continuation, entity.name.tag.localname.cs, keyword.command.rem, keyword.operator.at.batchfile, invalid.deprecated, punctuation, punctuation.definition.tag, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.html	#493441	—
keyword.control.new, storage, support.constant.media	#6a8cc8
keyword, entity.name.tag, entity.name.tag.css, keyword.declaration, markup.heading, storage.modifier, storage.type, storage.type.primitive, storage.type.primitive.java	#a1495c	bold
entity.name.class, entity.name.function.decorator, entity.name.section.group-title.ini, entity.name.type, entity.other.attribute-name.id.css, entity.other.attribute-name, entity.other.attribute-name.class.css, entity.other.inherited-class, keyword.operator.logical.python, keyword.operator.sizeof, markup, string.other.link, meta.class.body.java, meta.definition.variable, meta.selector, punctuation.definition.annotation, punctuation.definition.storage.type.objc, storage.type.annotation, storage.type.annotation.java, storage.type.cs, storage.type.generic, storage.type.generic.java, storage.type.java, storage.type.object, storage.type.object.array.java, support.class, support.function, support.type, support.variable, variable.language, variable.other.java, variable.other.readwrite.batchfile, variable.parameter.function.language.special.self	#806292
constant.language, constant.numeric, constant.other.color, constant.other.color.rgb-value, keyword.other.unit, markup.inline.raw, punctuation.definition.string.begin, punctuation.definition.string.end, source.ini, string, string.quoted.double.html, storage.type.number, storage.type.string, support.constant, support.constant.color, support.constant.font-name, support.constant.property-value	#d16d8a	—
entity.name.function.preprocessor, invalid, meta.preprocessor, meta.preprocessor.macro, string.unquoted.preprocessor, variable.parameter.preprocessor	#c58d5d	—
keyword.control.directive, keyword.control.import, keyword.other.import, keyword.other.package, keyword.other.special-method, keyword.other.using, keyword.preprocessor, meta.tag.sgml.doctype, punctuation.definition.directive, punctuation.separator.hash	#c58d5d	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}!`;
}