Angrboða

Name: Angrboða
Author: carlssonloke

Publisher: carlssonlokeThemes in package: 2

Beautiful, Dark and Light VSCode theme ⌘

GitHub

Color themes

VS Code preview

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

Angrboða — Angrboda Light

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.activeBorder#a01818
activityBar.background#ffffff
activityBar.border#e5e5e5
activityBar.foreground#1a1a1a
activityBar.inactiveForeground#1a1a1a60
activityBarBadge.background#1a1a1a
activityBarBadge.foreground#ffffff
badge.background#1a1a1a90
badge.foreground#ffffff
breadcrumb.activeSelectionForeground#1a1a1a90
breadcrumb.focusForeground#1a1a1a
breadcrumb.foreground#1a1a1a90
breadcrumbPicker.background#ffffff
button.background#a01818
button.foreground#ffffff
button.hoverBackground#a01818
checkbox.background#5a3b9420
checkbox.border#e5e5e5
debugToolBar.background#ffffff
descriptionForeground#1a1a1a90
diffEditor.insertedTextBackground#3c9a3c30
diffEditor.removedTextBackground#a0181830
dropdown.background#ffffff
dropdown.border#e5e5e5
dropdown.foreground#1a1a1a
dropdown.listBackground#ffffff
editor.background#ffffff
editor.findMatchBackground#a0181840
editor.findMatchHighlightBackground#5a3b9425
editor.focusedStackFrameHighlightBackground#a01818
editor.foldBackground#ffffff
editor.foreground#1a1a1a
editor.inactiveSelectionBackground#5a3b9420
editor.lineHighlightBackground#5a3b9420
editor.selectionBackground#5a3b9440
editor.selectionHighlightBackground#5a3b9420
editor.stackFrameHighlightBackground#a01818
editor.wordHighlightBackground#5a3b9440
editor.wordHighlightStrongBackground#a0181835
editorBracketHighlight.foreground1#1a1a1a80
editorBracketHighlight.foreground2#1a1a1a80
editorBracketHighlight.foreground3#1a1a1a80
editorBracketHighlight.foreground4#1a1a1a80
editorBracketHighlight.foreground5#1a1a1a80
editorBracketHighlight.foreground6#1a1a1a80
editorBracketHighlight.unexpectedBracket.foreground#ffffff
editorBracketMatch.background#5a3b9420
editorCursor.foreground#1a1a1a
editorError.foreground#a01818
editorGroup.border#e5e5e5
editorGroupHeader.tabsBackground#ffffff
editorGroupHeader.tabsBorder#e5e5e5
editorGutter.addedBackground#3c9a3c
editorGutter.commentRangeForeground#1a1a1a60
editorGutter.deletedBackground#a01818
editorGutter.foldingControlForeground#1a1a1a90
editorGutter.modifiedBackground#5a3b94
editorHint.foreground#5a3b94
editorIndentGuide.activeBackground#e5e5e560
editorIndentGuide.background#e5e5e540
editorInfo.foreground#5a3b94
editorLineNumber.activeForeground#5a3b94
editorLineNumber.foreground#5a3b9450
editorOverviewRuler.border#5a3b9400
editorWarning.foreground#a01818
editorWhitespace.foreground#e5e5e540
editorWidget.background#ffffff
errorForeground#a01818
focusBorder#00000000
foreground#1a1a1a
gitDecoration.addedResourceForeground#3c9a3c
gitDecoration.conflictingResourceForeground#b38600
gitDecoration.deletedResourceForeground#a01818
gitDecoration.ignoredResourceForeground#1a1a1a60
gitDecoration.modifiedResourceForeground#5a3b94
gitDecoration.submoduleResourceForeground#1a1a1a90
gitDecoration.untrackedResourceForeground#5a3b94
input.background#5a3b9420
input.border#e5e5e5
input.foreground#1a1a1a
input.placeholderForeground#1a1a1a90
list.activeSelectionBackground#5a3b9460
list.activeSelectionForeground#1a1a1a
list.focusBackground#5a3b9420
list.hoverBackground#5a3b9420
list.hoverForeground#1a1a1a
list.inactiveFocusBackground#ffffff
list.inactiveSelectionBackground#5a3b9420
list.inactiveSelectionForeground#1a1a1a
notificationCenterHeader.background#ffffff
notificationCenterHeader.foreground#1a1a1a
notifications.background#ffffff
notifications.border#e5e5e5
notifications.foreground#1a1a1a
notificationsErrorIcon.foreground#a01818
notificationsInfoIcon.foreground#5a3b94
notificationsWarningIcon.foreground#a01818
panel.background#ffffff
panel.border#e5e5e5
panelInput.border#1a1a1a90
panelTitle.activeBorder#a01818
panelTitle.activeForeground#1a1a1a
panelTitle.inactiveForeground#1a1a1a60
peekViewEditor.background#ffffff
peekViewEditor.matchHighlightBackground#a01818
peekViewResult.background#ffffff
peekViewResult.matchHighlightBackground#a01818
pickerGroup.border#1a1a1a90
pickerGroup.foreground#1a1a1a
problemsErrorIcon.foreground#a01818
problemsInfoIcon.foreground#5a3b94
problemsWarningIcon.foreground#a01818
progressBar.background#a01818
quickInput.background#ffffff
quickInput.foreground#1a1a1a
scrollbar.shadow#1a1a1a90
scrollbarSlider.activeBackground#5a3b9435
scrollbarSlider.background#5a3b9418
scrollbarSlider.hoverBackground#5a3b9425
settings.headerForeground#1a1a1a
settings.modifiedItemIndicator#a01818
sideBar.background#ffffff
sideBar.border#e5e5e5
sideBar.foreground#1a1a1a
sideBarSectionHeader.background#ffffff
sideBarSectionHeader.border#e5e5e5
sideBarSectionHeader.foreground#5a3b94
sideBarTitle.foreground#1a1a1a
statusBar.background#ffffff
statusBar.border#e5e5e5
statusBar.debuggingBackground#5a3b9420
statusBar.debuggingForeground#1a1a1a
statusBar.foreground#1a1a1a
statusBar.noFolderBackground#ffffff
statusBarItem.prominentBackground#5a3b9420
tab.activeBackground#ffffff
tab.activeBorder#e5e5e5
tab.activeBorderTop#a01818
tab.activeForeground#1a1a1a
tab.border#e5e5e5
tab.hoverBackground#5a3b9425
tab.inactiveBackground#5a3b9420
tab.inactiveForeground#1a1a1a90
tab.unfocusedActiveBorder#e5e5e5
tab.unfocusedActiveBorderTop#e5e5e5
tab.unfocusedHoverBackground#ffffff
terminal.ansiBlack#1a1a1a
terminal.ansiBlue#5a3b94
terminal.ansiBrightBlack#1a1a1a
terminal.ansiBrightBlue#5a3b94
terminal.ansiBrightCyan#ffffff
terminal.ansiBrightGreen#5a3b94
terminal.ansiBrightMagenta#5a3b94
terminal.ansiBrightRed#a01818
terminal.ansiBrightWhite#1a1a1a
terminal.ansiBrightYellow#a01818
terminal.ansiCyan#ffffff
terminal.ansiGreen#5a3b94
terminal.ansiMagenta#5a3b94
terminal.ansiRed#a01818
terminal.ansiWhite#1a1a1a
terminal.ansiYellow#a01818
terminal.foreground#1a1a1a
textBlockQuote.background#ffffff
textBlockQuote.border#e5e5e5
textCodeBlock.background#ffffff
textLink.activeForeground#a01818
textLink.foreground#a01818
textPreformat.foreground#1a1a1a90
textSeparator.foreground#1a1a1a90
titleBar.activeBackground#ffffff
titleBar.activeForeground#1a1a1a
titleBar.border#5a3b9420
titleBar.inactiveBackground#ffffff
titleBar.inactiveForeground#1a1a1a60
tree.indentGuidesStroke#e5e5e540
welcomePage.buttonBackground#5a3b9425
welcomePage.buttonHoverBackground#5a3b9420

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment, string.comment	#1a1a1a80	—
punctuation, meta.tag.inline.any.html, meta.tag.block.any.html, meta.brace	#1a1a1a80	—
constant, entity.name.constant, variable.other.constant, variable.language, meta.definition.variable	#1a1a1a	—
entity, entity.name	#5a3b94	—
variable.parameter.function	#1a1a1a	—
entity.name.tag	#a01818	—
entity.name.function	#5a3b94	—
keyword	#5a3b94	—
storage, storage.type	#a01818	—
storage.modifier.package, storage.modifier.import, storage.type.java	#1a1a1a	—
string, punctuation.definition.string, string punctuation.section.embedded source	#a01818	—
support	#5a3b94	—
meta.property-name, entity.other.attribute-name, meta.object-literal.key	#5a3b94	—
variable	#1a1a1a	—
namespace	#1a1a1a	—
keyword.operator	#a01818	—
invalid.broken	#a01818	italic
invalid.deprecated	#a01818	italic
invalid.illegal	#a01818	italic
invalid.unimplemented	#a01818	italic
carriage-return	#ffffff	italic underline
message.error	#a01818	—
string source	#1a1a1a	—
string variable	#a01818	—
source.regexp, string.regexp	#a01818	—
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition	#a01818	—
string.regexp constant.character.escape	#5a3b94	bold
support.constant	#1a1a1a	—
support.variable	#a01818	—
constant.numeric	#1a1a1a	—
keyword.other.unit	#a01818	—
constant.language.boolean	#a01818	—
meta.module-reference	#a01818	—
punctuation.definition.list.begin.markdown	#a01818	—
markup.heading, markup.heading entity.name	#a01818	bold
markup.quote	#a01818	—
markup.italic	#1a1a1a	italic
markup.bold	#1a1a1a	bold
markup.raw	#a01818	—
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted	#ffffff	—
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted	#ffffff	—
markup.changed, punctuation.definition.changed	#ffffff	—
markup.ignored, markup.untracked	#1a1a1a90	—
meta.diff.range	#5a3b94	bold
meta.diff.header	#5a3b94	—
meta.separator	#5a3b94	bold
meta.output	#5a3b94	—
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote	#ffffff	—
brackethighlighter.unmatched	#a01818	—
constant.other.reference.link, string.other.link, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown	#a01818	—
markup.underline.link.markdown	#1a1a1a90	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}!`;
}