Mangos Theme

Name: Mangos Theme
Author: Da Mangos

Publisher: Da MangosThemes in package: 1

Dark Theme

GitHub

VS Code preview

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

Mangos Theme — Mangos Theme

fetchUser.ts

index.ts

README.md

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.activeBackground#e3e3e31a
activityBar.background#292a30
activityBar.border#0000001a
activityBar.foreground#e3e3e3
activityBar.inactiveForeground#a3b0bf
activityBarBadge.background#4eb0cb
activityBarBadge.foreground#e3e3e3
badge.background#4eb0cb
badge.foreground#e3e3e3
breadcrumb.activeSelectionForeground#e3e3e3
breadcrumb.background#2c3038
breadcrumb.focusForeground#e3e3e3
breadcrumb.foreground#a3b0bf
button.background#4eb0cb80
button.foreground#e3e3e3
button.hoverBackground#4eb0cb
button.secondaryBackground#4eb0cb80
button.secondaryForeground#e3e3e3
button.secondaryHoverBackground#4eb0cb
checkbox.background#3c3c3c
checkbox.border#00000000
checkbox.foreground#e3e3e3
debugExceptionWidget.background#292a30
debugExceptionWidget.border#00000000
debugToolBar.background#292a30
debugToolBar.border#00000000
diffEditor.border#0000001a
diffEditor.insertedTextBackground#a6d67f20
diffEditor.insertedTextBorder#00000000
diffEditor.removedTextBackground#ff165420
diffEditor.removedTextBorder#00000000
dropdown.background#3c3c3c
dropdown.border#00000000
dropdown.foreground#e3e3e3
editor.background#2c3038
editor.findMatchBackground#a6d67f80
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#a6d67f40
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#00000000
editor.findRangeHighlightBorder#00000000
editor.foldBackground#00000000
editor.foreground#d4d4d4
editor.hoverHighlightBackground#e3e3e31a
editor.inactiveSelectionBackground#4eb0cb20
editor.lineHighlightBackground#e3e3e31a
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#00000000
editor.rangeHighlightBorder#00000000
editor.selectionBackground#4eb0cb40
editor.selectionHighlightBackground#4eb0cb20
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#00000000
editor.wordHighlightBorder#00000000
editor.wordHighlightStrongBackground#4eb0cb20
editor.wordHighlightStrongBorder#00000000
editorBracketMatch.background#e3e3e31a
editorBracketMatch.border#00000000
editorCodeLens.foreground#a3b0bf
editorCursor.background#2c3038
editorCursor.foreground#e3e3e3
editorError.background#00000000
editorError.border#e3e3e300
editorError.foreground#ff1654
editorGroup.border#0000001a
editorGroup.emptyBackground#2c3038
editorGroupHeader.border#00000000
editorGroupHeader.tabsBackground#292a30
editorGroupHeader.tabsBorder#00000000
editorGutter.addedBackground#a6d67f
editorGutter.background#2c3038
editorGutter.commentRangeForeground#a3b0bf
editorGutter.deletedBackground#ff1654
editorGutter.foldingControlForeground#a3b0bf
editorGutter.modifiedBackground#4eb0cb
editorHoverWidget.background#292a30
editorHoverWidget.border#00000000
editorHoverWidget.foreground#a3b0bf
editorIndentGuide.activeBackground#00000000
editorIndentGuide.background#00000000
editorInfo.background#00000000
editorInfo.border#00000000
editorInfo.foreground#4eb0cb
editorLineNumber.activeForeground#e3e3e3
editorLineNumber.foreground#a3b0bf
editorLink.activeForeground#4eb0cb
editorMarkerNavigation.background#292a30
editorMarkerNavigationError.background#ff1654
editorMarkerNavigationInfo.background#4eb0cb
editorMarkerNavigationWarning.background#f4e285
editorOverviewRuler.background#d7707000
editorOverviewRuler.border#00000000
editorRuler.foreground#0000001a
editorSuggestWidget.background#292a30
editorSuggestWidget.border#00000000
editorSuggestWidget.foreground#a3b0bf
editorSuggestWidget.highlightForeground#e3e3e3
editorSuggestWidget.selectedBackground#e3e3e31a
editorWarning.background#00000000
editorWarning.border#00000000
editorWarning.foreground#f4e285
editorWhitespace.foreground#a3b0bf
editorWidget.background#292a30
editorWidget.foreground#a3b0bf
editorWidget.resizeBorder#0000001a
focusBorder#00000000
foreground#e3e3e3
gitDecoration.addedResourceForeground#a6d67f
gitDecoration.conflictingResourceForeground#4eb0cb
gitDecoration.deletedResourceForeground#c74e39
gitDecoration.ignoredResourceForeground#a3b0bf
gitDecoration.modifiedResourceForeground#f4e285
gitDecoration.stageDeletedResourceForeground#ff1654
gitDecoration.stageModifiedResourceForeground#f4e285
gitDecoration.submoduleResourceForeground#4eb0cb
gitDecoration.untrackedResourceForeground#a6d67f
icon.foreground#e3e3e3
input.background#3c3c3c
input.border#00000000
input.foreground#e3e3e3
input.placeholderForeground#a6a6a6
inputOption.activeBackground#4eb0cb80
inputOption.activeBorder#007acc00
inputOption.activeForeground#e3e3e3
list.activeSelectionBackground#e3e3e31a
list.activeSelectionForeground#e3e3e3
list.dropBackground#e3e3e31a
list.focusBackground#e3e3e31a
list.focusForeground#e3e3e3
list.highlightForeground#4eb0cb
list.hoverBackground#00000000
list.hoverForeground#e3e3e3
list.inactiveSelectionBackground#0000001a
list.inactiveSelectionForeground#e3e3e3
listFilterWidget.background#4eb0cb40
listFilterWidget.noMatchesOutline#00000000
listFilterWidget.outline#00000000
menu.background#292a30
menu.border#00000000
menu.foreground#a3b0bf
menu.selectionBackground#00000000
menu.selectionBorder#00000000
menu.selectionForeground#e3e3e3
menu.separatorBackground#e3e3e3
menubar.selectionBackground#00000000
menubar.selectionBorder#00000000
menubar.selectionForeground#e3e3e3
merge.commonContentBackground#e3e3e320
merge.commonHeaderBackground#e3e3e320
merge.currentContentBackground#a6d67f20
merge.currentHeaderBackground#a6d67f20
merge.incomingContentBackground#4eb0cb20
merge.incomingHeaderBackground#4eb0cb20
minimap.background#2c3038
minimap.errorHighlight#ff1654
minimap.findMatchHighlight#f4e28540
minimap.selectionHighlight#4eb0cb40
minimap.warningHighlight#f4e285
minimapGutter.addedBackground#a6d67f
minimapGutter.deletedBackground#ff1654
minimapGutter.modifiedBackground#4eb0cb
notificationCenter.border#0000001a
notificationCenterHeader.background#292a30
notificationCenterHeader.foreground#e3e3e3
notifications.background#292a30
notifications.border#303031
notifications.foreground#e3e3e3
notificationsErrorIcon.foreground#ff1654
notificationsInfoIcon.foreground#4eb0cb
notificationsWarningIcon.foreground#f4e285
notificationToast.border#00000000
panel.background#292a30
panel.border#0000001a
panelSection.border#0000001a
panelTitle.activeBorder#00000000
panelTitle.activeForeground#e3e3e3
panelTitle.inactiveForeground#a3b0bf
peekView.border#00000000
peekViewEditor.background#292a30
peekViewEditor.matchHighlightBackground#f4e28580
peekViewEditor.matchHighlightBorder#ee931e
peekViewEditorGutter.background#292a30
peekViewResult.background#252526
peekViewResult.fileForeground#e3e3e3
peekViewResult.lineForeground#bbbbbb
peekViewResult.matchHighlightBackground#f4e28580
peekViewResult.selectionBackground#4eb0cb33
peekViewResult.selectionForeground#e3e3e3
peekViewTitle.background#1e1e1e
peekViewTitleDescription.foreground#e3e3e3b3
peekViewTitleLabel.foreground#e3e3e3
pickerGroup.border#00000000
pickerGroup.foreground#a3b0bf
progressBar.background#4eb0cb
scrollbar.shadow#000000
scrollbarSlider.activeBackground#e3e3e340
scrollbarSlider.background#e3e3e340
scrollbarSlider.hoverBackground#e3e3e380
selection.background#4eb0cb
settings.focusedRowBackground#e3e3e307
settings.headerForeground#e3e3e3
sideBar.background#292A30
sideBar.border#0000001a
sideBar.dropBackground#e3e3e31a
sideBar.foreground#a3b0bf
sideBarSectionHeader.background#00000000
sideBarSectionHeader.border#00000000
sideBarSectionHeader.foreground#e3e3e3
sideBarTitle.foreground#e3e3e3
statusBar.background#292a30
statusBar.border#0000001a
statusBar.debuggingBackground#292a30
statusBar.debuggingBorder#f4e285
statusBar.debuggingForeground#a3b0bf
statusBar.foreground#a3b0bf
statusBar.noFolderBackground#292a30
statusBar.noFolderBorder#ff1654
statusBar.noFolderForeground#a3b0bf
statusBarItem.activeBackground#e3e3e325
statusBarItem.hoverBackground#e3e3e31a
statusBarItem.remoteBackground#292a30
statusBarItem.remoteForeground#a3b0bf
tab.activeBackground#2c3038
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#e3e3e3
tab.border#00000000
tab.hoverBackground#00000000
tab.hoverBorder#00000000
tab.hoverForeground#e3e3e3
tab.inactiveBackground#292a30
tab.inactiveForeground#a3b0bf
terminal.border#0000001a
terminal.foreground#e3e3e3
terminal.selectionBackground#e3e3e31a
terminalCursor.background#292a30
terminalCursor.foreground#e3e3e3
textLink.foreground#4eb0cb
titleBar.activeBackground#292a30
titleBar.activeForeground#a3b0bf
titleBar.border#0000001a
titleBar.inactiveBackground#292a3080
titleBar.inactiveForeground#a3b0bf
tree.indentGuidesStroke#00000000
walkThrough.embeddedEditorBackground#00000050
widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
entity., storage.type.template.argument, meta.declaration.type.alias.	#4eb0cb
storage.type.built-in.cpp, entity.name.function.definition.special.member.destructor.cpp, entity.name.function.definition.special.constructor.cpp	#4eb0cb
storage.type.java, storage.type.generic.java, storage.modifier.import.java, storage.modifier.package.java	#4eb0cb
entity.name.function., meta.function-call, support.function.	#a6d67f
comment., comment.block.documentation. storage., keyword.other.documentation., punctuation.definition.comment.	#a3b0bf
comment.block.documentation.c entity., comment.block.documentation.c keyword., comment.block.documentation.c storage., comment.line.double-slash.documentation.c entity., comment.line.double-slash.documentation.c keyword., comment.line.double-slash.documentation.c storage.	#a3b0bf
comment.block.documentation.cpp entity., comment.block.documentation.cpp keyword., comment.block.documentation.cpp storage., comment.block.documentation.cpp variable., comment.line.double-slash.documentation.cpp entity., comment.line.double-slash.documentation.cpp keyword., comment.line.double-slash.documentation.cpp storage., comment.line.double-slash.documentation.cpp variable.	#a3b0bf
comment.block.javadoc.java, comment.block.javadoc.java variable.parameter.java	#a3b0bf
entity.other.attribute., entity.name.function.decorator., entity.name.function.preprocessor., entity.name.other.preprocessor., keyword.control.directive., meta.preprocessor., punctuation.section.attribute., punctuation.definition.annotation., punctuation.definition.decorator., punctuation.definition.directive., storage.type.annotation.	#ffa150
meta.preprocessor.pragma.c, meta.preprocessor.pragma.c entity., meta.preprocessor.macro.c, meta.preprocessor.macro.c, meta.preprocessor.macro.c constant., meta.preprocessor.macro.c constant.language., meta.preprocessor.macro.c entity., meta.preprocessor.macro.c entity.name.function., meta.preprocessor.macro.c keyword., meta.preprocessor.macro.c keyword.operator., meta.preprocessor.macro.c keyword.operator.sizeof.c, meta.preprocessor.macro.c meta.parens.c, meta.preprocessor.macro.c storage., meta.preprocessor.macro.c punctuation.	#ffa150
meta.preprocessor.pragma.cpp, meta.preprocessor.pragma.cpp entity., meta.preprocessor.macro.cpp, meta.preprocessor.macro.cpp constant., meta.preprocessor.macro.cpp constant.language., meta.preprocessor.macro.cpp entity., meta.preprocessor.macro.cpp entity.name.function., meta.preprocessor.macro.cpp entity.name.operator.cpp, meta.preprocessor.macro.cpp entity.name.function.definition.special.member.destructor.cpp, meta.preprocessor.macro.cpp entity.name.function.definition.special.constructor.cpp, meta.preprocessor.macro.cpp keyword., meta.preprocessor.macro.cpp keyword.operator., meta.preprocessor.macro.cpp keyword.operator.functionlike.cpp keyword.operator., meta.preprocessor.macro.cpp keyword.operator.wordlike.cpp keyword.operator., meta.preprocessor.macro.cpp meta., meta.preprocessor.macro.cpp punctuation., meta.preprocessor.macro.cpp storage., meta.preprocessor.macro.cpp storage.type.built-in.cpp, meta.preprocessor.macro.cpp variable., meta.preprocessor.macro.cpp variable.language., meta.preprocessor.macro.cpp storage.modifier.reference.cpp, meta.preprocessor.macro.cpp storage.modifier.pointer.cpp	#ffa150
constant.language., keyword., storage., variable.language.	#fe7bb2	bold
keyword.operator.sizeof.c	#fe7bb2	bold
entity.name.operator.cpp, entity.name.operator.type.cpp, keyword.operator.functionlike.cpp keyword.operator., keyword.operator.wordlike.cpp keyword.operator., keyword.operator.noexcept, storage.type.template.argument.auto.cpp, storage.type.template.argument.and.cpp, storage.type.template.argument.and_eq.cpp, storage.type.template.argument.bitand.cpp, storage.type.template.argument.bitor.cpp, storage.type.template.argument.compl.cpp, storage.type.template.argument.not.cpp, storage.type.template.argument.not_eq.cpp, storage.type.template.argument.or.cpp, storage.type.template.argument.or_eq.cpp, storage.type.template.argument.xor.cpp, storage.type.template.argument.xor_eq.cpp, storage.type.template.argument.class.cpp, storage.type.template.argument.typename.cpp, storage.type.template.argument.const.cpp, storage.type.template.argument.bool.cpp, storage.type.template.argument.short.cpp, storage.type.template.argument.char.cpp, storage.type.template.argument.int.cpp, storage.type.template.argument.float.cpp, storage.type.template.argument.long.cpp, storage.type.template.argument.double.cpp, storage.type.template.argument.unsigned.cpp, storage.type.template.argument.nullptr.cpp	#fe7bb2	bold
storage.type.primitive.java	#fe7bb2	bold
variable.language.special.self.python, variable.language.special.cls.python, keyword.operator.logical.python	#fe7bb2	bold
constant.numeric., keyword.other.unit.	#a89df7
constant., punctuation.definition.string., string.	#fe8170
support.type.property-name.json, support.type.property-name.end.json, punctuation.support.type.property-name.end.json, punctuation.support.type.property-name.begin.json	#fe8170
, keyword.operator., punctuation., variable.	#e3e3e3
punctuation.definition.parameters.begin.c, punctuation.definition.parameters.end.c, punctuation.separator.parameters.c	#e3e3e3
support.other.attribute.cpp, storage.modifier.reference.cpp, storage.modifier.pointer.cpp, storage.type.return-type.lambda.cpp, punctuation.definition.parameters.begin.preprocessor.cpp, punctuation.definition.parameters.end.preprocessor.cpp, punctuation.separator.parameters.cpp, variable.parameter.preprocessor.cpp, meta.template.call.cpp, meta.head.function.definition.special.constructor.cpp meta., meta.head.function.definition.special.operator-overload.cpp meta., meta.head.function.definition.special.constructor.cpp, meta.head.function.definition.special.operator-overload.cpp, keyword.other.suffix.literal.user-defined.string.cpp, keyword.other.suffix.literal.user-defined.reserved.string.cpp	#e3e3e3
keyword.control.ternary.java, storage.type.function.arrow.java, storage.type.generic.wildcard.java, variable.language.wildcard.java	#e3e3e3
constant.character.format.placeholder.other.python, constant.character.format.placeholder.other.python storage.type.format.python, meta.member.access.python meta., meta.member.access.python	#e3e3e3

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