Helsing Theme

Name: Helsing Theme
Author: Caffeinated Minds

Publisher: Caffeinated MindsThemes in package: 1

A scholarly daylight theme for VS Code with warm paper, graphite text and restrained semantic colour.

Open in VS Code GitHub

VS Code preview

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

Helsing Theme — Helsing

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#EAE5DC
activityBar.border#D6D0C4
activityBar.foreground#2A2A2A
activityBar.inactiveForeground#6B6B6B
activityBarBadge.background#3A7BD5
activityBarBadge.foreground#F4F1EA
button.background#3A7BD5
button.foreground#F4F1EA
button.hoverBackground#4A90E2
button.secondaryBackground#EAE5DC
button.secondaryForeground#2A2A2A
button.secondaryHoverBackground#E6DCC8
descriptionForeground#6B6B6B
diffEditor.diagonalFill#D6D0C4
diffEditor.insertedLineBackground#DCEEDB
diffEditor.insertedTextBackground#DCEEDB
diffEditor.removedLineBackground#F3D9D9
diffEditor.removedTextBackground#F3D9D9
dropdown.background#ECE7DE
dropdown.border#D6D0C4
dropdown.foreground#2A2A2A
editor.background#F4F1EA
editor.findMatchBackground#E8D58B
editor.findMatchHighlightBackground#F1E7B8
editor.findRangeHighlightBackground#EAE5DC
editor.foreground#2A2A2A
editor.hoverHighlightBackground#E6DCC8
editor.inactiveSelectionBackground#EAE5DC
editor.lineHighlightBackground#EFE9DF
editor.selectionBackground#E6DCC8
editor.wordHighlightBackground#E6DCC8
editor.wordHighlightStrongBackground#E8D58B
editorBracketMatch.background#E6DCC8
editorBracketMatch.border#C47A2C
editorCursor.foreground#2A2A2A
editorError.foreground#C23B3B
editorGutter.addedBackground#4C9A5F
editorGutter.background#F4F1EA
editorGutter.deletedBackground#C23B3B
editorGutter.modifiedBackground#7C6EE6
editorHint.foreground#2F8F8B
editorHoverWidget.background#EAE5DC
editorHoverWidget.border#D6D0C4
editorHoverWidget.foreground#2A2A2A
editorIndentGuide.activeBackground#A8A29E
editorIndentGuide.background#D6D0C4
editorInfo.foreground#4A90E2
editorLineNumber.activeForeground#C47A2C
editorLineNumber.foreground#B3ADA4
editorRuler.foreground#D6D0C4
editorSuggestWidget.background#ECE7DE
editorSuggestWidget.border#D6D0C4
editorSuggestWidget.foreground#2A2A2A
editorSuggestWidget.highlightForeground#3A7BD5
editorSuggestWidget.selectedBackground#DDD4C5
editorWarning.foreground#B58900
editorWhitespace.foreground#D6D0C4
editorWidget.background#EAE5DC
editorWidget.border#D6D0C4
errorForeground#C23B3B
focusBorder#3A7BD5
foreground#2A2A2A
icon.foreground#2A2A2A
input.background#ECE7DE
input.border#D6D0C4
input.foreground#2A2A2A
input.placeholderForeground#6B6B6B
inputOption.activeBorder#3A7BD5
inputValidation.errorBorder#C23B3B
inputValidation.infoBorder#4A90E2
inputValidation.warningBorder#B58900
list.activeSelectionBackground#E6DCC8
list.activeSelectionForeground#2A2A2A
list.errorForeground#C23B3B
list.focusOutline#D6D0C4
list.highlightForeground#3A7BD5
list.hoverBackground#DDD4C5
list.inactiveSelectionBackground#EAE5DC
list.warningForeground#B58900
panel.background#EAE5DC
panel.border#D6D0C4
panelTitle.activeBorder#3A7BD5
panelTitle.activeForeground#2A2A2A
panelTitle.inactiveForeground#6B6B6B
peekView.border#D6D0C4
peekViewEditor.background#F4F1EA
peekViewResult.background#EAE5DC
peekViewResult.selectionBackground#E6DCC8
peekViewTitle.background#EAE5DC
peekViewTitleDescription.foreground#6B6B6B
peekViewTitleLabel.foreground#2A2A2A
scrollbarSlider.activeBackground#6B6B6B
scrollbarSlider.background#D6D0C4
scrollbarSlider.hoverBackground#A8A29E
selection.background#E6DCC8
sideBar.background#EAE5DC
sideBar.border#D6D0C4
sideBar.foreground#2A2A2A
sideBarTitle.foreground#2A2A2A
statusBar.background#EAE5DC
statusBar.border#D6D0C4
statusBar.debuggingBackground#C47A2C
statusBar.debuggingForeground#F4F1EA
statusBar.foreground#2A2A2A
statusBar.noFolderBackground#EAE5DC
statusBarItem.hoverBackground#E6DCC8
statusBarItem.prominentBackground#E6DCC8
tab.activeBackground#F4F1EA
tab.activeForeground#2A2A2A
tab.border#D6D0C4
tab.hoverBackground#E6DCC8
tab.inactiveBackground#EAE5DC
tab.inactiveForeground#6B6B6B
terminal.ansiBlack#2A2A2A
terminal.ansiBlue#3A7BD5
terminal.ansiBrightBlack#6B6B6B
terminal.ansiBrightBlue#4A90E2
terminal.ansiBrightCyan#2F8F8B
terminal.ansiBrightGreen#4C9A5F
terminal.ansiBrightMagenta#C05A8C
terminal.ansiBrightRed#C23B3B
terminal.ansiBrightWhite#F4F1EA
terminal.ansiBrightYellow#B58900
terminal.ansiCyan#2F8F8B
terminal.ansiGreen#4C9A5F
terminal.ansiMagenta#C05A8C
terminal.ansiRed#C23B3B
terminal.ansiWhite#EAE5DC
terminal.ansiYellow#B58900
terminal.background#F4F1EA
terminal.foreground#2A2A2A
terminal.selectionBackground#E6DCC8
terminalCursor.foreground#2A2A2A
textBlockQuote.background#EAE5DC
textBlockQuote.border#D6D0C4
textCodeBlock.background#EAE5DC
textLink.activeForeground#4A90E2
textLink.foreground#3A7BD5
textPreformat.foreground#C47A2C
textSeparator.foreground#D6D0C4
widget.border#D6D0C4
widget.shadow#E6DCC8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#6B6B6B	italic
string, string.quoted, string.template	#4C9A5F	—
constant.numeric, constant.language.boolean	#C47A2C	—
keyword, storage, keyword.control	#7C6EE6	—
keyword.operator, punctuation.separator, punctuation.terminator	#C23B3B	—
entity.name.function, support.function, meta.function-call	#3A7BD5	—
entity.name.type, support.type, storage.type	#2F8F8B	—
constant, variable.other.constant, support.constant	#C05A8C	—
variable, meta.definition.variable	#2A2A2A	—
variable.parameter	#2A2A2A	—
variable.other.property, meta.property-name	#2A2A2A	—
entity.name.tag, entity.other.attribute-name	#C47A2C	—
entity.name.namespace, entity.name.module	#2F8F8B	—
invalid, invalid.illegal	#C23B3B
markup.heading	#3A7BD5	bold
markup.bold	#2A2A2A	bold
markup.italic	#2A2A2A	italic
markup.underline.link, string.other.link	#3A7BD5	underline