Melayang Dark Theme

Name: Melayang Dark Theme
Author: ndhaniff

Publisher: ndhaniffThemes in package: 4

Readable VS Code themes with Melayang's blue, pink, and green identity in Dark, Midnight, Eclipse, and Light variants.

GitHub

Color themes

VS Code preview

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

Melayang Dark Theme — Malayang Eclipse Theme

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.tsfetchUser

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.activeBackground#0c1117
activityBar.activeBorder#72d1eb
activityBar.background#080c11
activityBar.border#141c27
activityBar.foreground#e4edf6
activityBar.inactiveForeground#94a2b4aa
activityBarBadge.background#72d1eb
activityBarBadge.foreground#11161d
badge.background#1d2632
badge.foreground#e4edf6
breadcrumb.activeSelectionForeground#e4edf6
breadcrumb.background#0f141b
breadcrumb.focusForeground#e4edf6
breadcrumb.foreground#94a2b4
button.background#72d1eb
button.border#00000000
button.foreground#0b161d
button.hoverBackground#97e5f8
button.secondaryBackground#161d28
button.secondaryForeground#e4edf6
button.secondaryHoverBackground#1d2632
checkbox.background#0f141b
checkbox.border#253141
checkbox.foreground#e4edf6
commandCenter.background#0c1117
commandCenter.border#141c27
commandCenter.foreground#e4edf6
commandCenter.inactiveForeground#94a2b4
debugExceptionWidget.background#0f141b
debugExceptionWidget.border#141c27
debugToolBar.background#0f141b
debugToolBar.border#141c27
descriptionForeground#98a8ba
diffEditor.border#1f2a36
diffEditor.insertedTextBackground#7ec98626
diffEditor.removedTextBackground#f1868e26
dropdown.background#0f141b
dropdown.border#253141
dropdown.foreground#e4edf6
editor.background#0d1117
editor.findMatchBackground#21455f
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#244c6660
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#ffffff07
editor.findRangeHighlightBorder#00000000
editor.foldBackground#72d1eb18
editor.foreground#e1ebf4
editor.hoverHighlightBackground#72d1eb14
editor.inactiveSelectionBackground#1f2a38
editor.lineHighlightBackground#ffffff06
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff07
editor.rangeHighlightBorder#00000000
editor.selectionBackground#153347
editor.selectionHighlightBackground#72d1eb20
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#d5dfec1d
editor.wordHighlightStrongBackground#72d1eb2c
editor.wordHighlightTextBackground#72d1eb18
editorBracketHighlight.foreground1#72d1eb
editorBracketHighlight.foreground2#f5afc1
editorBracketHighlight.foreground3#a7da85
editorBracketHighlight.foreground4#bea9f5
editorBracketHighlight.foreground5#dfc78f
editorBracketHighlight.foreground6#e4edf6
editorBracketHighlight.unexpectedBracket.foreground#f1868e
editorBracketMatch.background#ffffff06
editorBracketMatch.border#72d1eb33
editorBracketPairGuide.activeBackground1#72d1eb
editorBracketPairGuide.activeBackground2#f5afc1
editorBracketPairGuide.activeBackground3#a7da85
editorBracketPairGuide.activeBackground4#bea9f5
editorBracketPairGuide.activeBackground5#dfc78f
editorBracketPairGuide.activeBackground6#d9e5f0
editorBracketPairGuide.background1#72d1eb44
editorBracketPairGuide.background2#f5afc133
editorBracketPairGuide.background3#a7da8533
editorBracketPairGuide.background4#bea9f533
editorBracketPairGuide.background5#72d1eb22
editorBracketPairGuide.background6#ffffff08
editorCodeLens.foreground#94a2b4
editorCursor.background#11161d
editorCursor.foreground#97e5f8
editorError.border#00000000
editorError.foreground#f1868e
editorGroup.border#141c27
editorGroup.dropBackground#72d1eb44
editorGroup.emptyBackground#0d1117
editorGroupHeader.tabsBackground#070b10
editorGroupHeader.tabsBorder#141c27
editorGutter.addedBackground#7ec986
editorGutter.background#0d1117
editorGutter.commentRangeForeground#94a2b4
editorGutter.deletedBackground#d7705e
editorGutter.foldingControlForeground#d9e5f0
editorGutter.modifiedBackground#e5c07b
editorHint.border#00000000
editorHint.foreground#72d1eb
editorHoverWidget.background#0f141b
editorHoverWidget.border#72d1eb
editorHoverWidget.foreground#e4edf6
editorIndentGuide.activeBackground#4e617a
editorIndentGuide.activeBackground1#4e617a
editorIndentGuide.background#202a36
editorIndentGuide.background1#202a36
editorInfo.border#00000000
editorInfo.foreground#84c0ee
editorLightBulb.foreground#ddb866
editorLightBulbAutoFix.foreground#72d1eb
editorLineNumber.activeForeground#b8c6d6
editorLineNumber.dimmedForeground#3c4656
editorLineNumber.foreground#566377
editorLink.activeForeground#72d1eb
editorMarkerNavigation.background#0f141b
editorMarkerNavigationError.background#f1868e
editorMarkerNavigationInfo.background#84c0ee
editorMarkerNavigationWarning.background#ddb866
editorOverviewRuler.background#00000000
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#f1868e
editorOverviewRuler.findMatchForeground#21455f
editorOverviewRuler.infoForeground#84c0ee
editorOverviewRuler.warningForeground#ddb866
editorRuler.foreground#1f2a36
editorStickyScroll.background#0d1117
editorStickyScroll.border#141c27
editorStickyScroll.shadow#00000066
editorStickyScrollHover.background#111722
editorSuggestWidget.background#0f141b
editorSuggestWidget.border#72d1eb
editorSuggestWidget.foreground#e4edf6
editorSuggestWidget.highlightForeground#72d1eb
editorSuggestWidget.selectedBackground#173b50
editorUnicodeHighlight.background#473716
editorUnicodeHighlight.border#ddb866
editorWarning.border#00000000
editorWarning.foreground#ddb866
editorWhitespace.foreground#e4edf620
editorWidget.background#0f141b
editorWidget.foreground#e4edf6
editorWidget.resizeBorder#72d1eb
errorForeground#f1868e
focusBorder#72d1eb
foreground#e7f0f8
gitDecoration.addedResourceForeground#7ec986
gitDecoration.conflictingResourceForeground#bea9f5
gitDecoration.deletedResourceForeground#d7705e
gitDecoration.ignoredResourceForeground#94a2b4
gitDecoration.modifiedResourceForeground#e5c07b
gitDecoration.renamedResourceForeground#72d1eb
gitDecoration.stageDeletedResourceForeground#d7705e
gitDecoration.stageModifiedResourceForeground#e5c07b
gitDecoration.submoduleResourceForeground#84c0ee
gitDecoration.untrackedResourceForeground#7ec986
icon.foreground#e4edf6
input.background#0f141b
input.border#253141
input.foreground#e4edf6
input.placeholderForeground#94a2b4
inputOption.activeBackground#72d1eb44
inputOption.activeBorder#72d1eb
inputOption.activeForeground#e4edf6
inputValidation.errorBackground#471f25
inputValidation.errorBorder#f1868e
inputValidation.infoBackground#143345
inputValidation.infoBorder#84c0ee
inputValidation.warningBackground#473716
inputValidation.warningBorder#ddb866
list.activeSelectionBackground#173b50
list.activeSelectionForeground#e4edf6
list.errorForeground#f1868e
list.focusBackground#173b50
list.focusForeground#e4edf6
list.highlightForeground#72d1eb
list.hoverBackground#ffffff10
list.hoverForeground#e4edf6
list.inactiveSelectionBackground#243242
list.inactiveSelectionForeground#d9e5f0
list.warningForeground#ddb866
menu.background#0c1117
menu.border#1f2a36
menu.foreground#d9e5f0
menu.selectionBackground#173b50
menu.selectionForeground#e4edf6
menu.separatorBackground#1f2a36
menubar.selectionBackground#ffffff10
menubar.selectionForeground#e4edf6
merge.border#141c27
merge.commonContentBackground#171c23
merge.commonHeaderBackground#313740
merge.currentContentBackground#162924
merge.currentHeaderBackground#2e5548
merge.incomingContentBackground#172536
merge.incomingHeaderBackground#2f4f71
minimap.background#0d1117
minimap.errorHighlight#f1868e
minimap.findMatchHighlight#244c66
minimap.selectionHighlight#173b50
minimap.warningHighlight#ddb866
minimapGutter.addedBackground#7ec986
minimapGutter.deletedBackground#d7705e
minimapGutter.modifiedBackground#e5c07b
minimapSlider.activeBackground#90a0b455
minimapSlider.background#90a0b41d
minimapSlider.hoverBackground#90a0b438
notificationCenter.border#141c27
notificationCenterHeader.background#0f141b
notificationCenterHeader.foreground#e4edf6
notificationLink.foreground#72d1eb
notifications.background#0f141b
notifications.border#141c27
notifications.foreground#e4edf6
notificationsErrorIcon.foreground#f1868e
notificationsInfoIcon.foreground#84c0ee
notificationsWarningIcon.foreground#ddb866
notificationToast.border#1f2a36
panel.background#0f141b
panel.border#141c27
panelInput.border#253141
panelSection.border#1f2a36
panelTitle.activeBorder#72d1eb
panelTitle.activeForeground#e4edf6
panelTitle.inactiveForeground#94a2b4
peekView.border#72d1eb
peekViewEditor.background#070b10
peekViewEditor.matchHighlightBackground#244c66
peekViewEditorGutter.background#070b10
peekViewResult.background#070b10
peekViewResult.fileForeground#e4edf6
peekViewResult.lineForeground#94a2b4
peekViewResult.matchHighlightBackground#244c6660
peekViewResult.selectionBackground#173b50
peekViewResult.selectionForeground#e4edf6
peekViewTitle.background#0f141b
peekViewTitleDescription.foreground#94a2b4
peekViewTitleLabel.foreground#e4edf6
pickerGroup.border#1f2a36
pickerGroup.foreground#72d1eb
progressBar.background#72d1eb
quickInput.background#0f141b
quickInput.foreground#e4edf6
scrollbar.shadow#00000070
scrollbarSlider.activeBackground#90a0b465
scrollbarSlider.background#90a0b42a
scrollbarSlider.hoverBackground#90a0b448
settings.focusedRowBackground#ffffff04
settings.headerForeground#e4edf6
settings.modifiedItemIndicator#72d1eb
sideBar.background#080c11
sideBar.border#141c27
sideBar.foreground#d9e5f0
sideBarSectionHeader.background#0c1117
sideBarSectionHeader.border#141c27
sideBarSectionHeader.foreground#e4edf6
sideBarStickyScroll.background#080c11
sideBarStickyScroll.border#141c27
sideBarStickyScroll.shadow#00000066
sideBarTitle.foreground#e4edf6
statusBar.background#080c11
statusBar.border#141c27
statusBar.debuggingBackground#ddb866
statusBar.debuggingForeground#0b161d
statusBar.focusBorder#72d1eb
statusBar.foreground#e4edf6
statusBar.noFolderBackground#bea9f5
statusBar.noFolderForeground#0b161d
statusBarItem.activeBackground#ffffff10
statusBarItem.hoverBackground#ffffff10
statusBarItem.remoteBackground#72d1eb
statusBarItem.remoteForeground#0b161d
symbolIcon.arrayForeground#e4edf6
symbolIcon.booleanForeground#f5afc1
symbolIcon.classForeground#bea9f5
symbolIcon.colorForeground#f5afc1
symbolIcon.constantForeground#f5afc1
symbolIcon.constructorForeground#f2f7fc
symbolIcon.enumeratorForeground#bea9f5
symbolIcon.enumeratorMemberForeground#f5afc1
symbolIcon.eventForeground#72d1eb
symbolIcon.fieldForeground#e4edf6
symbolIcon.fileForeground#e4edf6
symbolIcon.folderForeground#e4edf6
symbolIcon.functionForeground#f2f7fc
symbolIcon.interfaceForeground#bea9f5
symbolIcon.keyForeground#f5afc1
symbolIcon.keywordForeground#72d1eb
symbolIcon.methodForeground#f2f7fc
symbolIcon.moduleForeground#cce0f2
symbolIcon.namespaceForeground#cce0f2
symbolIcon.nullForeground#f5afc1
symbolIcon.numberForeground#f5afc1
symbolIcon.objectForeground#e4edf6
symbolIcon.operatorForeground#72d1eb
symbolIcon.packageForeground#cce0f2
symbolIcon.propertyForeground#e4edf6
symbolIcon.referenceForeground#72d1eb
symbolIcon.snippetForeground#a7da85
symbolIcon.stringForeground#a7da85
symbolIcon.structForeground#bea9f5
symbolIcon.textForeground#e4edf6
symbolIcon.typeParameterForeground#72d1eb
symbolIcon.unitForeground#e4edf6
symbolIcon.variableForeground#e4edf6
tab.activeBackground#0d1117
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#e4edf6
tab.border#222d3b
tab.hoverBackground#121821
tab.hoverForeground#e4edf6
tab.inactiveBackground#070b10
tab.inactiveForeground#94a2b4aa
tab.lastPinnedBorder#1f2a36
tab.unfocusedActiveForeground#d9e5f0
tab.unfocusedInactiveForeground#94a2b4aa
terminal.ansiBlack#090d12
terminal.ansiBlue#72d1eb
terminal.ansiBrightBlack#5d6c80
terminal.ansiBrightBlue#97e5f8
terminal.ansiBrightCyan#a7ebdd
terminal.ansiBrightGreen#a7da85
terminal.ansiBrightMagenta#d0c0f8
terminal.ansiBrightRed#f1868e
terminal.ansiBrightWhite#f8fbfe
terminal.ansiBrightYellow#ead190
terminal.ansiCyan#84dfca
terminal.ansiGreen#7ec986
terminal.ansiMagenta#bea9f5
terminal.ansiRed#d7705e
terminal.ansiWhite#e4edf6
terminal.ansiYellow#ddb866
terminal.background#0d1117
terminal.border#1f2a36
terminal.foreground#e1ebf4
terminal.selectionBackground#173b50
terminal.selectionForeground#e4edf6
terminal.tab.activeBorder#72d1eb
terminalCommandDecoration.defaultBackground#72d1eb
terminalCommandDecoration.errorBackground#f1868e
terminalCommandDecoration.successBackground#7ec986
terminalCursor.background#11161d
terminalCursor.foreground#97e5f8
textBlockQuote.background#ffffff08
textBlockQuote.border#72d1eb44
textCodeBlock.background#070b10
textLink.activeForeground#97e5f8
textLink.foreground#72d1eb
textPreformat.foreground#e4edf6
textSeparator.foreground#1f2a36
titleBar.activeBackground#080c11
titleBar.activeForeground#d9e5f0
titleBar.border#00000000
titleBar.inactiveBackground#080c11cc
titleBar.inactiveForeground#94a2b4aa
tree.indentGuidesStroke#263240
tree.tableColumnsBorder#1f2a36
tree.tableOddRowsBackground#ffffff08
walkThrough.embeddedEditorBackground#070b10
welcomePage.progress.background#1d2632
welcomePage.progress.foreground#72d1eb
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#8292a5	italic
invalid, invalid.illegal, invalid.deprecated, invalid.broken, invalid.unimplemented	#f39098	—
keyword, keyword.control, keyword.control.flow, keyword.control.import, keyword.control.return, keyword.control.conditional, keyword.control.loop, keyword.control.exception, keyword.other, storage, storage.modifier	#7ddaf2	—
keyword.operator, keyword.operator.expression, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement	#7ddaf2	—
punctuation, meta.brace, meta.delimiter, punctuation.separator, punctuation.terminator, punctuation.accessor	#97a8bd	—
string, markup.inline.raw, markup.fenced_code.block.markdown	#afdf8f	—
punctuation.definition.string, punctuation.quasi.element	#afdf8f	—
constant.character.escape, constant.character.string.escape	#7ddaf2	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end	#7ddaf2	—
meta.template.expression, source.ts.embedded, source.js.embedded	#e7f0f8	—
string.regexp, constant.other.character-class.regexp	#8ce4d0	—
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp	#7ddaf2	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language, constant.character, constant.other.symbol, constant.other.color, support.constant	#f7b7c8	—
variable.other.constant, variable.other.enummember, support.constant.property-value, support.constant.color, support.constant.color.w3c-standard-color-name	#f7b7c8	—
entity.name.type, entity.name.class, entity.name.struct, entity.name.interface, entity.name.enum, entity.name.type.alias, support.type, support.class, storage.type, storage.type.annotation, storage.type.primitive, storage.type.generic, keyword.other.type	#c6b3f8	—
entity.name.type.parameter, variable.other.generic-type	#7ddaf2	—
entity.name.namespace, entity.name.module, entity.name.package, entity.name.scope-resolution, support.module, support.type.module	#d2e5f7	—
entity.name.function, entity.name.method, support.function, support.function.any-method, variable.function, meta.function-call, meta.method-call, meta.function.method, meta.definition.method, meta.function, meta.method	#f5f9fd	—
support.function.builtin, support.function.console	#eef5fb	—
entity.name.decorator, meta.function.decorator, meta.annotation, punctuation.definition.annotation, support.type.property-name.annotation, support.token.decorator.python	#7ddaf2	—
variable, meta.definition.variable.name, entity.name.variable, support.variable, meta.object-literal.key, meta.definition.property	#e7f0f8	—
variable.parameter, meta.parameter, function.parameter	#e4cd97	—
variable.other.property, support.variable.property, entity.name.variable.field, meta.property-name, support.type.property-name, support.type.property-name.json, meta.mapping.key, meta.mapping.key.yaml	#e7f0f8	—
variable.language, variable.language.this, variable.language.self, variable.language.super, support.variable.magic	#7ddaf2	italic
entity.name.tag, entity.name.tag.custom, entity.name.tag.localname, meta.tag	#7ddaf2	—
punctuation.definition.tag, meta.tag punctuation	#97a8bd	—
entity.other.attribute-name, support.type.property-name.css	#f7b7c8	—
meta.selector, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#7ddaf2	—
source.json meta.structure.dictionary > string.quoted.json, source.json meta.structure.dictionary > string.quoted.json > punctuation.string, support.type.property-name.json, entity.name.tag.yaml	#e7f0f8	—
markup.heading, entity.name.section	#c6b3f8	—
markup.bold, punctuation.definition.bold	#f7b7c8	—
markup.italic, punctuation.definition.italic	#7ddaf2	italic
markup.underline.link, markup.underline.link.image, string.other.link.title, string.other.link.description	#7ddaf2	—
markup.quote, punctuation.definition.list	#8292a5	—
markup.inserted, markup.inserted.diff	#afdf8f	—
markup.deleted, markup.deleted.diff	#f39098	—
markup.changed, markup.changed.diff	#7ddaf2	—

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