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

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#f4ecda
activityBar.foreground#495B61
activityBarBadge.background#009688
activityBarBadge.foreground#000000
badge.background#e4d9c330
badge.foreground#93a1a1
button.background#009688
debugToolBar.background#f4ecda
diffEditor.insertedTextBackground#85990015
diffEditor.removedTextBackground#dc322f20
dropdown.background#f4ecda
dropdown.border#00000010
editor.background#f4ecda
editor.foreground#495B61
editor.lineHighlightBackground#e4d9c350
editor.selectionBackground#e4d9c3
editor.selectionHighlightBackground#e4d9c3
editorBracketMatch.background#f4ecda
editorBracketMatch.border#27272750
editorCursor.foreground#272727
editorError.foreground#dc322f70
editorGroup.border#00000020
editorGroupHeader.tabsBackground#f4ecda
editorGutter.addedBackground#85990060
editorGutter.deletedBackground#dc322f60
editorGutter.modifiedBackground#2e8ccf60
editorHoverWidget.background#eee8d9
editorHoverWidget.border#00000010
editorIndentGuide.background#e4d9c3
editorLineNumber.foreground#93a1a1
editorLink.activeForeground#495B61
editorMarkerNavigation.background#495B6105
editorSuggestWidget.background#eee8d9
editorSuggestWidget.border#00000010
editorSuggestWidget.foreground#495B61
editorSuggestWidget.highlightForeground#009688
editorSuggestWidget.selectedBackground#e4d9c350
editorWarning.foreground#85990070
editorWhitespace.foreground#495B6110
editorWidget.background#eee8d9
editorWidget.border#eee8d9
extensionButton.prominentBackground#85990090
extensionButton.prominentHoverBackground#859900
focusBorder#eee8d600
input.background#eee8d9
input.border#eee8d9
input.foreground#90A4AE
input.placeholderForeground#495B6160
inputValidation.errorBorder#dc322f
inputValidation.infoBorder#2e8ccf
inputValidation.warningBorder#b4881d
list.activeSelectionBackground#eee8d9
list.activeSelectionForeground#009688
list.focusBackground#495B6120
list.focusForeground#495B61
list.highlightForeground#009688
list.hoverBackground#eee8d9
list.hoverForeground#d33682
list.inactiveSelectionBackground#f4ecda
list.inactiveSelectionForeground#009688
notification.background#f4ecda
notification.buttonBackground#495B6150
notification.foreground#495B61
notification.infoBackground#2e8ccf
notification.infoForeground#eee8d6
notification.warningBackground#dc322f
notification.warningForeground#eee8d6
panel.border#e4d9c3
panelTitle.activeForeground#495B61
peekView.border#00000020
peekViewEditor.background#eee8d9
peekViewEditorGutter.background#eee8d9
peekViewResult.background#eee8d9
peekViewTitle.background#eee8d9
peekViewTitleDescription.foreground#495B6160
pickerGroup.foreground#009688
progressBar.background#009688
quickInputList.focusBackground#f4ecda
scrollbar.shadow#f4ecda00
scrollbarSlider.activeBackground#009688
scrollbarSlider.background#00000015
scrollbarSlider.hoverBackground#00000025
selection.background#e4d9c3
sideBar.background#f4ecda
sideBar.border#e4d9c3
sideBar.foreground#6D7D85
sideBarSectionHeader.background#f4ecda
sideBarTitle.foreground#495B61
statusBar.background#f4ecda
statusBar.debuggingBackground#6c71c4
statusBar.debuggingForeground#eee8d6
statusBar.foreground#7E939E
statusBar.noFolderBackground#f4ecda
tab.activeBorder#009688
tab.activeForeground#000000
tab.border#f4ecda
tab.inactiveBackground#f4ecda
tab.inactiveForeground#6D7D85
tab.unfocusedActiveBorder#93a1a1
tab.unfocusedActiveForeground#495B61
terminal.ansiBlack#93a1a1
terminal.ansiBlue#2e8ccf
terminal.ansiBrightBlack#93a1a1
terminal.ansiBrightBlue#2e8ccf
terminal.ansiBrightCyan#32a198
terminal.ansiBrightGreen#859900
terminal.ansiBrightpurple#6c71c4
terminal.ansiBrightRed#dc322f
terminal.ansiBrightWhite#eee8d6
terminal.ansiBrightYellow#b4881d
terminal.ansiCyan#32a198
terminal.ansiGreen#859900
terminal.ansipurple#6c71c4
terminal.ansiRed#dc322f
terminal.ansiWhite#eee8d6
terminal.ansiYellow#b4881d
textLink.activeForeground#495B61
textLink.foreground#009688
titleBar.activeBackground#f4ecda
titleBar.activeForeground#93a1a1
titleBar.inactiveBackground#f4ecda
titleBar.inactiveForeground#93a1a1
widget.shadow#00000020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#495B61	—
comment, punctuation.definition.comment	#93a1a1	italic
variable, string constant.other.placeholder	#495B61	—
support.variable.property, meta.jsx.children	#495B61	—
constant.other.color	#eee8d6	—
invalid, invalid.illegal	#dc322f	—
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	#bab6ae	—
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html	#bab6ae	—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.class.component	#268bd2	—
support.class.component	—	bold
entity.other.attribute-name	#93a1a1	—
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	#dc322f	—
variable.other.constant	#d33682	—
support.other.variable, string.other.link, variable.other.normal.shell, variable.other.positional.shell	#d33682	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#d33682	—
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	#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	#dc322f	—
variable.language	#dc322f	—
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	#dc322f	—
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	#dc322f	—
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	#495B61	—
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	#d33682	italic
markup.bold, markup.bold string	#d33682	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	#d33682	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	#495B61	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#495B61	—
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	#bab6ae	—
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	#bab6ae	—
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	#bab6ae	—
keyword.operator, keyword.punctuation	#009688	—
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	#bab6ae	—
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}!`;
}