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 Dark 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#202730
activityBar.activeBorder#67cbe7
activityBar.background#181e26
activityBar.border#2d3642
activityBar.foreground#dce6f2
activityBar.inactiveForeground#93a1b2aa
activityBarBadge.background#67cbe7
activityBarBadge.foreground#1c222b
badge.background#313a46
badge.foreground#dce6f2
breadcrumb.activeSelectionForeground#dce6f2
breadcrumb.background#202730
breadcrumb.focusForeground#dce6f2
breadcrumb.foreground#93a1b2
button.background#67cbe7
button.border#00000000
button.foreground#10202a
button.hoverBackground#8be0f6
button.secondaryBackground#29313c
button.secondaryForeground#dce6f2
button.secondaryHoverBackground#313a46
checkbox.background#202730
checkbox.border#2d3642
checkbox.foreground#dce6f2
commandCenter.background#202730
commandCenter.border#2d3642
commandCenter.foreground#dce6f2
commandCenter.inactiveForeground#93a1b2
debugExceptionWidget.background#202730
debugExceptionWidget.border#2d3642
debugToolBar.background#202730
debugToolBar.border#2d3642
descriptionForeground#93a1b2
diffEditor.border#2d3642
diffEditor.insertedTextBackground#7ec9862b
diffEditor.removedTextBackground#ef7d862b
dropdown.background#202730
dropdown.border#2d3642
dropdown.foreground#dce6f2
editor.background#1c222b
editor.findMatchBackground#32556f
editor.findMatchBorder#00000000
editor.findMatchHighlightBackground#32556f66
editor.findMatchHighlightBorder#00000000
editor.findRangeHighlightBackground#ffffff0a
editor.findRangeHighlightBorder#00000000
editor.foldBackground#67cbe744
editor.foreground#dce6f2
editor.hoverHighlightBackground#67cbe722
editor.inactiveSelectionBackground#334153
editor.lineHighlightBackground#ffffff08
editor.lineHighlightBorder#00000000
editor.rangeHighlightBackground#ffffff0a
editor.rangeHighlightBorder#00000000
editor.selectionBackground#284b64
editor.selectionHighlightBackground#67cbe726
editor.selectionHighlightBorder#00000000
editor.wordHighlightBackground#c7d4e424
editor.wordHighlightStrongBackground#67cbe736
editor.wordHighlightTextBackground#67cbe71f
editorBracketHighlight.foreground1#67cbe7
editorBracketHighlight.foreground2#f2a7bb
editorBracketHighlight.foreground3#9fd47e
editorBracketHighlight.foreground4#b49cf0
editorBracketHighlight.foreground5#d8bf88
editorBracketHighlight.foreground6#dce6f2
editorBracketHighlight.unexpectedBracket.foreground#ef7d86
editorBracketMatch.background#ffffff0a
editorBracketMatch.border#67cbe744
editorBracketPairGuide.activeBackground1#67cbe7
editorBracketPairGuide.activeBackground2#f2a7bb
editorBracketPairGuide.activeBackground3#9fd47e
editorBracketPairGuide.activeBackground4#b49cf0
editorBracketPairGuide.activeBackground5#d8bf88
editorBracketPairGuide.activeBackground6#d2dce8
editorBracketPairGuide.background1#67cbe744
editorBracketPairGuide.background2#f2a7bb33
editorBracketPairGuide.background3#9fd47e33
editorBracketPairGuide.background4#b49cf033
editorBracketPairGuide.background5#67cbe726
editorBracketPairGuide.background6#ffffff0a
editorCodeLens.foreground#93a1b2
editorCursor.background#1c222b
editorCursor.foreground#8be0f6
editorError.border#00000000
editorError.foreground#ef7d86
editorGroup.border#2d3642
editorGroup.dropBackground#67cbe744
editorGroup.emptyBackground#1c222b
editorGroupHeader.tabsBackground#171c23
editorGroupHeader.tabsBorder#2d3642
editorGutter.addedBackground#7ec986
editorGutter.background#1c222b
editorGutter.commentRangeForeground#93a1b2
editorGutter.deletedBackground#d7705e
editorGutter.foldingControlForeground#d2dce8
editorGutter.modifiedBackground#e5c07b
editorHint.border#00000000
editorHint.foreground#67cbe7
editorHoverWidget.background#202730
editorHoverWidget.border#67cbe7
editorHoverWidget.foreground#dce6f2
editorIndentGuide.activeBackground#5f7188
editorIndentGuide.activeBackground1#5f7188
editorIndentGuide.background#333d4b
editorIndentGuide.background1#333d4b
editorInfo.border#00000000
editorInfo.foreground#7cb8ea
editorLightBulb.foreground#d8b15f
editorLightBulbAutoFix.foreground#67cbe7
editorLineNumber.activeForeground#b6c2d0
editorLineNumber.dimmedForeground#4d596a
editorLineNumber.foreground#677589
editorLink.activeForeground#67cbe7
editorMarkerNavigation.background#202730
editorMarkerNavigationError.background#ef7d86
editorMarkerNavigationInfo.background#7cb8ea
editorMarkerNavigationWarning.background#d8b15f
editorOverviewRuler.background#00000000
editorOverviewRuler.border#00000000
editorOverviewRuler.errorForeground#ef7d86
editorOverviewRuler.findMatchForeground#32556f
editorOverviewRuler.infoForeground#7cb8ea
editorOverviewRuler.warningForeground#d8b15f
editorRuler.foreground#2d3642
editorStickyScroll.background#1c222b
editorStickyScroll.border#2d3642
editorStickyScroll.shadow#00000055
editorStickyScrollHover.background#202730
editorSuggestWidget.background#202730
editorSuggestWidget.border#67cbe7
editorSuggestWidget.foreground#dce6f2
editorSuggestWidget.highlightForeground#67cbe7
editorSuggestWidget.selectedBackground#284b64
editorUnicodeHighlight.background#4a3b1c
editorUnicodeHighlight.border#d8b15f
editorWarning.border#00000000
editorWarning.foreground#d8b15f
editorWhitespace.foreground#dce6f222
editorWidget.background#202730
editorWidget.foreground#dce6f2
editorWidget.resizeBorder#67cbe7
errorForeground#ef7d86
focusBorder#67cbe7
foreground#dce6f2
gitDecoration.addedResourceForeground#7ec986
gitDecoration.conflictingResourceForeground#b49cf0
gitDecoration.deletedResourceForeground#d7705e
gitDecoration.ignoredResourceForeground#93a1b2
gitDecoration.modifiedResourceForeground#e5c07b
gitDecoration.renamedResourceForeground#67cbe7
gitDecoration.stageDeletedResourceForeground#d7705e
gitDecoration.stageModifiedResourceForeground#e5c07b
gitDecoration.submoduleResourceForeground#7cb8ea
gitDecoration.untrackedResourceForeground#7ec986
icon.foreground#dce6f2
input.background#202730
input.border#2d3642
input.foreground#dce6f2
input.placeholderForeground#93a1b2
inputOption.activeBackground#67cbe744
inputOption.activeBorder#67cbe7
inputOption.activeForeground#dce6f2
inputValidation.errorBackground#4a252b
inputValidation.errorBorder#ef7d86
inputValidation.infoBackground#17394d
inputValidation.infoBorder#7cb8ea
inputValidation.warningBackground#4a3b1c
inputValidation.warningBorder#d8b15f
list.activeSelectionBackground#284b64
list.activeSelectionForeground#dce6f2
list.errorForeground#ef7d86
list.focusBackground#284b64
list.focusForeground#dce6f2
list.highlightForeground#67cbe7
list.hoverBackground#ffffff12
list.hoverForeground#dce6f2
list.inactiveSelectionBackground#334153
list.inactiveSelectionForeground#d2dce8
list.warningForeground#d8b15f
menu.background#202730
menu.border#2d3642
menu.foreground#d2dce8
menu.selectionBackground#284b64
menu.selectionForeground#dce6f2
menu.separatorBackground#2d3642
menubar.selectionBackground#ffffff12
menubar.selectionForeground#dce6f2
merge.border#2d3642
merge.commonContentBackground#262b32
merge.commonHeaderBackground#3b4048
merge.currentContentBackground#213730
merge.currentHeaderBackground#345d4f
merge.incomingContentBackground#23354a
merge.incomingHeaderBackground#35567a
minimap.background#1c222b
minimap.errorHighlight#ef7d86
minimap.findMatchHighlight#32556f
minimap.selectionHighlight#284b64
minimap.warningHighlight#d8b15f
minimapGutter.addedBackground#7ec986
minimapGutter.deletedBackground#d7705e
minimapGutter.modifiedBackground#e5c07b
minimapSlider.activeBackground#8a97a866
minimapSlider.background#8a97a822
minimapSlider.hoverBackground#8a97a844
notificationCenter.border#2d3642
notificationCenterHeader.background#202730
notificationCenterHeader.foreground#dce6f2
notificationLink.foreground#67cbe7
notifications.background#202730
notifications.border#2d3642
notifications.foreground#dce6f2
notificationsErrorIcon.foreground#ef7d86
notificationsInfoIcon.foreground#7cb8ea
notificationsWarningIcon.foreground#d8b15f
notificationToast.border#2d3642
panel.background#202730
panel.border#2d3642
panelInput.border#2d3642
panelSection.border#2d3642
panelTitle.activeBorder#67cbe7
panelTitle.activeForeground#dce6f2
panelTitle.inactiveForeground#93a1b2
peekView.border#67cbe7
peekViewEditor.background#171c23
peekViewEditor.matchHighlightBackground#32556f
peekViewEditorGutter.background#171c23
peekViewResult.background#171c23
peekViewResult.fileForeground#dce6f2
peekViewResult.lineForeground#93a1b2
peekViewResult.matchHighlightBackground#32556f66
peekViewResult.selectionBackground#284b64
peekViewResult.selectionForeground#dce6f2
peekViewTitle.background#202730
peekViewTitleDescription.foreground#93a1b2
peekViewTitleLabel.foreground#dce6f2
pickerGroup.border#2d3642
pickerGroup.foreground#67cbe7
progressBar.background#67cbe7
quickInput.background#202730
quickInput.foreground#dce6f2
scrollbar.shadow#00000055
scrollbarSlider.activeBackground#8a97a877
scrollbarSlider.background#8a97a833
scrollbarSlider.hoverBackground#8a97a855
settings.focusedRowBackground#ffffff0a
settings.headerForeground#dce6f2
settings.modifiedItemIndicator#67cbe7
sideBar.background#181e26
sideBar.border#2d3642
sideBar.foreground#d2dce8
sideBarSectionHeader.background#202730
sideBarSectionHeader.border#2d3642
sideBarSectionHeader.foreground#dce6f2
sideBarStickyScroll.background#181e26
sideBarStickyScroll.border#2d3642
sideBarStickyScroll.shadow#00000055
sideBarTitle.foreground#dce6f2
statusBar.background#181e26
statusBar.border#2d3642
statusBar.debuggingBackground#d8b15f
statusBar.debuggingForeground#10202a
statusBar.focusBorder#67cbe7
statusBar.foreground#dce6f2
statusBar.noFolderBackground#b49cf0
statusBar.noFolderForeground#10202a
statusBarItem.activeBackground#ffffff12
statusBarItem.hoverBackground#ffffff12
statusBarItem.remoteBackground#67cbe7
statusBarItem.remoteForeground#10202a
symbolIcon.arrayForeground#dce6f2
symbolIcon.booleanForeground#f2a7bb
symbolIcon.classForeground#b49cf0
symbolIcon.colorForeground#f2a7bb
symbolIcon.constantForeground#f2a7bb
symbolIcon.constructorForeground#eef4fb
symbolIcon.enumeratorForeground#b49cf0
symbolIcon.enumeratorMemberForeground#f2a7bb
symbolIcon.eventForeground#67cbe7
symbolIcon.fieldForeground#dce6f2
symbolIcon.fileForeground#dce6f2
symbolIcon.folderForeground#dce6f2
symbolIcon.functionForeground#eef4fb
symbolIcon.interfaceForeground#b49cf0
symbolIcon.keyForeground#f2a7bb
symbolIcon.keywordForeground#67cbe7
symbolIcon.methodForeground#eef4fb
symbolIcon.moduleForeground#c2d7ea
symbolIcon.namespaceForeground#c2d7ea
symbolIcon.nullForeground#f2a7bb
symbolIcon.numberForeground#f2a7bb
symbolIcon.objectForeground#dce6f2
symbolIcon.operatorForeground#67cbe7
symbolIcon.packageForeground#c2d7ea
symbolIcon.propertyForeground#dce6f2
symbolIcon.referenceForeground#67cbe7
symbolIcon.snippetForeground#9fd47e
symbolIcon.stringForeground#9fd47e
symbolIcon.structForeground#b49cf0
symbolIcon.textForeground#dce6f2
symbolIcon.typeParameterForeground#67cbe7
symbolIcon.unitForeground#dce6f2
symbolIcon.variableForeground#dce6f2
tab.activeBackground#1c222b
tab.activeBorder#00000000
tab.activeBorderTop#00000000
tab.activeForeground#dce6f2
tab.border#2d3642
tab.hoverBackground#202730
tab.hoverForeground#dce6f2
tab.inactiveBackground#171c23
tab.inactiveForeground#93a1b2aa
tab.lastPinnedBorder#2d3642
tab.unfocusedActiveForeground#d2dce8
tab.unfocusedInactiveForeground#93a1b2aa
terminal.ansiBlack#151a21
terminal.ansiBlue#67cbe7
terminal.ansiBrightBlack#677589
terminal.ansiBrightBlue#8be0f6
terminal.ansiBrightCyan#9ee8d8
terminal.ansiBrightGreen#9fd47e
terminal.ansiBrightMagenta#c8b7f5
terminal.ansiBrightRed#ef7d86
terminal.ansiBrightWhite#f6f9fc
terminal.ansiBrightYellow#e6c987
terminal.ansiCyan#79d7c3
terminal.ansiGreen#7ec986
terminal.ansiMagenta#b49cf0
terminal.ansiRed#d7705e
terminal.ansiWhite#dce6f2
terminal.ansiYellow#d8b15f
terminal.background#1c222b
terminal.border#2d3642
terminal.foreground#dce6f2
terminal.selectionBackground#284b64
terminal.selectionForeground#dce6f2
terminal.tab.activeBorder#67cbe7
terminalCommandDecoration.defaultBackground#67cbe7
terminalCommandDecoration.errorBackground#ef7d86
terminalCommandDecoration.successBackground#7ec986
terminalCursor.background#1c222b
terminalCursor.foreground#8be0f6
textBlockQuote.background#ffffff0a
textBlockQuote.border#67cbe744
textCodeBlock.background#171c23
textLink.activeForeground#8be0f6
textLink.foreground#67cbe7
textPreformat.foreground#dce6f2
textSeparator.foreground#2d3642
titleBar.activeBackground#181e26
titleBar.activeForeground#d2dce8
titleBar.border#00000000
titleBar.inactiveBackground#181e26cc
titleBar.inactiveForeground#93a1b2aa
tree.indentGuidesStroke#333d4b
tree.tableColumnsBorder#2d3642
tree.tableOddRowsBackground#ffffff0a
walkThrough.embeddedEditorBackground#171c23
welcomePage.progress.background#313a46
welcomePage.progress.foreground#67cbe7
window.activeBorder#00000000
window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
comment, punctuation.definition.comment	#748396	italic
invalid, invalid.illegal, invalid.deprecated, invalid.broken, invalid.unimplemented	#ef7d86	—
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	#67cbe7	—
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	#67cbe7	—
punctuation, meta.brace, meta.delimiter, punctuation.separator, punctuation.terminator, punctuation.accessor	#8a97a8	—
string, markup.inline.raw, markup.fenced_code.block.markdown	#9fd47e	—
punctuation.definition.string, punctuation.quasi.element	#9fd47e	—
constant.character.escape, constant.character.string.escape	#67cbe7	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end	#67cbe7	—
meta.template.expression, source.ts.embedded, source.js.embedded	#dce6f2	—
string.regexp, constant.other.character-class.regexp	#79d7c3	—
keyword.operator.quantifier.regexp, keyword.operator.or.regexp, punctuation.definition.group.regexp, punctuation.definition.character-class.regexp	#67cbe7	—
constant.numeric, constant.language.boolean, constant.language.null, constant.language.undefined, constant.language, constant.character, constant.other.symbol, constant.other.color, support.constant	#f2a7bb	—
variable.other.constant, variable.other.enummember, support.constant.property-value, support.constant.color, support.constant.color.w3c-standard-color-name	#f2a7bb	—
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	#b49cf0	—
entity.name.type.parameter, variable.other.generic-type	#67cbe7	—
entity.name.namespace, entity.name.module, entity.name.package, entity.name.scope-resolution, support.module, support.type.module	#c2d7ea	—
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	#eef4fb	—
support.function.builtin, support.function.console	#e5eff9	—
entity.name.decorator, meta.function.decorator, meta.annotation, punctuation.definition.annotation, support.type.property-name.annotation, support.token.decorator.python	#67cbe7	—
variable, meta.definition.variable.name, entity.name.variable, support.variable, meta.object-literal.key, meta.definition.property	#dce6f2	—
variable.parameter, meta.parameter, function.parameter	#d8bf88	—
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	#dce6f2	—
variable.language, variable.language.this, variable.language.self, variable.language.super, support.variable.magic	#67cbe7	italic
entity.name.tag, entity.name.tag.custom, entity.name.tag.localname, meta.tag	#67cbe7	—
punctuation.definition.tag, meta.tag punctuation	#8a97a8	—
entity.other.attribute-name, support.type.property-name.css	#f2a7bb	—
meta.selector, entity.other.attribute-name.class, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element	#67cbe7	—
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	#dce6f2	—
markup.heading, entity.name.section	#b49cf0	—
markup.bold, punctuation.definition.bold	#f2a7bb	—
markup.italic, punctuation.definition.italic	#67cbe7	italic
markup.underline.link, markup.underline.link.image, string.other.link.title, string.other.link.description	#67cbe7	—
markup.quote, punctuation.definition.list	#748396	—
markup.inserted, markup.inserted.diff	#9fd47e	—
markup.deleted, markup.deleted.diff	#ef7d86	—
markup.changed, markup.changed.diff	#67cbe7	—

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