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

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#002b36
activityBar.foreground#a0b1b3
activityBarBadge.background#80CBC4
activityBarBadge.foreground#000000
badge.background#00000030
badge.foreground#586e75
button.background#80CBC4
debugToolBar.background#002b36
diffEditor.insertedTextBackground#85990015
diffEditor.removedTextBackground#C94E4420
dropdown.background#002b36
dropdown.border#FFFFFF10
editor.background#002b36
editor.foreground#a0b1b3
editor.lineHighlightBackground#00000050
editor.selectionBackground#80CBC420
editor.selectionHighlightBackground#80CBC420
editorBracketMatch.background#002b36
editorBracketMatch.border#FFCC0050
editorCursor.foreground#FFCC00
editorError.foreground#C94E4470
editorGroup.border#00000030
editorGroupHeader.tabsBackground#002b36
editorGutter.addedBackground#85990060
editorGutter.deletedBackground#C94E4460
editorGutter.modifiedBackground#2e8ccf60
editorHoverWidget.background#003441
editorHoverWidget.border#FFFFFF10
editorIndentGuide.background#37474F80
editorLineNumber.foreground#37474F
editorLink.activeForeground#a0b1b3
editorMarkerNavigation.background#a0b1b305
editorSuggestWidget.background#003441
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#a0b1b3
editorSuggestWidget.highlightForeground#80CBC4
editorSuggestWidget.selectedBackground#00000050
editorWarning.foreground#85990070
editorWhitespace.foreground#a0b1b310
editorWidget.background#003441
editorWidget.border#003441
extensionButton.prominentBackground#85990090
extensionButton.prominentHoverBackground#859900
focusBorder#eee8d600
input.background#003441
input.border#003441
input.foreground#EEFFFF
input.placeholderForeground#a0b1b360
inputValidation.errorBorder#C94E44
inputValidation.infoBorder#2e8ccf
inputValidation.warningBorder#b4881d
list.activeSelectionBackground#003441
list.activeSelectionForeground#80CBC4
list.focusBackground#a0b1b320
list.focusForeground#a0b1b3
list.highlightForeground#80CBC4
list.hoverBackground#003441
list.hoverForeground#eee8d6
list.inactiveSelectionBackground#002b36
list.inactiveSelectionForeground#80CBC4
notification.background#002b36
notification.buttonBackground#a0b1b350
notification.foreground#a0b1b3
notification.infoBackground#2e8ccf
notification.infoForeground#eee8d6
notification.warningBackground#C94E44
notification.warningForeground#eee8d6
panel.border#37474F80
panelTitle.activeForeground#a0b1b3
peekView.border#00000030
peekViewEditor.background#003441
peekViewEditorGutter.background#003441
peekViewResult.background#003441
peekViewTitle.background#003441
peekViewTitleDescription.foreground#a0b1b360
pickerGroup.foreground#80CBC4
progressBar.background#80CBC4
quickInputList.focusBackground#002b36
scrollbar.shadow#002b3600
scrollbarSlider.activeBackground#80CBC4
scrollbarSlider.background#00000030
scrollbarSlider.hoverBackground#00000020
selection.background#80CBC420
sideBar.background#002b36
sideBar.border#37474F80
sideBar.foreground#839aa2
sideBarSectionHeader.background#002b36
sideBarTitle.foreground#a0b1b3
statusBar.background#002b36
statusBar.debuggingBackground#6c71c4
statusBar.debuggingForeground#eee8d6
statusBar.foreground#839aa2
statusBar.noFolderBackground#002b36
tab.activeBorder#80CBC4
tab.activeForeground#eee8d6
tab.border#002b36
tab.inactiveBackground#002b36
tab.inactiveForeground#839aa2
tab.unfocusedActiveBorder#586e75
tab.unfocusedActiveForeground#a0b1b3
terminal.ansiBlack#586e75
terminal.ansiBlue#2e8ccf
terminal.ansiBrightBlack#586e75
terminal.ansiBrightBlue#2e8ccf
terminal.ansiBrightCyan#32a198
terminal.ansiBrightGreen#859900
terminal.ansiBrightpurple#6c71c4
terminal.ansiBrightRed#C94E44
terminal.ansiBrightWhite#eee8d6
terminal.ansiBrightYellow#b4881d
terminal.ansiCyan#32a198
terminal.ansiGreen#859900
terminal.ansipurple#6c71c4
terminal.ansiRed#C94E44
terminal.ansiWhite#eee8d6
terminal.ansiYellow#b4881d
textLink.activeForeground#a0b1b3
textLink.foreground#80CBC4
titleBar.activeBackground#002b36
titleBar.activeForeground#586e75
titleBar.inactiveBackground#002b36
titleBar.inactiveForeground#586e75
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#a0b1b3	—
comment, punctuation.definition.comment	#586e75	italic
variable, string constant.other.placeholder	#a0b1b3	—
support.variable.property, meta.jsx.children	#a0b1b3	—
constant.other.color	#eee8d6	—
invalid, invalid.illegal	#C94E44	—
invalid.deprecated	#6c71c4	—
keyword, storage.type, storage.modifier	#859900	—
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	#586e75	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#586e75	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.class.component	#268bd2	—
support.class.component	—	bold
entity.other.attribute-name	#446a75	—
entity.name.function, meta.function-call - variable.other.object, meta.function-call.generic, variable.function, support.function, keyword.other.special-method	#268bd2	bold
source.cpp meta.block variable.other	#C94E44	—
variable.other.constant	#D35A93	—
support.other.variable, string.other.link, variable.other.normal.shell, variable.other.positional.shell	#D35A93	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#D35A93	—
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	#32a198	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	#b4881d	—
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	#C94E44	—
variable.language	#C94E44	—
entity.name.method.js	#2e8ccf	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#2e8ccf	—
entity.other.attribute-name.class	#b4881d	—
source.sass keyword.control	#2e8ccf	—
markup.inserted	#859900	—
markup.deleted	#C94E44	—
markup.changed	#6c71c4	—
string.regexp	#32a198	—
constant.character.escape	#32a198	—
url, link, uri	—	underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js	#2e8ccf	—
source.js constant.other.object.key.js string.unquoted.label.js	#C94E44	—
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	#859900	—
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	#859900	—
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	#859900	—
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	#859900	—
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	#a0b1b3	—
text.html.markdown markup.inline.raw.markdown	#6c71c4	—
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	#859900	bold
markup.italic	#D35A93	italic
markup.bold, markup.bold string	#D35A93	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	#D35A93	bold
markup.underline	#F78C6C	underline
markup.strike		strike
markup.quote punctuation.definition.blockquote.markdown	#65737E	—
markup.quote		italic
string.other.link.title.markdown	#2e8ccf	—
string.other.link.description.title.markdown	#6c71c4	—
constant.other.reference.link.markdown	#b4881d	—
markup.raw.block	#6c71c4	—
markup.raw.block.fenced.markdown	#65737E	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#a0b1b3	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#a0b1b3	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#32a198	—
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	#586e75	—
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	#586e75	—
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	#586e75	—
keyword.operator, keyword.punctuation	#32a198	—
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	#586e75	—
meta.decorator, meta.decorator variable.other.readwrite	#b4881d	—

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