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 — MomoLight

fetchUser.ts

index.ts

README.md

srccomponentsfetchUser.ts

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

Light+

colors

Workbench UI color keys from the theme JSON colors map.

activityBar.background#ebebeb
activityBar.foreground#374755
activityBarBadge.background#009688
activityBarBadge.foreground#000000
badge.background#CCD7DA30
badge.foreground#acc0c8
button.background#009688
debugToolBar.background#ebebeb
diffEditor.insertedTextBackground#00968815
diffEditor.removedTextBackground#E5393520
dropdown.background#ebebeb
dropdown.border#00000010
editor.background#ebebeb
editor.foreground#374755
editor.lineHighlightBackground#CCD7DA50
editor.selectionBackground#80CBC440
editor.selectionHighlightBackground#80CBC440
editorBracketMatch.background#ebebeb
editorBracketMatch.border#27272750
editorCursor.foreground#272727
editorError.foreground#E5393570
editorGroup.border#00000020
editorGroupHeader.tabsBackground#ebebeb
editorGutter.addedBackground#00968860
editorGutter.deletedBackground#E5393560
editorGutter.modifiedBackground#6182B860
editorHoverWidget.background#F3F3F3
editorHoverWidget.border#00000010
editorIndentGuide.background#dadada
editorLineNumber.foreground#CFD8DC
editorLink.activeForeground#374755
editorMarkerNavigation.background#37475505
editorSuggestWidget.background#F3F3F3
editorSuggestWidget.border#00000010
editorSuggestWidget.foreground#374755
editorSuggestWidget.highlightForeground#009688
editorSuggestWidget.selectedBackground#CCD7DA50
editorWarning.foreground#00968870
editorWhitespace.foreground#37475510
editorWidget.background#F3F3F3
editorWidget.border#F3F3F3
extensionButton.prominentBackground#00968890
extensionButton.prominentHoverBackground#009688
focusBorder#FFFFFF00
input.background#F3F3F3
input.border#F3F3F3
input.foreground#8099a9
input.placeholderForeground#37475560
inputValidation.errorBorder#E53935
inputValidation.infoBorder#6182B8
inputValidation.warningBorder#755200
list.activeSelectionBackground#F3F3F3
list.activeSelectionForeground#009688
list.focusBackground#37475520
list.focusForeground#374755
list.highlightForeground#009688
list.hoverBackground#F3F3F3
list.hoverForeground#b44ecc
list.inactiveSelectionBackground#ebebeb
list.inactiveSelectionForeground#009688
notification.background#ebebeb
notification.buttonBackground#37475550
notification.foreground#374755
notification.infoBackground#6182B8
notification.infoForeground#ffffff
notification.warningBackground#E53935
notification.warningForeground#ffffff
panel.border#dadada
panelTitle.activeForeground#374755
peekView.border#00000020
peekViewEditor.background#F3F3F3
peekViewEditorGutter.background#F3F3F3
peekViewResult.background#F3F3F3
peekViewTitle.background#F3F3F3
peekViewTitleDescription.foreground#37475560
pickerGroup.foreground#009688
progressBar.background#009688
quickInputList.focusBackground#ebebeb
scrollbar.shadow#ebebeb00
scrollbarSlider.activeBackground#009688
scrollbarSlider.background#00000015
scrollbarSlider.hoverBackground#00000025
selection.background#80CBC440
sideBar.background#ebebeb
sideBar.border#dadada
sideBar.foreground#647279
sideBarSectionHeader.background#ebebeb
sideBarTitle.foreground#374755
statusBar.background#ebebeb
statusBar.debuggingBackground#b44ecc
statusBar.debuggingForeground#ffffff
statusBar.foreground#7E939E
statusBar.noFolderBackground#ebebeb
tab.activeBorder#009688
tab.activeForeground#000000
tab.border#ebebeb
tab.inactiveBackground#ebebeb
tab.inactiveForeground#647279
tab.unfocusedActiveBorder#acc0c8
tab.unfocusedActiveForeground#374755
terminal.ansiBlack#acc0c8
terminal.ansiBlue#6182B8
terminal.ansiBrightBlack#acc0c8
terminal.ansiBrightBlue#6182B8
terminal.ansiBrightCyan#39ADB5
terminal.ansiBrightGreen#009688
terminal.ansiBrightpurple#b44ecc
terminal.ansiBrightRed#E53935
terminal.ansiBrightWhite#ffffff
terminal.ansiBrightYellow#755200
terminal.ansiCyan#39ADB5
terminal.ansiGreen#009688
terminal.ansipurple#b44ecc
terminal.ansiRed#E53935
terminal.ansiWhite#ffffff
terminal.ansiYellow#755200
textLink.activeForeground#374755
textLink.foreground#009688
titleBar.activeBackground#ebebeb
titleBar.activeForeground#acc0c8
titleBar.inactiveBackground#ebebeb
titleBar.inactiveForeground#acc0c8
widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#374755	—
comment, punctuation.definition.comment	#acc0c8	italic
variable, string constant.other.placeholder	#374755	—
support.variable.property, meta.jsx.children	#374755	—
constant.other.color	#ffffff	—
invalid, invalid.illegal	#E53935	—
invalid.deprecated	#b44ecc	—
keyword, storage.type, storage.modifier	#6f52c7	—
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	#93A1A7	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#93A1A7	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.class.component	#a32763	—
support.class.component	—	bold
entity.other.attribute-name	#b44ecc	—
entity.name.function, meta.function-call - variable.other.object, meta.function-call.generic, variable.function, support.function, keyword.other.special-method	#227b9f	bold
source.cpp meta.block variable.other	#E53935	—
variable.other.constant	#a32763	—
support.other.variable, string.other.link, variable.other.normal.shell, variable.other.positional.shell	#a32763	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#a32763	—
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	#009688	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	#755200	—
support.type	#588fbb	—
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	#588fbb	—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js	#E53935	—
variable.language	#E53935	—
entity.name.method.js	#6182B8	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#6182B8	—
entity.other.attribute-name.class	#755200	—
source.sass keyword.control	#6182B8	—
markup.inserted	#009688	—
markup.deleted	#E53935	—
markup.changed	#b44ecc	—
string.regexp	#009688	—
constant.character.escape	#39ADB5	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#6182B8	—
source.js constant.other.object.key.js string.unquoted.label.js	#E53935	—
source.json meta.structure.dictionary.json support.type.property-name.json, meta.object-literal.key	#0c60a5	—
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json	#0D7579	—
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	#0c60a5	—
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	#0D7579	—
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	#0c60a5	—
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	#0D7579	—
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	#0c60a5	—
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	#0D7579	—
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	#0c60a5	—
text.html.markdown, punctuation.definition.list_item.markdown	#374755	—
text.html.markdown markup.inline.raw.markdown	#b44ecc	—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown	#E7EAEC	—
text.html.markdown meta.dummy.line-break		—
markdown.heading, markup.heading \| markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown	#009688	bold
markup.italic	#a32763	italic
markup.bold, markup.bold string	#a32763	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	#a32763	bold
markup.underline	#F76D47	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#E7EAEC	—
markup.quote		italic
string.other.link.title.markdown	#6182B8	—
string.other.link.description.title.markdown	#b44ecc	—
constant.other.reference.link.markdown	#755200	—
markup.raw.block	#b44ecc	—
markup.raw.block.fenced.markdown	#E7EAEC	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#374755	—
variable.language.fenced.markdown	#E7EAEC	—
meta.separator	#E7EAEC	bold
markup.table	#374755	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#009688	—
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	#93A1A7	—
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	#93A1A7	—
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	#93A1A7	—
keyword.operator, keyword.punctuation	#249ba3	—
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	#93A1A7	—
meta.decorator, meta.decorator variable.other.readwrite	#755200	—

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