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

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#1e1d40
activityBar.foreground#bb98e9
activityBarBadge.background#bb98e9
activityBarBadge.foreground#000000
badge.background#7c5ff130
badge.foreground#675777
button.background#bb98e9
debugToolBar.background#1e1d40
diffEditor.insertedTextBackground#75d12e15
diffEditor.removedTextBackground#ef4e6a20
dropdown.background#1e1d40
dropdown.border#FFFFFF10
editor.background#1e1d40
editor.foreground#bb98e9
editor.lineHighlightBackground#7c5ff150
editor.selectionBackground#7c51f130
editor.selectionHighlightBackground#7c51f130
editorBracketMatch.background#1e1d40
editorBracketMatch.border#FFCC0050
editorCursor.foreground#FFCC00
editorError.foreground#ef4e6a70
editorGroup.border#00000030
editorGroupHeader.tabsBackground#1e1d40
editorGutter.addedBackground#75d12e60
editorGutter.deletedBackground#ef4e6a60
editorGutter.modifiedBackground#2e8ccf60
editorHoverWidget.background#171636
editorHoverWidget.border#FFFFFF10
editorIndentGuide.background#7c51f130
editorLineNumber.foreground#7c51f160
editorLink.activeForeground#bb98e9
editorMarkerNavigation.background#bb98e905
editorSuggestWidget.background#171636
editorSuggestWidget.border#FFFFFF10
editorSuggestWidget.foreground#bb98e9
editorSuggestWidget.highlightForeground#bb98e9
editorSuggestWidget.selectedBackground#7c5ff150
editorWarning.foreground#75d12e70
editorWhitespace.foreground#bb98e910
editorWidget.background#171636
editorWidget.border#171636
extensionButton.prominentBackground#75d12e90
extensionButton.prominentHoverBackground#75d12e
focusBorder#eee8d600
input.background#171636
input.border#171636
input.foreground#bb98e9
input.placeholderForeground#bb98e960
inputValidation.errorBorder#ef4e6a
inputValidation.infoBorder#2e8ccf
inputValidation.warningBorder#e58e36
list.activeSelectionBackground#171636
list.activeSelectionForeground#bb98e9
list.focusBackground#bb98e920
list.focusForeground#bb98e9
list.highlightForeground#bb98e9
list.hoverBackground#171636
list.hoverForeground#e58e36
list.inactiveSelectionBackground#1e1d40
list.inactiveSelectionForeground#bb98e9
notification.background#1e1d40
notification.buttonBackground#bb98e950
notification.foreground#bb98e9
notification.infoBackground#2e8ccf
notification.infoForeground#eee8d6
notification.warningBackground#ef4e6a
notification.warningForeground#eee8d6
panel.border#37474F80
panelTitle.activeForeground#bb98e9
peekView.border#00000030
peekViewEditor.background#171636
peekViewEditorGutter.background#171636
peekViewResult.background#171636
peekViewTitle.background#171636
peekViewTitleDescription.foreground#bb98e960
pickerGroup.foreground#bb98e9
progressBar.background#bb98e9
quickInputList.focusBackground#1e1d40
scrollbar.shadow#1e1d4000
scrollbarSlider.activeBackground#bb98e9
scrollbarSlider.background#00000030
scrollbarSlider.hoverBackground#00000020
selection.background#7c51f130
sideBar.background#1e1d40
sideBar.border#37474F80
sideBar.foreground#7c51f1
sideBarSectionHeader.background#1e1d40
sideBarTitle.foreground#bb98e9
statusBar.background#1e1d40
statusBar.debuggingBackground#6c71c4
statusBar.debuggingForeground#eee8d6
statusBar.foreground#7c51f1
statusBar.noFolderBackground#1e1d40
tab.activeBorder#bb98e9
tab.activeForeground#e58e36
tab.border#1e1d40
tab.inactiveBackground#1e1d40
tab.inactiveForeground#7c51f1
tab.unfocusedActiveBorder#675777
tab.unfocusedActiveForeground#bb98e9
terminal.ansiBlack#675777
terminal.ansiBlue#2e8ccf
terminal.ansiBrightBlack#675777
terminal.ansiBrightBlue#2e8ccf
terminal.ansiBrightCyan#00c5c7
terminal.ansiBrightGreen#75d12e
terminal.ansiBrightpurple#6c71c4
terminal.ansiBrightRed#ef4e6a
terminal.ansiBrightWhite#eee8d6
terminal.ansiBrightYellow#e58e36
terminal.ansiCyan#00c5c7
terminal.ansiGreen#75d12e
terminal.ansipurple#6c71c4
terminal.ansiRed#ef4e6a
terminal.ansiWhite#eee8d6
terminal.ansiYellow#e58e36
textLink.activeForeground#bb98e9
textLink.foreground#bb98e9
titleBar.activeBackground#1e1d40
titleBar.activeForeground#675777
titleBar.inactiveBackground#1e1d40
titleBar.inactiveForeground#675777
widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scope	foreground	fontStyle
—	#bb98e9	—
comment, punctuation.definition.comment	#675777	italic
variable, string constant.other.placeholder	#bb98e9	—
support.variable.property, meta.jsx.children	#bb98e9	—
constant.other.color	#eee8d6	—
invalid, invalid.illegal	#ef4e6a	—
invalid.deprecated	#6c71c4	—
keyword, storage.type, storage.modifier	#75d12e	—
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	#7c51f1	—
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	#e58e36	bold
source.cpp meta.block variable.other	#ef4e6a	—
variable.other.constant	#d13a82	—
support.other.variable, string.other.link, variable.other.normal.shell, variable.other.positional.shell	#d13a82	—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, keyword.other	#d13a82	—
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	#00c5c7	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	#e58e36	—
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	#ef4e6a	—
variable.language	#ef4e6a	—
entity.name.method.js	#2e8ccf	—
meta.class-method.js entity.name.function.js, variable.function.constructor	#2e8ccf	—
entity.other.attribute-name.class	#e58e36	—
source.sass keyword.control	#2e8ccf	—
markup.inserted	#75d12e	—
markup.deleted	#ef4e6a	—
markup.changed	#6c71c4	—
string.regexp	#00c5c7	—
constant.character.escape	#00c5c7	—
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	#ef4e6a	—
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	#75d12e	—
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	#75d12e	—
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	#75d12e	—
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	#75d12e	—
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	#bb98e9	—
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	#75d12e	bold
markup.italic	#d13a82	italic
markup.bold, markup.bold string	#d13a82	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	#d13a82	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	#e58e36	—
markup.raw.block	#6c71c4	—
markup.raw.block.fenced.markdown	#65737E	—
punctuation.definition.fenced.markdown	#00000050	—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown	#bb98e9	—
variable.language.fenced.markdown	#65737E	—
meta.separator	#65737E	bold
markup.table	#bb98e9	—
markup.fenced_code.block.markdown, markup.inline.raw.string.markdown	#00c5c7	—
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	#00c5c7	—
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	#e58e36	—

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