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

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	#4400b3	bold
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.logical, entity.name.type.primitive, entity.name.type.numeric, storage.type.primitive	#4400b3
string	#5caf21	—
constant, variable.other.constant	#d16693	—
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	#4400b3
entity.name.type.result, entity.name.type.option	#4400b3	bold
entity.name.type.lifetime	#d16693
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	#4400b3
keyword.other.unit.hexadecimal	#d16693
storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c	#4400b3
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	#4400b3
storage.modifier.array.bracket.square.c	#181818
punctuation.separator.namespace.access.cpp	#4400b3
storage.modifier.import.java, storage.modifier.package.java	#181818
storage.type.annotation.java, punctuation.definition.annotation.java	#0088ff
markup.heading	#4400b3	bold
markup.italic	#d16693	italic
markup.bold	#d16693	bold
markup.quote	#4400b3
support.type.property-name.json	#4400b3	—
meta.tag.xml	#4400b3	—
meta.tag.table.toml	#4400b3	bold
keyword.local.lua	#4400b3	bold
meta.tag.metadata.doctype.html	#0088ff
entity.name.tag.html	#4400b3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css	#4400b3	bold
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css	#d16693
punctuation.separator.key-value.css	#4400b3
keyword.operator.arithmetic.css	#4400b3
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	#4400b3	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	#4400b3
keyword.storage.zig, keyword.default.zig, keyword.statement.zig, keyword.structure.zig	#4400b3	bold
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#4400b3
keyword.type.zig, keyword.type.integer.zig, keyword.type.c.zig	#4400b3
support.function.builtin.zig	#0088ff	italic
keyword.constant.bool.zig, keyword.constant.default.zig	#d16693
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}!`;
}