Gruvbox Minor

Name: Gruvbox Minor
Author: adamsome

Publisher: adamsomeThemes in package: 6

Gruvbox Minor

GitHub

Color themes

VS Code preview

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

Gruvbox Minor — Gruvbox Minor Light Hard

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#f9f5d7
activityBar.border#f9f5d700
activityBar.dropBackground#427b5840
activityBar.foreground#928374
activityBarBadge.background#b57614
activityBarBadge.foreground#ebdbb2
badge.background#b57614
badge.foreground#f9f5d7
breadcrumb.activeSelectionForegraph#ebdbb280
breadcrumb.focusForeground#665c54
breadcrumb.foreground#928374
breadcrumbPicker.background#f9f5d7
button.background#b57614cd
button.foreground#f9f5d7
button.hoverBackground#b5761480
debugToolBar.background#f9f5d7
diffEditor.insertedTextBackground#79740e30
diffEditor.removedTextBackground#9d000630
diffEditorGutter.insertedLineBackground#79740e13
diffEditorGutter.removedLineBackground#9d000613
dropdown.background#f9f5d7
dropdown.border#ebdbb2
dropdown.foreground#928374
editor.background#f9f5d7
editor.findMatchBackground#8f3f7180
editor.findMatchHighlightBackground#8f3f714d
editor.findRangeHighlightBackground#8f3f7126
editor.foreground#928374
editor.hoverHighlightBackground#689d6a50
editor.lineHighlightBackground#ebdbb260
editor.lineHighlightBorder#f9f5d700
editor.selectionBackground#689d6a40
editor.selectionHighlightBackground#92837426
editor.wordHighlightBackground#07667833
editor.wordHighlightStrongBackground#07667880
editorBracketHighlight.foreground1#665c54
editorBracketHighlight.foreground2#689d6a
editorBracketHighlight.foreground3#458588
editorBracketHighlight.foreground4#b16286
editorBracketHighlight.foreground5#d65d0e
editorBracketHighlight.foreground6#d79921
editorBracketHighlight.unexpectedBracket.foreground#cc241d
editorBracketMatch.background#92837480
editorBracketMatch.border#f9f5d700
editorCodeLens.foreground#bdae9390
editorCursor.background#f9f5d7
editorCursor.foreground#b57614
editorError.foreground#cc241d
editorGroup.border#d5c4a14d
editorGroup.dropBackground#427b5840
editorGroup.emptyBackground#f9f5d7
editorGroup.noTabsBackground#ebdbb2
editorGroup.tabsbackground#ebdbb2
editorGroup.tabsBorder#d5c4a14d
editorGroupHeader.noTabsBackground#f9f5d7
editorGroupHeader.tabsBackground#f9f5d7
editorGutter.addedBackground#79740e
editorGutter.background#f9f5d700
editorGutter.deletedBackground#9d0006
editorGutter.modifiedBackground#b57614
editorHoverWidget.background#ebdbb2
editorHoverWidget.border#ebdbb2
editorIndentGuide.background#d5c4a133
editorInfo.foreground#d79921
editorLineNumber.activeForeground#b57614
editorLineNumber.foreground#d5c4a1
editorLink.activeForeground#928374
editorOverviewRuler.addedForeground#b57614
editorOverviewRuler.border#f9f5d700
editorOverviewRuler.commonContentForeground#928374
editorOverviewRuler.currentContentForeground#458588
editorOverviewRuler.deletedForeground#b57614
editorOverviewRuler.errorForeground#9d0006
editorOverviewRuler.findMatchForeground#8f3f714d
editorOverviewRuler.incomingContentForeground#689d6a
editorOverviewRuler.infoForeground#689d6a
editorOverviewRuler.modifiedForeground#b57614
editorOverviewRuler.rangeHighlightForeground#8f3f7126
editorOverviewRuler.selectionHighlightForeground#d5c4a1
editorOverviewRuler.warningForeground#d65d0e
editorOverviewRuler.wordHighlightForeground#07667866
editorOverviewRuler.wordHighlightStrongForeground#0766789a
editorRuler.foreground#d5c4a133
editorStickyScroll.background#f2e5bc
editorStickyScrollHover.background#ebdbb2
editorSuggestWidget.background#f9f5d7
editorSuggestWidget.border#ebdbb2
editorSuggestWidget.focusHighlightForeground#076678
editorSuggestWidget.foreground#928374
editorSuggestWidget.highlightForeground#458588
editorSuggestWidget.selectedBackground#ebdbb2
editorWarning.foreground#d65d0e
editorWhitespace.foreground#bdae9326
editorWidget.background#f9f5d7
editorWidget.border#ebdbb2
errorForeground#9d0006
extensionButton.prominentBackground#b57614ff
extensionButton.prominentForeground#f9f5d7
extensionButton.prominentHoverBackground#b57614c0
focusBorder#ebdbb2
foreground#928374
gitDecoration.conflictingResourceForeground#b16286
gitDecoration.deletedResourceForeground#cc241d
gitDecoration.ignoredResourceForeground#d5c4a1
gitDecoration.modifiedResourceForeground#458588
gitDecoration.untrackedResourceForeground#98971a
input.background#92837405
input.border#ebdbb2
input.foreground#928374
input.placeholderForeground#92837460
inputValidation.errorBackground#cc241d80
inputValidation.errorBorder#9d0006
inputValidation.errorForeground#9d0006
inputValidation.infoBackground#d7992180
inputValidation.infoBorder#b57614
inputValidation.infoForeground#b57614
inputValidation.warningBackground#d65d0e80
inputValidation.warningBorder#af3a03
inputValidation.warningForeground#af3a03
list.activeSelectionBackground#ebdbb2
list.activeSelectionForeground#665c54
list.dropBackground#427b5840
list.focusBackground#ebdbb2
list.focusForeground#928374
list.focusHighlightForeground#076678
list.highlightForeground#458588
list.hoverBackground#ebdbb240
list.hoverForeground#928374
list.inactiveSelectionBackground#ebdbb280
list.inactiveSelectionForeground#665c54
menu.background#f9f5d7
menu.foreground#928374
menu.selectionBackground#b57614
menu.selectionBorder#b57614
menu.selectionForeground#f9f5d7
menubar.selectionBackground#b57614
menubar.selectionBorder#b57614
menubar.selectionForeground#f9f5d7
merge.border#f9f5d700
merge.currentContentBackground#45858820
merge.currentHeaderBackground#45858840
merge.incomingContentBackground#689d6a20
merge.incomingHeaderBackground#689d6a40
notification.background#f9f5d7
notification.buttonBackground#b57614cd
notification.buttonForeground#f9f5d7
notification.buttonHoverBackground#b5761480
notification.errorBackground#9d0006
notification.errorForeground#f9f5d7
notification.foreground#928374
notification.infoBackground#b57614
notification.infoForeground#f9f5d7
notification.warningBackground#af3a03
notification.warningForeground#f9f5d7
panel.border#d5c4a14d
panelTitle.activeForeground#928374
peekView.border#ebdbb2
peekViewEditor.background#ebdbb250
peekViewEditorGutter.background#ebdbb250
peekViewResult.background#ebdbb250
peekViewResult.fileForeground#928374
peekViewResult.matchHighlightBackground#b5761430
peekViewResult.selectionBackground#b5761430
peekViewResult.selectionForeground#b5761430
peekViewTitle.background#ebdbb250
peekViewTitleDescription.foreground#bdae93
peekViewTitleLabel.foreground#928374
progressBar.background#d79921
sash.hoverBorder#b57614
scrollbar.shadow#f9f5d7
scrollbarSlider.activeBackground#d79921
scrollbarSlider.background#d5c4a199
scrollbarSlider.hoverBackground#bdae93
selection.background#689d6a40
settings.headerForeground#665c54
settings.inactiveSelectedItemBorder#ebdbb2
settings.modifiedItemForeground#b57614
sideBar.background#f9f5d7
sideBar.border#d5c4a14d
sideBar.foreground#928374
sideBarSectionHeader.background#f9f5d700
sideBarSectionHeader.foreground#928374
sideBarTitle.foreground#928374
statusBar.background#f9f5d7
statusBar.debuggingBackground#b57614
statusBar.debuggingBorder#d5c4a14d
statusBar.debuggingForeground#f9f5d7
statusBar.foreground#928374
statusBar.noFolderBackground#f9f5d7
statusBar.noFolderBorder#f9f5d700
statusBar.prominentBackground#d79921
statusBar.prominentHoverBackground#d7992170
tab.activeBorder#f9f5d7
tab.activeForeground#665c54
tab.border#f9f5d7
tab.inactiveBackground#ebdbb2
tab.inactiveForeground#928374
tab.unfocusedActiveBorder#f9f5d700
tab.unfocusedActiveForeground#928374
tab.unfocusedInactiveForeground#bdae93
terminal.ansiBlack#ebdbb2
terminal.ansiBlue#458588
terminal.ansiBrightBlack#928374
terminal.ansiBrightBlue#076678
terminal.ansiBrightCyan#427b58
terminal.ansiBrightGreen#79740e
terminal.ansiBrightMagenta#8f3f71
terminal.ansiBrightRed#9d0006
terminal.ansiBrightWhite#3c3836
terminal.ansiBrightYellow#b57614
terminal.ansiCyan#689d6a
terminal.ansiGreen#98971a
terminal.ansiMagenta#b16286
terminal.ansiRed#cc241d
terminal.ansiWhite#7c6f64
terminal.ansiYellow#d79921
terminal.background#f9f5d7
terminal.foreground#928374
textLink.activeForeground#458588
textLink.foreground#076678
titleBar.activeBackground#f9f5d7
titleBar.activeForeground#928374
titleBar.inactiveBackground#f9f5d7
widget.shadow#f9f5d730

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text.html	#3c3836	—
emphasis	—	italic
strong	—	bold
header	#b57614	—
url, link, uri	—	underline
invalid	#cc241d	—
punctuation, meta.embedded, source.js, source.ts, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx	#665c54	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#a89984	italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class, comment.block.documentation storage.type.class punctuation	#b57614	italic
comment.block.documentation variable, comment.block.documentation variable.other	#665c54	italic
constant, constant.numeric, constant.language, support.constant, meta.preprocessor.numeric, keyword.other.unit	#8f3f71	—
string, meta.preprocessor.string	#79740e	—
constant.character, constant.regexp	#af3a03	—
punctuation.section.embedded, meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.interpolation.begin.bracket, punctuation.definition.interpolation.end.bracket, punctuation.definition.variable.makefile, string.interpolated punctuation.definition.string.begin, string.interpolated punctuation.definition.string.end	#af3a03	—
string.regexp	#79740e	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, support.other.parenthesis.regexp	#665c54	—
punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp	#8f3f71	—
keyword.operator.quantifier.regexp	#8f3f71	—
string.regexp keyword.other	#665c54	—
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#9d0006	—
entity.name.type.class, support.class, keyword.primitive-datatypes.swift, storage.type.attribute.swift, storage.type.objc, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, keyword.struct.go, keyword.interface.go, storage.type.c, keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, source.groovy storage.type, storage.type.php, storage.type.haskell, storage.type.ocaml, source.java storage.type, storage.type.core.rust, storage.class.std.rust, source.powershell entity.other.attribute-name, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#427b58	—
entity.name.type.interface, support.interface, support.type, meta.return-type, meta.return.type, meta.type.name, meta.cast, meta.type.annotation, keyword.primitive-datatypes.swift, storage.type.attribute.swift, storage.type.objc, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, keyword.struct.go, keyword.interface.go, storage.type.c, keyword.type.cs, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.groovy, source.groovy storage.type, storage.type.php, storage.type.haskell, storage.type.ocaml, source.java storage.type, storage.type.core.rust, storage.class.std.rust, source.powershell entity.other.attribute-name, meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class	#b57614	—
variable.language.this, variable.language.super, variable.this, variable.language.special.self, variable.parameter.function.language.special.self, keyword.other.this, keyword.expressions-and-types.swift	#b57614	—
keyword, punctuation.definition.keyword	#9d0006	—
keyword.operator	#665c54	—
keyword.operator.ternary	#9d0006	—
variable.language, keyword.control.new, keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.logical.python, meta.preprocessor, meta.diff.header, meta.selector	#9d0006	—
keyword.control, keyword.control punctuation.definition.keyword	#9d0006	—
keyword.import, keyword.package, keyword.control.directive, keyword.control.export, keyword.control.import, keyword.other.import, keyword.other.package, meta.import keyword.control, support.type.object.module	#9d0006	—
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java	#427b58	—
entity.name.function, entity.name.method, entity.name.static.function-call, support.function, support.constant.handlebars, variable.function, keyword.operator.function.infix, meta.function-call.generic, meta.function-call.object, meta.function-call.static, meta.function.python, meta.function-call.php, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, entity.name.function.go	#076678	—
entity.name.variable.parameter, variable.parameter, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, meta.at-rule.function variable, meta.at-rule.mixin variable	#3c3836	—
meta.decorator entity.name.function, storage.type.annotation, meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object	#427b58	—
meta.parameter.type.variable, support.variable, variable.name, variable.other, variable, string.constant.other.placeholder, meta.object-literal.key, meta.decorator.ts meta.object.member, constant.other.key.perl	#3c3836	—
meta.object-binding-pattern-variable variable.object.property, meta.import variable.other.readwrite, meta.export variable.other.readwrite	#665c54	—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#3c3836	—
meta.export.default variable.other.readwrite	#3c3836	—
entity.name.function.target.makefile, entity.name.section.toml, variable.other.key.toml, entity.name.tag.yaml	#b57614	—
constant.other.date, constant.other.timestamp	#8f3f71	—
variable.other.alias.yaml	#076678	—
source.json meta.structure.dictionary.json support.type.property-name.json	#b57614	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#427b58	—
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	#076678	—
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	#af3a03	—
entity.name.tag	#427b58	bold
tag.close entity.name.tag	#689d6a	—
entity.other.attribute-name, meta.tag.inline.any.html, meta.tag.sgml	#076678	—
entity.other.attribute-name.id	#af3a03	—
punctuation.definition.entity.html	#af3a03	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#665c54	—
entity.other.attribute-name.parent-selector	#9d0006	—
meta.function-call.arguments	#3c3836	—
meta.selectionset.graphql variable	#79740e	—
meta.selectionset.graphql meta.arguments variable	#3c3836	—
source.shell support.function.builtin	#427b58	—
source.shell support.function.builtin	#076678	—
punctuation.definition.variable.shell, source.shell variable.other	#427b58	—
string.interpolated.backtick.shell, string.interpolated.dollar.shell	#427b58	—
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string	#3c3836	—
meta.scope.prerequisites	#427b58	—
entity.name.function.target	#79740e	bold
meta.function-parameters.lisp	#076678	—
markup.underline	—	underline
markup.bold	#af3a03	bold
markup.italic	—	italic
markup.heading, entity.name.section	#b57614	bold
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#076678	underline
markup.underline.link, markup.underline.link.image	#665c54	—
markup.inline.raw, markup.raw.restructuredtext	#427b58	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#427b58	—
entity.name.directive.restructuredtext, markup.quote	#79740e	—
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext, markup.punctuation.quote.beginning, markup.punctuation.list.beginning	#8f3f71	—
meta.separator.markdown	#665c54	—
punctuation.definition.constant.restructuredtext	#8f3f71	—
markup.inserted	#98971a	—
markup.deleted	#cc241d	—
markup.changed	#458588	—
source.go entity.name.import	#79740e	—
source.go entity.name.type	#3c3836	—
keyword.control.cucumber.table	#076678	—
metatag.php	#427b58	—
support.function.git-rebase	#427b58	—
constant.sha.git-rebase	#79740e	—

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