Dark Gruvbox with Italics

Name: Dark Gruvbox with Italics
Author: Santiago Bandiera

Publisher: Santiago BandieraThemes in package: 1

VSCode Color Theme

Open in VS Code GitHub

VS Code preview

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

Dark Gruvbox with Italics — Dark Gruvbox with Italics

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#1d2021
activityBar.border#1d202100
activityBar.dropBackground#8ec07c40
activityBar.foreground#928374
activityBarBadge.background#fe8019
activityBarBadge.foreground#1d2021
badge.background#fabd2f
badge.foreground#1d2021
breadcrumb.background#282828
breadcrumb.focusForeground#bdae93
breadcrumb.foreground#928374
breadcrumbPicker.background#1d2021
button.background#458588
button.foreground#1d2021
button.hoverBackground#07667880
debugToolBar.background#1d2021
diffEditor.insertedTextBackground#b8bb2630
diffEditor.removedTextBackground#fb493430
diffEditorGutter.insertedLineBackground#b8bb2613
diffEditorGutter.removedLineBackground#fb493413
dropdown.background#1d2021
dropdown.border#3c3836
dropdown.foreground#928374
editor.background#1d2021
editor.findMatchBackground#d3869b80
editor.findMatchHighlightBackground#d3869b4d
editor.findRangeHighlightBackground#d3869b26
editor.foreground#928374
editor.hoverHighlightBackground#689d6a50
editor.lineHighlightBackground#3c383660
editor.lineHighlightBorder#1d202100
editor.selectionBackground#689d6a40
editor.selectionHighlightBackground#92837426
editor.wordHighlightBackground#83a59833
editor.wordHighlightStrongBackground#83a59880
editorBracketHighlight.foreground1#bdae93
editorBracketHighlight.foreground2#689d6a
editorBracketHighlight.foreground3#458588
editorBracketHighlight.foreground4#b16286
editorBracketHighlight.foreground5#d65d0e
editorBracketHighlight.foreground6#d79921
editorBracketHighlight.unexpectedBracket.foreground#cc241d
editorBracketMatch.background#92837480
editorBracketMatch.border#1d202100
editorCodeLens.foreground#665c5490
editorCursor.background#1d2021
editorCursor.foreground#fabd2f
editorError.foreground#cc241d
editorGroup.border#5049454d
editorGroup.dropBackground#8ec07c40
editorGroup.emptyBackground#1d2021
editorGroupHeader.noTabsBackground#1d2021
editorGroupHeader.tabsBackground#1d2021
editorGutter.addedBackground#b8bb26
editorGutter.background#1d202100
editorGutter.deletedBackground#fb4934
editorGutter.modifiedBackground#fabd2f
editorHoverWidget.background#282828
editorHoverWidget.border#3c3836
editorIndentGuide.background#50494533
editorInfo.foreground#d79921
editorLineNumber.activeForeground#fabd2f
editorLineNumber.foreground#504945
editorLink.activeForeground#928374
editorOverviewRuler.addedForeground#fabd2f
editorOverviewRuler.border#1d202100
editorOverviewRuler.commonContentForeground#928374
editorOverviewRuler.currentContentForeground#458588
editorOverviewRuler.deletedForeground#fabd2f
editorOverviewRuler.errorForeground#fb4934
editorOverviewRuler.findMatchForeground#d3869b4d
editorOverviewRuler.incomingContentForeground#689d6a
editorOverviewRuler.infoForeground#689d6a
editorOverviewRuler.modifiedForeground#fabd2f
editorOverviewRuler.rangeHighlightForeground#d3869b26
editorOverviewRuler.selectionHighlightForeground#504945
editorOverviewRuler.warningForeground#d65d0e
editorOverviewRuler.wordHighlightForeground#83a59866
editorOverviewRuler.wordHighlightStrongForeground#83a5989a
editorRuler.foreground#50494533
editorStickyScroll.background#2a2d2e
editorStickyScrollHover.background#3c3836
editorSuggestWidget.background#1d2021
editorSuggestWidget.border#3c3836
editorSuggestWidget.focusHighlightForeground#83a598
editorSuggestWidget.foreground#928374
editorSuggestWidget.highlightForeground#458588
editorSuggestWidget.selectedBackground#3c3836
editorWarning.foreground#d65d0e
editorWhitespace.foreground#665c5426
editorWidget.background#1d2021
editorWidget.border#3c3836
errorForeground#fb4934
extensionButton.prominentBackground#fabd2fff
extensionButton.prominentForeground#1d2021
extensionButton.prominentHoverBackground#fabd2fc0
focusBorder#3c3836
foreground#928374
gitDecoration.conflictingResourceForeground#b16286
gitDecoration.deletedResourceForeground#cc241d
gitDecoration.ignoredResourceForeground#504945
gitDecoration.modifiedResourceForeground#458588
gitDecoration.untrackedResourceForeground#98971a
input.background#92837405
input.border#3c3836
input.foreground#928374
input.placeholderForeground#92837460
inputValidation.errorBackground#cc241d80
inputValidation.errorBorder#fb4934
inputValidation.errorForeground#fb4934
inputValidation.infoBackground#d7992180
inputValidation.infoBorder#fabd2f
inputValidation.infoForeground#fabd2f
inputValidation.warningBackground#d65d0e80
inputValidation.warningBorder#fe8019
inputValidation.warningForeground#fe8019
list.activeSelectionBackground#3c3836
list.activeSelectionForeground#bdae93
list.dropBackground#8ec07c40
list.focusBackground#3c3836
list.focusForeground#928374
list.focusHighlightForeground#83a598
list.highlightForeground#458588
list.hoverBackground#3c383640
list.hoverForeground#928374
list.inactiveSelectionBackground#3c383680
list.inactiveSelectionForeground#bdae93
menu.background#1d2021
menu.foreground#928374
menu.selectionBackground#458588
menu.selectionBorder#458588
menu.selectionForeground#1d2021
menubar.selectionBackground#458588
menubar.selectionBorder#458588
menubar.selectionForeground#1d2021
merge.border#1d202100
merge.currentContentBackground#45858820
merge.currentHeaderBackground#45858840
merge.incomingContentBackground#689d6a20
merge.incomingHeaderBackground#689d6a40
panel.border#5049454d
panelTitle.activeForeground#928374
peekView.border#3c3836
peekViewEditor.background#3c383650
peekViewEditorGutter.background#3c383650
peekViewResult.background#3c383650
peekViewResult.fileForeground#928374
peekViewResult.matchHighlightBackground#fabd2f30
peekViewResult.selectionBackground#fabd2f30
peekViewResult.selectionForeground#fabd2f30
peekViewTitle.background#3c383650
peekViewTitleDescription.foreground#665c54
peekViewTitleLabel.foreground#928374
progressBar.background#d79921
sash.hoverBorder#fabd2f
scrollbar.shadow#1d2021
scrollbarSlider.activeBackground#d79921
scrollbarSlider.background#50494599
scrollbarSlider.hoverBackground#665c54
selection.background#689d6a40
settings.headerForeground#bdae93
sideBar.background#1d2021
sideBar.border#5049454d
sideBar.foreground#928374
sideBarSectionHeader.background#1d202100
sideBarSectionHeader.foreground#928374
sideBarTitle.foreground#928374
statusBar.background#282828
statusBar.debuggingBackground#fabd2f
statusBar.debuggingBorder#5049454d
statusBar.debuggingForeground#1d2021
statusBar.foreground#bdae93
statusBar.noFolderBackground#282828
statusBar.noFolderBorder#1d202100
tab.activeBackground#282828
tab.activeBorder#1d2021
tab.activeBorderTop#fb4934
tab.activeForeground#bdae93
tab.border#1d2021
tab.inactiveBackground#3c3836
tab.inactiveForeground#928374
tab.unfocusedActiveBorder#1d202100
tab.unfocusedActiveForeground#928374
tab.unfocusedInactiveForeground#665c54
terminal.ansiBlack#3c3836
terminal.ansiBlue#458588
terminal.ansiBrightBlack#928374
terminal.ansiBrightBlue#83a598
terminal.ansiBrightCyan#8ec07c
terminal.ansiBrightGreen#b8bb26
terminal.ansiBrightMagenta#d3869b
terminal.ansiBrightRed#fb4934
terminal.ansiBrightWhite#ebdbb2
terminal.ansiBrightYellow#fabd2f
terminal.ansiCyan#689d6a
terminal.ansiGreen#98971a
terminal.ansiMagenta#b16286
terminal.ansiRed#cc241d
terminal.ansiWhite#a89984
terminal.ansiYellow#d79921
terminal.background#1d2021
terminal.foreground#928374
textLink.activeForeground#458588
textLink.foreground#83a598
titleBar.activeBackground#1d2021
titleBar.activeForeground#928374
titleBar.inactiveBackground#1d2021
widget.shadow#1d202130

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
source, text.html	#ebdbb2	—
emphasis, storage, comment, entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.tag.jade, entity.other.attribute-name.tag.pug, markup.italic, keyword.control, variable.language	—	italic
strong	—	bold
header	#fabd2f	—
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	#bdae93	—
comment, punctuation.definition.comment, unused.comment, wildcard.comment	#7c6f64	italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class, comment.block.documentation storage.type.class punctuation	#fabd2f	italic
comment.block.documentation variable, comment.block.documentation variable.other	#bdae93	italic
constant, constant.numeric, constant.language, support.constant, meta.preprocessor.numeric, keyword.other.unit	#d3869b	—
string, meta.preprocessor.string	#b8bb26	—
constant.character, constant.regexp	#fe8019	—
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	#fe8019	—
string.regexp	#b8bb26	—
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, support.other.parenthesis.regexp	#bdae93	—
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	#d3869b	—
keyword.operator.quantifier.regexp	#d3869b	—
string.regexp keyword.other	#bdae93	—
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def	#fb4934	—
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	#8ec07c	—
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	#fabd2f	—
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	#fabd2f	—
keyword, punctuation.definition.keyword	#fb4934	—
keyword.operator	#bdae93	—
keyword.operator.ternary	#fb4934	—
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	#fb4934	—
keyword.control, keyword.control punctuation.definition.keyword	#fb4934	—
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	#fb4934	—
storage.modifier.import.java, storage.modifier.package.java, variable.language.wildcard.java	#8ec07c	—
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	#83a598	—
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	#ebdbb2	—
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	#8ec07c	—
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	#ebdbb2	—
meta.object-binding-pattern-variable variable.object.property, meta.import variable.other.readwrite, meta.export variable.other.readwrite	#bdae93	—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable	#ebdbb2	—
meta.export.default variable.other.readwrite	#ebdbb2	—
entity.name.function.target.makefile, entity.name.section.toml, variable.other.key.toml, entity.name.tag.yaml	#fabd2f	—
constant.other.date, constant.other.timestamp	#d3869b	—
variable.other.alias.yaml	#83a598	—
source.json meta.structure.dictionary.json support.type.property-name.json	#fabd2f	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#8ec07c	—
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	#83a598	—
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	#fe8019	—
entity.name.tag	#8ec07c	bold
tag.close entity.name.tag	#689d6a	—
entity.other.attribute-name, meta.tag.inline.any.html, meta.tag.sgml	#83a598	—
entity.other.attribute-name.id	#fe8019	—
punctuation.definition.entity.html	#fe8019	—
punctuation.definition.tag	#8ec07c	—
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#bdae93	—
entity.other.attribute-name.parent-selector	#fb4934	—
meta.function-call.arguments	#ebdbb2	—
meta.selectionset.graphql variable	#b8bb26	—
meta.selectionset.graphql meta.arguments variable	#ebdbb2	—
source.shell support.function.builtin	#8ec07c	—
source.shell support.function.builtin	#83a598	—
punctuation.definition.variable.shell, source.shell variable.other	#8ec07c	—
string.interpolated.backtick.shell, string.interpolated.dollar.shell	#8ec07c	—
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string	#ebdbb2	—
meta.scope.prerequisites	#8ec07c	—
entity.name.function.target	#b8bb26	bold
meta.function-parameters.lisp	#83a598	—
markup.underline	—	underline
markup.bold	#fe8019	bold
markup.italic	—	italic
markup.heading, entity.name.section	#fabd2f	bold
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title	#83a598	underline
markup.underline.link, markup.underline.link.image	#bdae93	—
markup.inline.raw, markup.raw.restructuredtext	#8ec07c	—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown	#8ec07c	—
entity.name.directive.restructuredtext, markup.quote	#b8bb26	—
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext, markup.punctuation.quote.beginning, markup.punctuation.list.beginning	#d3869b	—
meta.separator.markdown	#bdae93	—
punctuation.definition.constant.restructuredtext	#d3869b	—
markup.inserted	#98971a	—
markup.deleted	#cc241d	—
markup.changed	#458588	—
source.go entity.name.import	#b8bb26	—
source.go entity.name.type	#ebdbb2	—
keyword.control.cucumber.table	#83a598	—
metatag.php	#8ec07c	—
support.function.git-rebase	#8ec07c	—
constant.sha.git-rebase	#b8bb26	—

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