forest-hike

Name: forest-hike
Author: eltabre

Publisher: eltabreThemes in package: 1

Feel like you are hiking through a forest while coding

Open in VS Code GitHub

VS Code preview

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

forest-hike — Forest Hike — Pine

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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}!`;
}

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.background#241C15
activityBar.border#3B2A1A
activityBar.foreground#E8E2D4
activityBar.inactiveForeground#6B665C
activityBarBadge.background#6B4232
activityBarBadge.foreground#F2EEE4
badge.background#6B4232
badge.foreground#F2EEE4
breadcrumb.activeSelectionForeground#C9944A
breadcrumb.background#241C15
breadcrumb.focusForeground#E8E2D4
breadcrumb.foreground#A8A296
breadcrumbPicker.background#20261D
button.background#3A5C42
button.foreground#F2EEE4
button.hoverBackground#4A7856
button.secondaryBackground#4A3B2C
button.secondaryForeground#F2EEE4
button.secondaryHoverBackground#3B2A1A
contrastBorder#3B2A1A
descriptionForeground#A8A296
diffEditor.border#3B2A1A
diffEditor.diagonalFill#3B2A1A
diffEditor.insertedLineBackground#6B8F7120
diffEditor.insertedTextBackground#6B8F7130
diffEditor.removedLineBackground#B5533C20
diffEditor.removedTextBackground#B5533C30
disabledForeground#6B665C
dropdown.background#20261D
dropdown.border#3B2A1A
dropdown.foreground#E8E2D4
dropdown.listBackground#20261D
editor.background#182018
editor.findMatchBackground#E0A45855
editor.findMatchBorder#E0A458
editor.findMatchHighlightBackground#E0A4582A
editor.foreground#E8E2D4
editor.hoverHighlightBackground#9CCC652A
editor.inactiveSelectionBackground#9CCC6530
editor.lineHighlightBackground#243426
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#20261D80
editor.selectionBackground#9CCC6555
editor.selectionHighlightBackground#9CCC653A
editor.wordHighlightBackground#7FCABE33
editor.wordHighlightStrongBackground#7FCABE55
editorBracketHighlight.foreground1#6B4423
editorBracketHighlight.foreground2#3B2A1A
editorBracketHighlight.foreground3#C99B6E
editorBracketHighlight.foreground4#6B4423
editorBracketHighlight.foreground5#3B2A1A
editorBracketHighlight.foreground6#C99B6E
editorBracketHighlight.unexpectedBracket.foreground#D9534F
editorBracketMatch.background#6B442330
editorBracketMatch.border#6B4423
editorBracketPairGuide.activeBackground1#6B4423
editorBracketPairGuide.activeBackground2#3B2A1A
editorBracketPairGuide.activeBackground3#C99B6E
editorBracketPairGuide.background1#3B2A1A
editorBracketPairGuide.background2#6B4423
editorBracketPairGuide.background3#C99B6E
editorCodeLens.foreground#6B8F71
editorCursor.foreground#F2D06B
editorError.border#00000000
editorError.foreground#D9534F
editorGhostText.foreground#6B8F7199
editorGroup.border#3B2A1A
editorGroupHeader.noTabsBackground#20261D
editorGroupHeader.tabsBackground#20261D
editorGroupHeader.tabsBorder#3B2A1A
editorGutter.addedBackground#6B8F71
editorGutter.background#182018
editorGutter.deletedBackground#B5533C
editorGutter.modifiedBackground#C9944A
editorHint.foreground#8FB897
editorHoverWidget.background#20261D
editorHoverWidget.border#6B4423
editorIndentGuide.activeBackground1#6B4423
editorIndentGuide.background1#3B2A1A
editorInfo.foreground#7FCABE
editorLineNumber.activeForeground#C9944A
editorLineNumber.foreground#4A5C46
editorMarkerNavigation.background#20261D
editorMarkerNavigationError.background#D9534F
editorMarkerNavigationInfo.background#7FCABE
editorMarkerNavigationWarning.background#E0A458
editorOverviewRuler.addedForeground#6B8F71
editorOverviewRuler.border#3B2A1A
editorOverviewRuler.deletedForeground#B5533C
editorOverviewRuler.errorForeground#D9534F
editorOverviewRuler.findMatchForeground#E0A45888
editorOverviewRuler.modifiedForeground#C9944A
editorOverviewRuler.warningForeground#E0A458
editorRuler.foreground#3B2A1A
editorSuggestWidget.background#20261D
editorSuggestWidget.border#3B2A1A
editorSuggestWidget.foreground#E8E2D4
editorSuggestWidget.highlightForeground#E0A458
editorSuggestWidget.selectedBackground#2A2320
editorWarning.border#00000000
editorWarning.foreground#E0A458
editorWhitespace.foreground#3B2A1A
editorWidget.background#20261D
editorWidget.border#6B4423
editorWidget.foreground#E8E2D4
editorWidget.resizeBorder#6B4423
errorForeground#D9534F
extensionButton.prominentBackground#3A5C42
extensionButton.prominentForeground#F2EEE4
extensionButton.prominentHoverBackground#4A7856
focusBorder#6B4423
foreground#E8E2D4
gitDecoration.addedResourceForeground#6B8F71
gitDecoration.conflictingResourceForeground#D9534F
gitDecoration.deletedResourceForeground#B5533C
gitDecoration.ignoredResourceForeground#6B665C
gitDecoration.modifiedResourceForeground#C9944A
gitDecoration.submoduleResourceForeground#7FCABE
gitDecoration.untrackedResourceForeground#8FB897
input.background#182018
input.border#3B2A1A
input.foreground#E8E2D4
input.placeholderForeground#6B665C
inputOption.activeBorder#6B4423
inputValidation.errorBorder#D9534F
inputValidation.infoBorder#7FCABE
inputValidation.warningBorder#E0A458
list.activeSelectionBackground#2A2320
list.activeSelectionForeground#E8E2D4
list.dropBackground#3B2A1A
list.errorForeground#D9534F
list.focusBackground#2A2320
list.focusForeground#E8E2D4
list.highlightForeground#E0A458
list.hoverBackground#243426
list.inactiveSelectionBackground#243426
list.warningForeground#E0A458
listFilterWidget.background#20261D
listFilterWidget.noMatchesOutline#D9534F
listFilterWidget.outline#6B4423
menu.background#20261D
menu.border#3B2A1A
menu.foreground#E8E2D4
menu.selectionBackground#2A2320
menu.separatorBackground#3B2A1A
menubar.selectionBackground#2A2320
minimap.background#182018
minimap.errorHighlight#D9534F
minimap.findMatchHighlight#E0A45888
minimap.selectionHighlight#9CCC6555
minimap.warningHighlight#E0A458
minimapGutter.addedBackground#6B8F71
minimapGutter.deletedBackground#B5533C
minimapGutter.modifiedBackground#C9944A
minimapSlider.activeBackground#6B442377
minimapSlider.background#6B442330
minimapSlider.hoverBackground#6B442355
notificationCenterHeader.background#2A2320
notifications.background#20261D
notifications.border#3B2A1A
notifications.foreground#E8E2D4
notificationsErrorIcon.foreground#D9534F
notificationsInfoIcon.foreground#7FCABE
notificationsWarningIcon.foreground#E0A458
panel.background#20261D
panel.border#3B2A1A
panelTitle.activeBorder#F2D06B
panelTitle.activeForeground#E8E2D4
panelTitle.inactiveForeground#A8A296
peekView.border#6B4423
peekViewEditor.background#182018
peekViewEditor.matchHighlightBackground#E0A45855
peekViewResult.background#20261D
peekViewResult.selectionBackground#2A2320
peekViewTitle.background#2A2320
peekViewTitleDescription.foreground#A8A296
peekViewTitleLabel.foreground#E8E2D4
pickerGroup.border#3B2A1A
pickerGroup.foreground#C9944A
quickInput.background#20261D
quickInput.foreground#E8E2D4
quickInputList.focusBackground#2A2320
scrollbar.shadow#00000066
scrollbarSlider.activeBackground#6B4423AA
scrollbarSlider.background#6B442344
scrollbarSlider.hoverBackground#6B442377
selection.background#6B442355
settings.dropdownBackground#20261D
settings.dropdownBorder#3B2A1A
settings.headerForeground#E8E2D4
settings.modifiedItemIndicator#C9944A
settings.textInputBackground#182018
settings.textInputBorder#3B2A1A
sideBar.background#241C15
sideBar.border#3B2A1A
sideBar.foreground#E8E2D4
sideBarSectionHeader.background#2A2320
sideBarSectionHeader.border#3B2A1A
sideBarSectionHeader.foreground#E8E2D4
sideBarTitle.foreground#E8E2D4
statusBar.background#2A2320
statusBar.border#3B2A1A
statusBar.debuggingBackground#B5533C
statusBar.debuggingForeground#E8E2D4
statusBar.foreground#E8E2D4
statusBar.noFolderBackground#2A2320
statusBarItem.hoverBackground#3B2A1A
statusBarItem.remoteBackground#3A5C42
statusBarItem.remoteForeground#F2EEE4
tab.activeBackground#182018
tab.activeBorder#6B4423
tab.activeBorderTop#F2D06B
tab.activeForeground#E8E2D4
tab.border#3B2A1A
tab.hoverBackground#243426
tab.inactiveBackground#2A2320
tab.inactiveForeground#A8A296
tab.unfocusedActiveBorder#3B2A1A
terminal.ansiBlack#20261D
terminal.ansiBlue#7FCABE
terminal.ansiBrightBlack#6B665C
terminal.ansiBrightBlue#7FCABE
terminal.ansiBrightCyan#8FB897
terminal.ansiBrightGreen#8FB897
terminal.ansiBrightMagenta#C99B6E
terminal.ansiBrightRed#D9534F
terminal.ansiBrightWhite#EDE9E0
terminal.ansiBrightYellow#F2D06B
terminal.ansiCyan#8FB897
terminal.ansiGreen#9CCC65
terminal.ansiMagenta#C99B6E
terminal.ansiRed#B5533C
terminal.ansiWhite#E8E2D4
terminal.ansiYellow#C9944A
terminal.background#182018
terminal.border#3B2A1A
terminal.foreground#E8E2D4
terminalCursor.foreground#F2D06B
titleBar.activeBackground#2A2320
titleBar.activeForeground#E8E2D4
titleBar.border#3B2A1A
titleBar.inactiveBackground#20261D
titleBar.inactiveForeground#A8A296
tree.indentGuidesStroke#3B2A1A
walkThrough.embeddedEditorBackground#20261D
welcomePage.background#182018
welcomePage.tileBackground#20261D
widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#7CA07E	italic
variable, variable.other.readwrite, variable.other.object, string constant.other.placeholder	#C99B6E	—
constant.other.color	#B5533C	—
invalid, invalid.illegal	#D9534F	—
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.flow.python, keyword.control.import.python, keyword.operator.logical, storage.type, storage.type.function, storage.type.function.python, storage.type.class, storage.type.class.python, storage.modifier	#9CCC65	—
punctuation.section.parens, punctuation.section.brackets, punctuation.section.braces, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.separator, punctuation.definition, punctuation.accessor	#B08552	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter	#8FB897	—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method	#7FCABE	—
meta.block variable.other	#C99B6E	—
support.other.variable, string.other.link	#C99B6E	—
constant.numeric, constant.language, constant.character	#D64550	—
support.constant, constant.escape, variable.parameter, keyword.other.unit, keyword.other	#B5533C	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#C9944A	—
entity.name, entity.name.class, entity.name.type.class, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#8FB897	—
support.type	#7FCABE	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#7FCABE	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#D9534F	—
variable.language	#D9534F	italic
entity.name.method.js	#7FCABE	italic
meta.class-method.js entity.name.function.js, variable.function.constructor	#7FCABE	—
entity.other.attribute-name	#C99B6E	—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name	#8FB897	italic
entity.other.attribute-name.class	#8FB897	—
source.sass keyword.control	#7FCABE	—
markup.inserted	#6B8F71	—
markup.deleted	#B5533C	—
markup.changed	#C9944A	—
string.regexp	#C9944A	—
constant.character.escape	#7FCABE	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#7FCABE	italic
source.js constant.other.object.key.js string.unquoted.label.js	#D9534F	italic
source.json meta.structure.dictionary.json support.type.property-name.json	#8FB897	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C9944A	—
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	#B5533C	—
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	#D9534F	—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C99B6E	—
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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#7FCABE	—
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 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	#8FB897	—
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#9CCC65	—
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 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 meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#C9944A	—
text.html.markdown, punctuation.definition.list_item.markdown	#E8E2D4	—
text.html.markdown markup.inline.raw.markdown	#C9944A	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#6B4423	—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#8FB897	—
markup.italic	#C99B6E	italic
markup.bold, markup.bold string	#C99B6E	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#C99B6E	bold
markup.underline	#B5533C	underline
markup.quote punctuation.definition.blockquote.markdown	#6B8F71	—
markup.quote	—	italic
string.other.link.title.markdown	#7FCABE	—
string.other.link.description.title.markdown	#C99B6E	—
constant.other.reference.link.markdown	#C9944A	—
markup.raw.block	#C99B6E	—
markup.raw.block.fenced.markdown	#00000050	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end	#E8E2D4	—
variable.language.fenced.markdown	#6B8F71	—
meta.separator	#6B8F71	bold
markup.table	#E8E2D4	—