Momo Theme

Name: Momo Theme
Author: momosct

Publisher: momosctThemes in package: 6

Momo Theme - Visual Studio Code theme inspired by Material, Solarized, Boxy, and One Dark themes

Open in VS Code GitHub

Color themes

VS Code preview

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

Momo Theme — MomoOneDark

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...

main*

Copilot

Ln 5, Col 12

Spaces: 2

UTF-8

TypeScript

Dark+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#282c34
activityBar.foreground#bebebe
activityBarBadge.background#b8ce6c
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#7f848e
button.background#b8ce6c
debugToolBar.background#282c34
diffEditor.insertedTextBackground#b8ce6c15
diffEditor.removedTextBackground#ff657a20
dropdown.background#282c34
dropdown.border#FFFFFF10
editor.background#282c34
editor.foreground#bebebe
editor.lineHighlightBackground#00000050
editor.selectionBackground#80CBC420
editor.selectionHighlightBackground#80CBC420
editorBracketMatch.background#282c34
editorBracketMatch.border#FFCC0050
editorCursor.foreground#FFCC00
editorError.foreground#ff657a70
editorGroup.border#00000030
editorGroupHeader.tabsBackground#282c34
editorGutter.addedBackground#b8ce6c60
editorGutter.deletedBackground#ff657a60
editorGutter.modifiedBackground#61afef60
editorHoverWidget.background#21252b
editorHoverWidget.border#FFFFFF10
editorIndentGuide.background#37474F80
editorLineNumber.foreground#566c77
editorLink.activeForeground#bebebe
editorMarkerNavigation.background#bebebe05
editorSuggestWidget.background#21252b
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#bebebe
editorSuggestWidget.highlightForeground#b8ce6c
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#b8ce6c70
editorWhitespace.foreground#bebebe10
editorWidget.background#21252b
editorWidget.border#21252b
extensionButton.prominentBackground#b8ce6c90
extensionButton.prominentHoverBackground#b8ce6c
focusBorder#eee8d600
input.background#21252b
input.border#21252b
input.foreground#cccccc
input.placeholderForeground#bebebe60
inputValidation.errorBorder#ff657a
inputValidation.infoBorder#61afef
inputValidation.warningBorder#eec585
list.activeSelectionBackground#21252b
list.activeSelectionForeground#b8ce6c
list.focusBackground#bebebe20
list.focusForeground#bebebe
list.highlightForeground#b8ce6c
list.hoverBackground#21252b
list.hoverForeground#eee8d6
list.inactiveSelectionBackground#282c34
list.inactiveSelectionForeground#b8ce6c
notification.background#282c34
notification.buttonBackground#bebebe50
notification.foreground#bebebe
notification.infoBackground#61afef
notification.infoForeground#eeeeee
notification.warningBackground#ff657a
notification.warningForeground#eeeeee
panel.border#37474F80
panelTitle.activeForeground#bebebe
peekView.border#00000030
peekViewEditor.background#21252b
peekViewEditorGutter.background#21252b
peekViewResult.background#21252b
peekViewTitle.background#21252b
peekViewTitleDescription.foreground#bebebe60
pickerGroup.foreground#b8ce6c
progressBar.background#b8ce6c
quickInputList.focusBackground#282c34
scrollbar.shadow#282c3400
scrollbarSlider.activeBackground#b8ce6c
scrollbarSlider.background#00000030
scrollbarSlider.hoverBackground#00000020
selection.background#80CBC420
sideBar.background#282c34
sideBar.border#37474F80
sideBar.foreground#839aa2
sideBarSectionHeader.background#282c34
sideBarTitle.foreground#bebebe
statusBar.background#282c34
statusBar.debuggingBackground#baa0f8
statusBar.debuggingForeground#eeeeee
statusBar.foreground#839aa2
statusBar.noFolderBackground#282c34
tab.activeBorder#b8ce6c
tab.activeForeground#eee8d6
tab.border#282c34
tab.inactiveBackground#282c34
tab.inactiveForeground#839aa2
tab.unfocusedActiveBorder#7f848e
tab.unfocusedActiveForeground#bebebe
terminal.ansiBlack#7f848e
terminal.ansiBlue#61afef
terminal.ansiBrightBlack#7f848e
terminal.ansiBrightBlue#61afef
terminal.ansiBrightCyan#56ada7
terminal.ansiBrightGreen#b8ce6c
terminal.ansiBrightpurple#baa0f8
terminal.ansiBrightRed#ff657a
terminal.ansiBrightWhite#eeeeee
terminal.ansiBrightYellow#eec585
terminal.ansiCyan#56ada7
terminal.ansiGreen#b8ce6c
terminal.ansipurple#baa0f8
terminal.ansiRed#ff657a
terminal.ansiWhite#eeeeee
terminal.ansiYellow#eec585
textLink.activeForeground#bebebe
textLink.foreground#b8ce6c
titleBar.activeBackground#282c34
titleBar.activeForeground#7f848e
titleBar.inactiveBackground#282c34
titleBar.inactiveForeground#7f848e
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#bebebe	—
comment, punctuation.definition.comment	#7f848e	italic
variable, string constant.other.placeholder	#bebebe	—
support.variable.property, meta.jsx.children	#bebebe	—
constant.other.color	#eeeeee	—
invalid, invalid.illegal	#ff657a	—
invalid.deprecated	#baa0f8	—
keyword, storage.type, storage.modifier	#9cd1bb	—
keyword.control, storage.type, storage.modifier	—	—
Keyword, Storage	—	—
constant.other.color, meta.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, punctuation	#7f848e	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#7f848e	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.class.component	#67adde	—
support.class.component	—	bold
entity.other.attribute-name	#566c77	—
entity.name.function, meta.function-call - variable.other.object, meta.function-call.generic, variable.function, support.function, keyword.other.special-method	#b8ce6c	bold
source.cpp meta.block variable.other	#ff657a	—
variable.other.constant	#db6ea9	—
support.other.variable, string.other.link, variable.other.normal.shell, variable.other.positional.shell	#db6ea9	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#db6ea9	—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js	#f2b088	normal
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types	#eec585	—
support.type	#8faeb9	—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name	#8faeb9	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#ff657a	—
variable.language	#ff657a	—
entity.name.method.js	#61afef	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#61afef	—
entity.other.attribute-name.class	#eec585	—
source.sass keyword.control	#61afef	—
markup.inserted	#b8ce6c	—
markup.deleted	#ff657a	—
markup.changed	#baa0f8	—
string.regexp	#f2b088	—
constant.character.escape	#56ada7	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#61afef	—
source.js constant.other.object.key.js string.unquoted.label.js	#ff657a	—
source.json meta.structure.dictionary.json support.type.property-name.json, meta.object-literal.key	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#32a198	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#2e8ccf	—
text.html.markdown, punctuation.definition.list_item.markdown	#bebebe	—
text.html.markdown markup.inline.raw.markdown	#baa0f8	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#65737E	—
text.html.markdown meta.dummy.line-break		—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#b8ce6c	bold
markup.italic	#db6ea9	italic
markup.bold, markup.bold string	#db6ea9	bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string	#db6ea9	bold
markup.underline	#ffad6a	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote		italic
string.other.link.title.markdown	#61afef	—
string.other.link.description.title.markdown	#baa0f8	—
constant.other.reference.link.markdown	#eec585	—
markup.raw.block	#baa0f8	—
markup.raw.block.fenced.markdown	#65737E	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#bebebe	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#bebebe	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#f2b088	—
meta.brace.square, punctuation.bracket.square, punctuation.definition.list.begin, punctuation.definition.list.end, meta.item-access punctuation.definition.arguments.begin, meta.item-access punctuation.definition.arguments.end, meta.function-call meta.item-access punctuation.definition.arguments.begin, meta.function-call meta.item-access punctuation.definition.arguments.end	#7f848e	—
meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.bracket.round, punctuation.parenthesis.begin, punctuation.parenthesis.end, meta.function-call punctuation.definition.arguments.begin, meta.function-call punctuation.definition.arguments.end	#7f848e	—
meta.brace.curly, punctuation.definition.block, punctuation.definition.binding-pattern.object, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html, punctuation.section.method.begin.bracket.curly, punctuation.section.method.end.bracket.curly, punctuation.section.block.begin.bracket.curly, punctuation.section.block.end.bracket.curly, punctuation.section.embedded	#7f848e	—
keyword.operator, keyword.punctuation	#ff657a	—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end, punctuation.definition.string.begin, punctuation.definition.string.end	#7f848e	—
meta.decorator, meta.decorator variable.other.readwrite	#b8ce6c	—

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