Geal Theme

Name: Geal Theme
Author: damc

Publisher: damcThemes in package: 1

Minimalist theme, enable you to focus on just writing code

Open in VS Code GitHub

VS Code preview

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

Geal Theme — Light (Geal)

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#3D5072
activityBar.activeBorder#fdfdfd
activityBar.background#3D5072
activityBar.border#91A0B9
activityBar.foreground#91A0B9
activityBar.inactiveForeground#91A0B9
activityBarBadge.background#ffde85
activityBarBadge.foreground#000000
badge.background#ffde85
badge.foreground#000000
button.background#ededed
button.foreground#636363
editor.background#ffffff
editor.findMatchBackground#FFBC5D
editor.findMatchBorder#FFBC5D
editor.findMatchHighlightBackground#00000000
editor.findMatchHighlightBorder#FFBC5D
editor.findRangeHighlightBackground#00000000
editor.findRangeHighlightBorder#FFBC5D
editor.foreground#000
editor.inactiveSelectionBackground#e0e0e0
editor.lineHighlightBackground#FFFAEE
editor.lineHighlightBorder#FFFAEE
editor.rangeHighlightBackground#00000000
editor.rangeHighlightBorder#00000000
editor.selectionBackground#FEE6FF
editor.selectionHighlightBackground#00000000
editor.selectionHighlightBorder#FFBC5D
editorBracketHighlight.foreground1#ff0000
editorBracketHighlight.foreground2#ff0000
editorBracketHighlight.foreground3#ff0000
editorBracketHighlight.foreground4#ff0000
editorBracketHighlight.foreground5#ff0000
editorBracketHighlight.foreground6#ff0000
editorBracketHighlight.unexpectedBracket.foreground#ff0000
editorCursor.foreground#007ACC
editorGroup.emptyBackground#F1F0F0
editorGroupHeader.tabsBackground#f3f2f2
editorGroupHeader.tabsBorder#00000000
editorGutter.background#ffffff
editorIndentGuide.background#d2d2d2
editorLineNumber.activeForeground#b6b2b2
editorLineNumber.foreground#b6b2b2
focusBorder#00000000
gitDecoration.addedResourceForeground#448C27
gitDecoration.conflictingResourceForeground#cd974b
gitDecoration.deletedResourceForeground#F05050
gitDecoration.ignoredResourceForeground#BBBBBB
gitDecoration.modifiedResourceForeground#007ACC
gitDecoration.submoduleResourceForeground#7A3E9D
gitDecoration.untrackedResourceForeground#9f9f9f
input.border#C6C6C6
list.activeSelectionBackground#e8e8e8
list.activeSelectionForeground#313131
list.focusBackground#eeeeee
list.focusForeground#313131
list.hoverBackground#eeeeee
list.hoverForeground#313131
list.inactiveSelectionBackground#e8e8e8
list.inactiveSelectionForeground#313131
panel.background#F7F7F7
panel.border#DDDDDD
peekView.border#bababa
peekViewEditor.background#f7f7f7
peekViewResult.matchHighlightBackground#FFBC5D
peekViewResult.selectionBackground#e8e8e8
peekViewResult.selectionForeground#313131
scrollbar.shadow#00000000
scrollbarSlider.background#a6a6a64f
scrollbarSlider.hoverBackground#a6a6a67a
sideBar.background#fdfdfd
sideBar.border#eeeded
sideBar.foreground#313131
sideBarSectionHeader.background#3D5072
sideBarSectionHeader.foreground#91A0B9
sideBarTitle.foreground#3D5072
statusBar.background#3D5072
statusBar.border#3D5072
statusBar.debuggingBackground#FFBC5D
statusBar.debuggingForeground#000
statusBar.foreground#91A0B9
statusBar.noFolderBackground#3D5072
statusBar.noFolderForeground#91A0B9
statusBarItem.activeBackground#3D5072
statusBarItem.hoverBackground#44597e
statusBarItem.prominentHoverBackground#cacaca
statusBarItem.warningBackground#91A0B9
tab.activeBackground#ffffff
tab.activeBorder#ffffff
tab.activeForeground#000000
tab.border#00000000
tab.inactiveBackground#f3f2f2
tab.inactiveForeground#b6b4b4
terminal.ansiBlack#000000
terminal.ansiBlue#325CC0
terminal.ansiBrightBlack#777777
terminal.ansiBrightBlue#007ACC
terminal.ansiBrightCyan#00AACB
terminal.ansiBrightGreen#60CB00
terminal.ansiBrightMagenta#E64CE6
terminal.ansiBrightRed#F05050
terminal.ansiBrightWhite#FFFFFF
terminal.ansiBrightYellow#d6a96a
terminal.ansiCyan#0083B2
terminal.ansiGreen#448C27
terminal.ansiMagenta#7A3E9D
terminal.ansiRed#AA3731
terminal.ansiWhite#BBBBBB
terminal.ansiYellow#cd974b
terminal.foreground#000
titleBar.activeBackground#F3F2F2
titleBar.activeForeground#F3F2F2
titleBar.border#eeeded
titleBar.inactiveBackground#F3F2F2
titleBar.inactiveForeground#F3F2F2
tree.indentGuidesStroke#a6a6a6
widget.shadow#DDDDDD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#008000	italic
string, string.regexp, entity.name.import, support.type.property-name	#008080	—
constant.character.escape	#777777	—
punctuation	#777777	—
entity.name.function.preprocessor, constant.other.symbol, constant.character, constant.keyword, constant.numeric, constant	#AD4011	—
keyword.operator	#000000	—
keyword, keyword.operator.new, storage.modifier, storage.type.primitive, storage.type.class, storage.type	#1100FF	—
entity.name, entity.other, support.function, support.class, meta.function-call.generic, support.type	#0000AA	—
entity.name.tag, punctuation.definition.tag	#1100FF	—
entity.name.variable, storage.modifier.import	#000000	—

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