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 Cherry Light 🍒

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.activeBorder#d61e4c
activityBar.background#fefefe
activityBar.foreground#d61e4c
activityBar.inactiveForeground#181818
badge.background#d61e4c
badge.foreground#fefefe
breadcrumb.activeSelectionForeground#5caf21
breadcrumb.focusForeground#d61e4c
button.background#d61e4c
button.foreground#fefefe
button.hoverBackground#d61e4c
checkbox.background#fefefe
checkbox.border#d61e4c
checkbox.foreground#d61e4c
diffEditorGutter.insertedLineBackground#5caf21
editor.background#fefefe
editor.foreground#181818
editor.selectionBackground#18181822
editorBracketHighlight.foreground1#181818
editorBracketHighlight.foreground2#6b6b6b
editorBracketHighlight.foreground3#181818
editorBracketHighlight.unexpectedBracket.foreground#d61e4c
editorCursor.foreground#d61e4c
editorGutter.addedBackground#5caf21
editorGutter.deletedBackground#d61e4c
editorGutter.modifiedBackground#d61e4c
editorLineNumber.activeForeground#d61e4c
editorLineNumber.foreground#6b6b6b
editorSuggestWidget.focusHighlightForeground#fefefe
editorSuggestWidget.highlightForeground#d61e4c
focusBorder#d61e4c
foreground#181818
icon.foreground#d61e4c
list.activeSelectionBackground#d61e4c
list.activeSelectionForeground#fefefe
list.activeSelectionIconForeground#fefefe
list.focusHighlightForeground#fefefe
list.highlightForeground#d61e4c
sash.hoverBorder#d61e4c
sideBar.background#efefef
sideBarSectionHeader.background#efefef
sideBarSectionHeader.foreground#d61e4c
statusBar.background#d61e4c
statusBar.debuggingBackground#5caf21
statusBar.focusBorder#181818
statusBar.foreground#fefefe
statusBar.noFolderBackground#d61e4c
statusBar.noFolderForeground#fefefe
statusBarItem.errorBackground#938bb7
statusBarItem.errorForeground#fefefe
statusBarItem.focusBorder#181818
statusBarItem.remoteBackground#0088ff
statusBarItem.remoteForeground#fefefe
statusBarItem.warningBackground#efefef
statusBarItem.warningForeground#d61e4c
tab.activeBorder#d61e4c
tab.unfocusedActiveBorder#fefefe
textCodeBlock.background#fefefe
textLink.activeForeground#5caf21
textLink.foreground#d61e4c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
punctuation.brackets.curly	#181818	—
comment, punctuation.definition.comment	#6b6b6b	italic
keyword.control, keyword.other, keyword.operator.new, storage.modifier, storage.type, keyword.operator.instanceof.java	#d61e4c	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#d61e4c
string	#5caf21	—
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	#5caf21	italic
meta.attribute, meta.macro, support.function.macro	#0088ff	—
entity.name.type, entity.other.inherited-class, storage.type.java, storage.type.generic.java, storage.type.object.array.java, support.type.julia	#181818	underline
variable.other.metavariable.name	—	italic
variable.other.metavariable.specifier	#d61e4c
entity.name.type.result, entity.name.type.option	#d61e4c	bold
entity.name.type.lifetime	#938bb7
support.variable.magic.python, support.function.magic.python	#0088ff	italic
meta.function.decorator.python	#0088ff
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	#d61e4c
keyword.other.unit.hexadecimal	#938bb7
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#d61e4c
meta.preprocessor.c, entity.name.function.preprocessor.c, meta.preprocessor.macro.c, entity.name.function.preprocessor.cpp	#0088ff
punctuation.separator.pointer-access.c, punctuation.separator.pointer-access.cpp	#d61e4c
storage.modifier.array.bracket.square.c	#181818
punctuation.separator.namespace.access.cpp	#d61e4c
storage.modifier.import.java, storage.modifier.package.java	#181818
storage.type.annotation.java, punctuation.definition.annotation.java	#0088ff
markup.heading	#d61e4c	bold
markup.italic	#938bb7	italic
markup.bold	#938bb7	bold
markup.quote	#d61e4c
support.type.property-name.json	#d61e4c	—
meta.tag.xml	#d61e4c	—
meta.tag.table.toml	#d61e4c	bold
keyword.local.lua	#d61e4c	bold
meta.tag.metadata.doctype.html	#0088ff
entity.name.tag.html	#d61e4c
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#d61e4c	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#938bb7
punctuation.separator.key-value.css	#d61e4c
keyword.operator.arithmetic.css	#d61e4c
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	#0088ff
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	#d61e4c	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	#d61e4c
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#d61e4c	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#d61e4c
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#d61e4c
support.function.builtin.zig	#0088ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#938bb7
variable.constant.error.zig	#181818	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}!`;
}