Gruber Fruity Theme Pack

Name: Gruber Fruity Theme Pack
Author: Smups

Publisher: SmupsThemes in package: 11

minimalist fruity light and dark themes inspired by Gruber

Open in VS Code GitHub

Color themes

VS Code preview

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

Gruber Fruity Theme Pack — Gruber Peach Dark 🍑

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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...
~/my-project

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBorder#FC8D6E
activityBar.background#181818
activityBar.foreground#FC8D6E
activityBar.inactiveForeground#dddddd
badge.background#FC8D6E
badge.foreground#181818
breadcrumb.activeSelectionForeground#73c936
breadcrumb.focusForeground#FC8D6E
button.background#FC8D6E
button.foreground#181818
button.hoverBackground#FC8D6E
checkbox.background#181818
checkbox.border#FC8D6E
checkbox.foreground#FC8D6E
diffEditorGutter.insertedLineBackground#73c936
editor.background#181818
editor.foreground#dddddd
editor.selectionBackground#cccccc22
editorBracketHighlight.foreground1#dddddd
editorBracketHighlight.foreground2#6b6b6b
editorBracketHighlight.foreground3#dddddd
editorBracketHighlight.unexpectedBracket.foreground#FC8D6E
editorCursor.foreground#FC8D6E
editorGutter.addedBackground#73c936
editorGutter.deletedBackground#FC8D6E
editorGutter.modifiedBackground#FC8D6E
editorLineNumber.activeForeground#FC8D6E
editorLineNumber.foreground#6b6b6b
editorSuggestWidget.focusHighlightForeground#181818
editorSuggestWidget.highlightForeground#FC8D6E
focusBorder#FC8D6E
foreground#dddddd
icon.foreground#FC8D6E
list.activeSelectionBackground#FC8D6E
list.activeSelectionForeground#181818
list.activeSelectionIconForeground#181818
list.focusHighlightForeground#181818
list.highlightForeground#FC8D6E
sash.hoverBorder#FC8D6E
sideBar.background#282828
sideBarSectionHeader.background#282828
sideBarSectionHeader.foreground#FC8D6E
statusBar.background#FC8D6E
statusBar.debuggingBackground#73c936
statusBar.focusBorder#dddddd
statusBar.foreground#181818
statusBar.noFolderBackground#FC8D6E
statusBar.noFolderForeground#181818
statusBarItem.errorBackground#938bb7
statusBarItem.errorForeground#181818
statusBarItem.focusBorder#dddddd
statusBarItem.remoteBackground#00d5ff
statusBarItem.remoteForeground#181818
statusBarItem.warningBackground#282828
statusBarItem.warningForeground#FC8D6E
tab.activeBorder#FC8D6E
tab.unfocusedActiveBorder#181818
textCodeBlock.background#181818
textLink.activeForeground#73c936
textLink.foreground#FC8D6E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.brackets.curly	#dddddd	—
comment, punctuation.definition.comment	#6b6b6b	italic
keyword.control, keyword.other, keyword.operator.new, storage.modifier, storage.type	#FC8D6E	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#FC8D6E
string	#73c936	—
constant, variable.other.constant	#938bb7	—
variable.language.self, variable.language.super, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.special.cls, variable.parameter.function.language.special.cls	#73c936	italic
meta.attribute, meta.macro, support.function.macro	#00d5ff	—
entity.name.type, entity.other.inherited-class, storage.type.java, storage.type.generic.java, storage.type.object.array.java, support.type.julia	#dddddd	underline
variable.other.metavariable.name	—	italic
variable.other.metavariable.specifier	#FC8D6E
entity.name.type.result, entity.name.type.option	#FC8D6E	bold
entity.name.type.lifetime	#938bb7
support.variable.magic.python, support.function.magic.python	#00d5ff	italic
meta.function.decorator.python	#00d5ff
punctuation.separator.colon.python, punctuation.separator.period.python, punctuation.section.function.begin.python, punctuation.section.function.lambda.begin.python, punctuation.section.class.begin.python, punctuation.separator.annotation.result.python, invalid.deprecated.semicolon.python	#FC8D6E
keyword.other.unit.hexadecimal	#938bb7
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#FC8D6E
meta.preprocessor.c, entity.name.function.preprocessor.c, meta.preprocessor.macro.c, entity.name.function.preprocessor.cpp	#00d5ff
punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#FC8D6E
storage.modifier.array.bracket.square.c	#dddddd
punctuation.separator.namespace.access.cpp	#FC8D6E
storage.modifier.import.java, storage.modifier.package.java	#dddddd
storage.type.annotation.java, punctuation.definition.annotation.java	#00d5ff
markup.heading	#FC8D6E	bold
markup.italic	#938bb7	italic
markup.bold	#938bb7	bold
markup.quote	#FC8D6E
support.type.property-name.json	#FC8D6E	—
meta.tag.xml	#FC8D6E	—
meta.tag.table.toml	#FC8D6E	bold
keyword.local.lua	#FC8D6E	bold
meta.tag.metadata.doctype.html	#00d5ff
entity.name.tag.html	#FC8D6E
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#FC8D6E	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#938bb7
punctuation.separator.key-value.css	#FC8D6E
keyword.operator.arithmetic.css	#FC8D6E
support.function.attr.css, support.function.calc.css, support.function.conic-gradient.css, support.function.counter.css, support.function.cubic-bezier.css, support.function.hsl.css, support.function.hsla.css, support.function.linear-gradient.css, support.function.max.css, support.function.min.css, support.function.radial-gradient.css, support.function.repeating-conic-gradient.css, support.function.repeating-linear-gradient.css, support.function.repeating-radial-gradient.css, support.function.rgb.css, support.function.rgba.css, support.function.var.css	#00d5ff
keyword.package.go, keyword.type.go, keyword.struct.go, keyword.function.go, keyword.var.go, keyword.import.go, keyword.interface.go, keyword.map.go, keyword.channel.go, keyword.const.go	#FC8D6E	bold
storage.type.string.go, storage.type.int.go, storage.type.error.go, storage.type.byte.go, storage.type.numeric.go, storage.type.boolean.go, storage.type.rune.go, storage.type.uintptr.go	#FC8D6E
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#FC8D6E	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#FC8D6E
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#FC8D6E
support.function.builtin.zig	#00d5ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#938bb7
variable.constant.error.zig	#dddddd	underline

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